Standard Grid

The grid is SASS based. Using SASS includes will give the selector the proper width and gutters.


Example
1
11
2
10
3
9
4
8
5
7
6
6

Syntax
!!!Demo Classes and Values - Not for Production!!!

HTML: <div class="demo-row"> <div class="demo-small">2</div> <div class="demo-large">10</div> </div>
SASS: .demo-row{ @include row(12); } .demo-small{ @include column(2); } .demo-large{ @include column(10); }
Compiled CSS: .demo-row{ display: block; width: 101.85185%; margin: 0 -0.92593%; } .demo-small{ display: inline; float: left; width: 14.81481%; margin: 0 0.92593%; } .demo-large{ display: inline; float: left; width: 81.48148%; margin: 0 0.92593%; }