A responsive grid built on flexbox.
Uses flexbox in newer browsers and gracefully degrades in older browsers (<=IE9), supporting most of the same functionality using an inline-block grid.
NPM:
npm install --save @nib-styles/sass-grid
Component:
component install nib-styles/sass-grid
SCSS:
@import "@nib-styles/sass-grid/compiled"
HTML:
<html class="flexbox"><!-- You'll probably use Modernizr and won't need to manually put this class here --!>
...
<div class="content">
<div class="grid" g-xs="halign:justify-center">
<div class="grid__unit" g-md="cols:3">Does stuff</div>
<div class="grid__unit" g-md="cols:3">Does more stuff</div>
<div class="grid__unit" g-md="cols:3">Does even more stuff</div>
<div class="grid__unit" g-md="cols:3">It just does all the stuff!</div>
</div>
</div>
...
</html>
See sass-grid for a full list of the available classes.
SCSS:
@import "@nib-styles/sass-grid"
@import "@nib-styles/sass-breakpoints";
.feature-panel-wrapper {
@include content();
}
.feature-panel {
@include grid();
@include grid--halign-justify-center()
}
.feature-panel__feature {
@include grid__unit();
@include breakpoint('md') {
@include grid__unit--cols(3);
}
}
HTML:
<html class="flexbox"><!-- You'll probably use Modernizr and won't need to manually put this class here --!>
...
<div class="feature-panel-wrapper">
<div class="feature-panel">
<div class="feature-panel__feature">Does stuff</div>
<div class="feature-panel__feature">Does more stuff</div>
<div class="feature-panel__feature">Does even more stuff</div>
<div class="feature-panel__feature">It just does all the stuff!</div>
</div>
</div>
...
</html>
See sass-grid for a full list of the available mixins.
The content class is the default nib content container. It has a max width of 60rem/960px (we are looking to increase this to ~1200px for future projects). It is available as a class and a mixin. See previous two code sections for examples of usage.
Note: needs to be a child of .sticky__content, not on the same element