Introduction
Standart 12 column (customizable) responsive grid (very similar to Bootstrap grid) based on flexbox. The biggest change is different naming scheme - .grid-cell and .grid replaces .col and .row in that specific order.
Grid (.grid)
Config options:
- Number of columns (default 12)
- Size of horizontal spacing (gutter)
Modifiers
| Modifier class | Behavior |
|---|---|
| .grid--gutters0 | 0% horizontal space between grid cells. |
| .grid--gutters1 | 25% horizontal spacing between grid cells. |
| .grid--gutters2 | 50% horizontal spacing between grid cells. |
| .grid--gutters3 | 100% horizontal spacing between grid cells (default). |
| .grid--gutters4 | 150% horizontal spacing between grid cells. |
| .grid--gutters5 | 300% horizontal spacing between grid cells. |
| .grid--alignCenter | Vertically aligns grid cells inside grid. |
Grid cell (.grid-cell)
Grid cells are by default fluid (100% width), meaning two grid cells inside grid will automatically adapt by their content. In most cases is recommended use forced widths by using size modifiers to prevent unpredected behaviour. Example: user saves very long text without white space, displaying it breaks layout (watch out for these situations).
Modifiers
| Modifier class | Behavior |
|---|---|
| .grid-cell--xs-{1-12} | Affects screen xs (< 576px) |
| .grid-cell--sm-{1-12} | Affects screen sm (> 576px) |
| .grid-cell--md-{1-12} | Affects screen md (> 768px) |
| .grid-cell--lg-{1-12} | Affects screen lg (> 992px) |
| .grid-cell--xl-{1-12} | Affects screen xl (> 1200px) |
| .grid-cell--notFluid | Grid cell width will be same as its content. |
Examples
<div class="grid">
<div class="grid-cell grid-cell--xs-1">
1/12
</div>
<div class="grid-cell grid-cell--xs-1">
1/12
</div>
<div class="grid-cell grid-cell--xs-2">
2/12
</div>
<div class="grid-cell grid-cell--xs-3">
3/12
</div>
<div class="grid-cell grid-cell--xs-5">
<div class="grid grid--gutters1">
<div class="grid-cell">Fluid in nested grid.</div>
<div class="grid-cell">Another fluid in nested grid.</div>
</div>
</div>
</div>