Fluid and Responive
By default, columns will grow to full grid width and stack. Use responsive indicators to size into columns on various screen sizes. Use 'fit' to match columns to content size
.col
.col
.col x5
.col x4
.col x3
.col s6
.col s6
.col m4
.col m4
.col m4
.col l3
.col l3
.col l3
.col l3
.col fit
.col fit
.col fit
.col fit
.col fit
.col fit
.col fit
.col fit
.col fit
.col fit
.col fit
.col fit
Simple lightweight syntax
Wrap your grid with row and then add col to each child. Size columns by adding a screen size followed by a number. x = all screen sizes, s = small, m = medium, l = large Optionally, you can wrap your row with the '.container' helper to keep content restrained.
<div class="container">
<div class="row">
<div class="col"> Full Width column </div>
<div class="col x6">6 columns on all screen sizes</div>
<div class="col s6">6 columns on small and up</div>
<div class="col m6">6 columns on medium and up</div>
<div class="col l6">6 columns on large and up</div>
<div class="col fit">Column will shrink to size of content</div>
</div>
</div>
Nesting
Go as deep as you like, it isn't a problem!
Whoa.
That's Deep!
Hello!
.col m4
Offsets
Easy Peasy Lemon Squeasy
.col x4 offset-1
.col x4 offset-1
.col x6
.col x3 offset-m6
.col x3 offset-l7
Negative Margins
The columns will align properly to content outside of the grid
I am an element that lives outside of the grid.
.col x4
.col x4
.col x4
Column Spacing
Utilize Flexbox's powerful content spacing for your columns.
.row center
.col x2
.col x2
.col x2
.row end
.col x2
.col x2
.col x2
.row around
.col x2
.col x2
.col x2
.row between
.col x2
.col x2
.col x2
Column Positioning
One of the biggest pains with layouts is made simple with Blue Grid. Add top, middle, or bottom to your row element
.row top
.col x6 l4
.row middle
.col x6 l4
.row bottom
.col x6 l4
Column Reordering
Need to quickly re-order columns? Just add the appropirate helper class.
.row reverse
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
1
2
3
4 .first
1 .last
2
3
4
Customizable
Blue Grid is built in Sass, so feel free to override it's variables to fit the needs of your project!
// _variables.scss
// Add, remove, or rename breakpoints here
$bluegrid-breakpoints: (
'x': default,
's': 600px,
'm': 960px,
'l': 1140px
);
$bluegrid-settings: (
// Default grid variables
'num-cols': 12,
'gutter-width': 1rem,
'default-span': 100%, //This can be 'fit', or a unit (1), or fill whole row (100%)
// Defaults for content containers
'container-width': 1280px,
'container-padding': 1rem,
...
// Mixin related variables omitted ...
);