|
<article> |
|
<h1>Boilerplate for Grids</h1> |
|
<section> |
|
<h2>1. Floated items</h2> |
|
<div class="grid grid-floated"> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
</div><!-- .grid --> |
|
<h2>2. Inline-block items</h2> |
|
<div class="grid grid-ib"> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
</div><!-- .grid --> |
|
<h2>3. Flexbox — single row</h2> |
|
<div class="grid grid-flex"> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
</div><!-- .grid --> |
|
<h2>4. Flexbox with float fallback</h2> |
|
<div class="grid grid-floated grid-flex"> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
</div><!-- .grid --> |
|
<h2>5. Flexbox with inline-block fallback</h2> |
|
<div class="grid grid-ib grid-flex"> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
<div class="grid-size-1of5"> |
|
<div class="grid-content">1/5</div> |
|
</div> |
|
</div><!-- .grid --> |
|
<h2>6. Two column layout (flex + floats)</h2> |
|
<div class="grid grid-floated grid-flex"> |
|
<div class="grid-golden-1"> |
|
<div class="grid-content">62%</div> |
|
</div> |
|
<div class="grid-golden-2"> |
|
<div class="grid-content">38%</div> |
|
</div> |
|
</div><!-- .grid --> |
|
<h2>7. Two column layout (flex + inline-blocks)</h2> |
|
<div class="grid grid-ib grid-flex"> |
|
<div class="grid-golden-1"> |
|
<div class="grid-content">62%</div> |
|
</div> |
|
<div class="grid-golden-2"> |
|
<div class="grid-content">38%</div> |
|
</div> |
|
</div><!-- .grid --> |
|
</section> |
|
</article> |