‹ Layout

1.1

_grid.scss

Grid

The grid is based on the OOCSS grid (http://oocss.org) by Nicole Sullivan. It provides several grid classes that can be mixed and matched and if necessary can be wrapped in a row class to prevent columns from bumping into each other.

Modifiers:

  • .col1of1 – Full width
  • .col1of2 – Half width
  • .col1of3 – Third width
  • .col2of3 – Two thirds width
  • .col1of4 – Fourth width
  • .col3of4 – Three fourths width
  • .col1of5 – Fifth width
  • .col2of5 – Two fifths width
  • .col3of5 – Three fifths width
  • .col4of5 – Four fifths width
.col1of1
col1of1 
<div class='row'>
<div class='col1of1' style='background: #ddd; line-height: 2em;'>
col1of1
</div>
</div>
.col1of2
col1of2 
<div class='row'>
<div class='col1of2' style='background: #ddd; line-height: 2em;'>
col1of2
</div>
</div>
.col1of3
col1of3 
<div class='row'>
<div class='col1of3' style='background: #ddd; line-height: 2em;'>
col1of3
</div>
</div>
.col2of3
col2of3 
<div class='row'>
<div class='col2of3' style='background: #ddd; line-height: 2em;'>
col2of3
</div>
</div>
.col1of4
col1of4 
<div class='row'>
<div class='col1of4' style='background: #ddd; line-height: 2em;'>
col1of4
</div>
</div>
.col3of4
col3of4 
<div class='row'>
<div class='col3of4' style='background: #ddd; line-height: 2em;'>
col3of4
</div>
</div>
.col1of5
col1of5 
<div class='row'>
<div class='col1of5' style='background: #ddd; line-height: 2em;'>
col1of5
</div>
</div>
.col2of5
col2of5 
<div class='row'>
<div class='col2of5' style='background: #ddd; line-height: 2em;'>
col2of5
</div>
</div>
.col3of5
col3of5 
<div class='row'>
<div class='col3of5' style='background: #ddd; line-height: 2em;'>
col3of5
</div>
</div>
.col4of5
col4of5 
<div class='row'>
<div class='col4of5' style='background: #ddd; line-height: 2em;'>
col4of5
</div>
</div>