Grid
A 12 column grid built on flexbox. Put columns inside flex-grid and give each one a width out of 12, or leave the number off to share the row equally.
| Class | Description |
|---|---|
container | Centres the page content, up to 1100px wide |
flex-grid | A row of columns |
col-{size}-{n} | Column that is n twelfths wide |
col-{size} | Column that shares the row equally with the other columns |
<div class="flex-grid">
<div class="col-xs-4"><div class="secondary-bg" style="padding: .5em">col-xs-4</div></div>
<div class="col-xs-8"><div class="secondary-bg" style="padding: .5em">col-xs-8</div></div>
</div>
<br>
<div class="flex-grid">
<div class="col-xs"><div class="secondary-bg" style="padding: .5em">col-xs</div></div>
<div class="col-xs"><div class="secondary-bg" style="padding: .5em">col-xs</div></div>
<div class="col-xs"><div class="secondary-bg" style="padding: .5em">col-xs</div></div>
</div>Breakpoints
xs columns apply at every size above phone width. The other sizes only start at their breakpoint and are full width below it, so they can be combined:
| Size | Classes | Applies |
|---|---|---|
xs | col-xs-* | Above 550px |
sm | col-sm-* | From 551px |
md | col-md-* | From 751px |
lg | col-lg-* | From 1101px |
At 550px and below, every column is full width.
<div class="flex-grid">
<div class="col-sm-6 col-lg-3"><div class="secondary-bg" style="padding: .5em">One</div></div>
<div class="col-sm-6 col-lg-3"><div class="secondary-bg" style="padding: .5em">Two</div></div>
<div class="col-sm-6 col-lg-3"><div class="secondary-bg" style="padding: .5em">Three</div></div>
<div class="col-sm-6 col-lg-3"><div class="secondary-bg" style="padding: .5em">Four</div></div>
</div>Source: scss/components/_grid.scss