This is a port of solved by flexbox grid system to semantic Sass.
For more examples visit the site.
HTML
<div class="Basic"> <div class="Basic__cell"> ... </div> <div class="Basic__cell"> ... </div> </div>Sass
.Basic { @include grid; } .Basic__cell { @include grid-cell; }| Param | Values | Default |
|---|---|---|
| $gutters | Zero, Md, Lg, Xl | Md |
Example:
.Grid { @include grid($gutters: Zero); }| Param | Value | Default |
|---|---|---|
| $flex | auto, fit, full, 1 of 2, 1 of 3, 1 of 4 | fit |
| $flexCell | true, false | true |
| $alignItems | top, bottom, center | null |
| $justifyContent | center, left, right | null |
| $alignSelf | top, bottom, center | null |
| $gutters | Zero, Md, Lg, Xl | Md |
Example:
.Grid__cell { @include grid-cell(1 of 2, $flexCell: false); }MIT