#Grid-zilla A no-nonsense Flexbox grid system
###Features
- use columns (12 column setup), mobile uses 3 columns
- use flex-align-left, flex-align-right and flex-space-between to arrange columns on the grid
- use offsets to include empty spaces between columns
- opt-in to remove the gutter from columns
- [USING gridzilla-aware] No breakpoints. Set a minimum width on a column instead and flexbox will figure out the rest.
###Installation
- npm install
- gulp build
- include gridzilla-aware.css or gridzilla-default.css on top of your stylesheet.
###Usage Use it out of the box. Or make it your own and add awesomeness wherever you need.
####Grid, column basic setup Wrap your cols in .gz-grid and you're good to go. It is a 12-column grid by default (mobile is 3 column). When not specifying a column size for mobile, gridzilla will decide the most suitable grid for you. Ex. .gz-col-4 (33%) will show as .gz-col-s-1 (33%) on mobile.
<div class="gz-row">
<div class="gz-col-5">column</div>
<div class="gz-col-7">column</div>
<div class="gz-col-2">column</div>
<div class="gz-col-2">column</div>
<div class="gz-col-2">column</div>
</div>
####Column offset add gz-col-l-offset-x or gz-col-m-offset-x to your column to add an offset between columns.
<div class="gz-row">
<div class="gz-col-3">column</div>
<div class="gz-col-3 gz-col-l-offset-3">column</div>
<div class="gz-col-3">column</div>
</div>
####Using breakpoints (with gridzilla-default) Use gz-col-x, gz-col-m-x and gz-col-s-x to define grid sizes for different breakpoints.
<div class="gz-row">
<div class="gz-col-5 gz-col-s-3">column</div>
<div class="gz-col-7 gz-col-m-6 gz-col-s-3">column</div>
<div class="gz-col-2 gz-col-m-6 gz-col-s-3">column</div>
<div class="gz-col-2 gz-col-s-3">column</div>
<div class="gz-col-2 gz-col-s-3">column</div>
</div>
####Using content awareness (with gridzilla-aware) Instead of using breakpoints, leave it up to flexbox. Just specify your initial column size and a minimum width for a column. Width is calculated in steps of 20px / step. Ex. gz-col-min-10 = 10 x 20px = 200px;
<div class="gz-row">
<div class="gz-col-3 gz-col-min-10">column</div>
<div class="gz-col-3 gz-col-min-10">column</div>
<div class="gz-col-3 gz-col-min-10">column</div>
<div class="gz-col-3 gz-col-min-10">column</div>
</div>
####Grid gutter By default, the grid will set a gutter. But you can opt-out.
<div class="gz-row gz-row--no--gutter">
<div class="gz-col-6">column</div>
...
</div>
####Grid column alignment (only works with gridzilla-default) Tell flexbox how to align the columns. It's a wrapper for flexbox justify-content really. Use gz-grid--align--left, gz-grid--align--right or gz-grid--space--between (default)
<div class="gz-row gz-row--align--left">
<div class="gz-col-6">column</div>
...
</div>
####vertical align columns You must have been there. Designers want their content to align vertically. Think titles that are longer than one line. That was a real headache. Until flexbox came that is. Important: you need to wrap the content in at least one element (Ex. <p>) or the valign won't work
<div class="gz-grid gz-valign">
<div class="gz-col-4"><p>Kittens</p></div>
<div class="gz-col-4"><p>Too many kittens... Argh fell to second line</p></div>
<div class="gz-col-4"><p>No more kittens</p></div>
</div>
###Browser Support It uses Flexbox. That means IE10+. But be honest, how many mobile devices use IE9- anyway? Nevertheless, IE9- will have a fixed-width colum grid.