README.html

<h1 id="grootstrap">Grootstrap</h1>
<h2 id="what-the-hell-">What the hell?</h2>
<p>Did you know that Bootstrap features approximately zero Marvel movie references? That&#39;s just not acceptable in this day and age, is it? So I&#39;ve clumsily shoehorned Vin Diesel&#39;s sensational work as a talking tree into a CSS stylesheet and made it into a thing you could theoretically actually use in production. For those of you who want to cover your markup in excessive, hard to read references to Guardians of the Galaxy, this is the grid framework for you. </p>
<h2 id="getting-started">Getting Started</h2>
<p>Simply grab the grootstrap.min.css file (or grootstrap.css, if you prefer) and add it to your project. </p>
<h2 id="rows">Rows</h2>
<p>Make a row or new layout context by adding the class <code>we-are-groot</code> to your container. </p>
<h2 id="columns">Columns</h2>
<p>Here&#39;s where it gets fun. The number of o&#39;s in the word groot dictates how many columns to span, starting from two o&#39;s.</p>
<p>That means that <code>i-am-groot</code> will span 1, <code>i-am-grooot</code> will span 2, and so on, right up to <code>i-am-grooooooooooooot</code> which will span all 12 columns.</p>
<h2 id="no-gutters">No Gutters</h2>
<p>To go gutterless, just take out the hyphens between the words &quot;I am Groot&quot; - Like so: <code>iamgroot</code></p>
<h2 id="responsive">Responsive</h2>
<p>Grootstrap is mobile first and comes with two baked in breakpoints - Use titlecase to indicate a tablet column width, and uppercase to indicate a desktop column width.</p>
<p><code>&lt;div class=&quot;i-am-grooooooooooooot I-Am-Grooooooot I-AM-GROOOOT&quot;&gt;l&lt;/div&gt;</code></p>
<p>In this example, the div will span 12 columns on mobile, 6 on tablet and 4 on desktop. Resize the page to see it in action below</p>
<h2 id="i-need-more-help-">I need more help!</h2>
<p>Check out <a href="https://rawgit.com/Newnab/grootstrap/master/examples.html">the examples page</a>!</p>