Groundwork is a lightweight, responsive, BEM inspired, CSS grid.
- Add fixed width containers
- Convert to @mixins
- Tests
Groundwork variables can be overwritten to suit your grid requirements. The following variables are Groundworks defaults.
$groundwork-columns: 12;
$groundwork-gutter-width: 20px;
$groundwork-container-gutter: $groundwork-gutter-width * 2;
$groundwork-breakpoints: (xs, 576px), (sm, 768px), (md, 992px), (lg, 1200px);
$groundwork-class-container: 'container';
$groundwork-class-row: 'row';
$groundwork-class-column: 'column';
Groundwork classes are heavily based on Bootstrap classes. An example of the markup is shown below.
<div class="container">
<div class="row">
<div class="column column--sm-6 column--xs-4">
</div>
<div class="column column--sm-3 column--xs-4">
</div>
<div class="column column--sm-3 column--xs-4">
</div>
</div>
</div>
If you would prefer fluid containers, you can use .container--fluid
, an examples is below:
<div class="container container--fluid">
<div class="row">
</div>
</div>
Because the internet already has too many grids. Another won't hurt anyone. Also they're fun to build.
The MIT License (MIT).