960 Grid System - Compass Plugin

• Port of Version 1.0

• 2008-03-24

Created by Nathan Smith. See the official site for more info: <960.gs/>

---

This plugin adds the 960 Grid System framework to [Compass](compass-style.org/).

Install

sudo gem install itsucks-compass-960-plugin

Create a 960-based Compass Project

compass -r ninesixty -f 960 <project name>

Then edit your ‘grid.sass`, `text.sass` adn `debug.sass` files accordingly. A reset is added into grid.sass automatically.

Customizing your Grid System

To create a grid system with other number of columns use the ‘+grid-system` mixin to generate the corresponding classes.

Example:

#wrap
  +grid-system(24)

Making Semantic Grids

• Use the ‘+grid-container` mixin to declare your container element.

• Use the ‘+grid` mixin to declare a grid element.

• Use the ‘+alpha` and `+omega` mixins to declare the first and last grid elements for a row.

• Use the ‘+grid-prefix` and `+grid-suffix` mixins to add grid columns before or after a grid element.

Example:

#wrap
  +grid-container
  #left-nav
    +alpha
    +grid(5,16)
  #main-content
    +grid-prefix(1,16)
    +grid(10, 16)
    +omega

Debug Grids

+showgrid_12(!selector = ".wrap_12")
+showgrid_16(!selector = ".wrap_16")