<div class="section head">
<div class="corset">
<div class="row">
<div class="col-sm-9 col-xs-6">
<h1>magic-stylez</h1>
</div>
<div class="col-sm-3 col-xs-6">
<a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
<span class="icn"><i class="icomoon-github3"></i></span>
<span>SourceCode</span>
</a>
</div>
</div>
</div>
</div>
<div class="section flatted">
<div class="corset tight">
<p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
</div>
</div>
<div class="section hard-top">
<div class="corset center_text">
<h2>Warning</h2>
<p class="loud">This Gem is still work in process!</p>
<p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
<p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
</div>
</div>
<div class="section hard-top">
<div class="corset tight">
<h3>Dependencies</h3>
<ul class="list loud">
<li><a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a></li>
<li><a href="http://bourbon.io/" target="_blank">bourbon</a></li>
</ul>
<p>(both are allready included)</p>
</div>
</div>
<div class="section hard-top">
<div class="corset tight">
<h3 class="loud">Usage</h3>
<hr/>
<p class="highlight"><i class="olicons-hide-filter"></i> add the gem to your applications gemfile</p>
<pre><code>gem "magic_stylez"</code></pre>
<br/>
<p class="highlight"><i class="olicons-hide-filter"></i> run the generator</p>
<pre><code>$ rails g magic_stylez:install</code></pre>
<br/>
<p class="highlight"><i class="olicons-hide-filter"></i> add to stylesheets</p>
<pre><code>SASS:
@import 'magic-stylez'; // import all
@import 'magic-min'; // import basic
CSS:
//= 'magic-stylez'; /* import all */
//= 'magic-min'; /* import basic */</code></pre>
<br/>
<p class="highlight"><i class="olicons-hide-filter"></i> add to javascripts</p>
<pre><code> //= 'magic-stylez'; /* import all */
//= 'magic-min'; /* import basic */</code></pre>
</div>
</div>
<div class="section hard-top">
<div class="corset tight">
<h2 class="loud">NEWs</h2>
<hr/>
<p class="loud"><i class="olicons-hide-filter"></i> <em>rail-ujs.js</em> file optimized for splitted and divided buttons</p>
<pre><code>//= require magic/ext/rails-ujs</code></pre>
<hr/>
<p class="highlight"><i class="olicons-hide-filter"></i> magic-styles update generator</p>
<p class="loud"><i class="olicons-hide-filter"></i> in the process I often add new variables to the corporate files</p>
<p class="loud"><i class="olicons-hide-filter"></i> what causes "Missing variable!" when you update to new version</p>
<p class="loud"><i class="olicons-hide-filter"></i> this generator adds all new variables without touching your settings</p>
<pre><code>$ rails g magic_stylez:update</code></pre>
<br/>
<br/>
<h4>Changes when update to <small>0.0.0.78</small>:</h4>
<ul>
<li>add divider variables in <em>corporate/varriables</em>!</li>
</ul>
<p>
Dividers are completely rewritten and now have transparent backgrounds, so you can place them on any element.
<br/>
Also some variables added:
</p>
<ul>
<li><code>$divider-horizontal-spacing</code>, <code>$divider-vertical-spacing</code> => spacing</li>
<li><code>$divider-top-color</code>, <code>$divider-bottom-color</code> => line-colors for <em>.divider</em> and <em>hr</em></li>
</ul>
<p>
If you update to <strong>>= 0.0.0.78</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
</p>
<hr/>
<h4>Changes when update to <small>0.0.0.67</small>:</h4>
<ul>
<li>changed some names in <em>corporate/varriables</em>!</li>
</ul>
<p>
With Version <strong>0.0.0.67</strong> Sections have more bootstrap like name, like <code>.section.section-xs</code> instead of <code>.section.compact</code>.
<br/>
Also some variables changed, so <code>$section-flatted-padding</code> becomes <code>$section-sm-padding</code>.
<br/>
<br/>
If you update to <strong>>= 0.0.0.67</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
</p>
<hr/>
<h4>Changes when update to <small>0.0.0.55</small>:</h4>
<ul>
<li><em>corporate/typo</em> is removed!</li>
<li><em>corporate/fonts</em> doesn't contain css, just variables</li>
</ul>
<p>With Version <strong>0.0.0.55</strong> I merged <em>corporate/typo</em> into <em>corporate/fonts</em> (they where so similar). I also removed all css from <em>corporate/fonts</em>, because it causes trouble with update generator (and also is not a variable).</p>
</div>
</div>
<div class="section hard-top">
<div class="corset tight">
<h3 class="loud">On to / To Do</h3>
<hr/>
<p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> npm & bower compatiblity</p>
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double csss</p>
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> learn english :)</p>
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> improve documentation</p>
</div>
</div>
<div class="section hard-top">
<div class="corset tight">
<h3>Thanks</h3>
<p class="loud">
A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
so thank you guys for the great work.
</p>
<p class="loud">
Same goes for <a href="http://bourbon.io/" target="_blank">bourbon</a> thanks for a lightweight helper set.
</p>
<p class="loud">Also thanks to all the people, how share their knowlegde on <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a>.</p>
</div>
</div>
<div class="section hard-top">
<div class="corset tight">
<h3>Authors</h3>
<ul class="list">
<li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
<li>many others ...</li>
</ul>
</div>
</div>
<div class="section hard-top">
<div class="corset tight">
<h3>License</h3>
<p class="loud">MIT-License</p>
</div>
</div>
<div class="section shine-top flatted">
<div class="corset">
<p class="center_text">© 2014 Torsten Wetzel (berlinmagic UG)</p>
</div>
</div>