A tiny, simple and dynamic grid system.
Before you run away at the sight of yet another grid system, Gridlock was designed to be diffrent because it puts you as it's focus point and as a result uses plain english class names and a simple structure to create the grids that you want. If you don't like something, change it to your liking and everything will continue to work at the change of a property.
<div class="row"> <div class="column-5">This is a column.</div> <div class="column-5">This is a column.</div> </div>
Providing your class names add up to that of the total columns, you can mix and match any amount of columns and widths you like.
|gridlock-columns||The number of columns to use in the grid||12|
|gridlock-row-name||The name to use for rows||row|
|gridlock-column-name||The name to use for columns||column|
|gridlock-puller-name||The name to use for pullers||push|
|gridlock-pusher-name||The name to use for pullers||pull|
|gridlock-gutter||The gutter between columns||.5em|
|Internet Explorer||partial (from version 8)|
Subscribe to Nathaniel Blackburn
Get the latest posts delivered right to your inbox