CSS Framework 960 grid

Posted by Daniel Vela on June 13, 2012

Source

Sample:

<div class="container_12">
  <div class="grid_4">
    I am 1/3 wide.
  </div>

  <div class="grid_4">
    I am 1/3 wide.
  </div>
  <div class="grid_4">
   Mee too!
  </div>
  <div class="clear"> 
  <div class="grid_6">
    I am 1/2 wide.
  </div>
  <div class="grid_6">
    I am 1/2 wide.
  </div>
</div>

Nested

class="alpha" => first div without margin
class="omega" => last div without margin

Rearrangement

class="push_6" => last visually(used for changing the order that appear in the HTML)
class="pull_6" => first visually(used for changing the order that appear in the HTML)

Empty space

class="prefix_2" => insert 2 empty columns before
class="suffix_2" => insert 2 empty columns after

Layout

container_XX: 12 or 16 columns