960 Grid System - Compass Plugin

• Port of Version 1.0
• 2008-03-24

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

---

This plugin adds the 960 Grid System framework to Compass.

Install

gem install compass-960-plugin

Create a 960-based Compass Project

compass create -r ninesixty my_project --using 960

Or, If you prefer to use Sass's indentation based syntax:

compass create -r ninesixty my_project --using 960 --syntax sass

Then edit your grid.sass and text.sass files accordingly. A reset is added into grid.sass automatically.

Customizing your Grid System

This plugin uses the following configuration variables:

• $ninesixty-gutter-width (default: 20px) controls the default gutter width
• $ninesixty-grid-width (default: 960px) controls the default overall grid width
• $ninesixty-columns (default: 12) controls the default number of grid columns

All of the mixins included with this plugin use these configuration variables as defaults if the corresponding argument is omitted from a mixin call.

Class-Based Grid System

To create a grid system that works like the original 960 Grid Sytem framework use the +grid-system mixin to generate the corresponding classes. You can also customize the number of columns as demonstrated in the following example.

Example:

#wrap
  +grid-system(24)

Making Semantic Grids

To create a grid system using only CSS, use the following semantic grid mixins:

• Use the +grid-container mixin to declare your container element.
• Use the +grid(N, columns, gutter-width) 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(N, columns) and +grid-suffix(N, columns) mixins to add empty grid columns before or after a grid element.
• Use the +grid-push(N, columns) and +grid-pull(N, columns) mixins to move a grid element from its default position.

N is the number of grid columns to span as in grid_N or push_N with the original 960 Grid System framework.

Example:

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