960 Grid System - Compass Plugin

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

• This plugin is consistent with latest version of 960.gs as of 3/14/2011

---

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

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.

Adding the 960 plugin to an existing project

Add the following to your compass.rb config file:

# Require any additional compass plugins here.
require 'ninesixty'

Then make sure you have imported the grid library into your core .sass or .scss file with:

@import compass/reset
@import 960/grid

Customizing your Grid System

This plugin uses the following configuration variables:

• ‘$ninesixty-columns` (default: 12) controls the default number of grid columns

• ‘$ninesixty-grid-width` (default: 960px) controls the default overall grid width

• ‘$ninesixty-gutter-width` (default: 20px) controls the default gutter width

• ‘$ninesixty-class-separator` (default: ’_’) sets the word separator for classnames generated by +grid-system

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 System framework use the ‘+grid-system-complete` mixin to generate the corresponding classes. You can also customize the number of columns as demonstrated:

Example:

+grid-system-complete(24)

If you want to scope the grid inside a specific set of selectors or control your container class’ name you can use the ‘+grid-system` mixin instead.

Example:

#wrap
  .my_container
    +grid-system(16)

This will render all of the grid system nested below your selector, replacing the normal function of the container class (would be .container_16 in this example).

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:

$ninesixty-columns: 16

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

Authors/Contributors

[Chris Eppstein](chriseppstein.github.com/) is the creator of Compass, a core contributor to Sass and the father of this plugin.

[Nathan Smith](sonspring.com/) is the author of [960.gs](960.gs/), the grid system this plugin is based on. He’s also kind enough to let us pester him with questions from time to time.

These days, [Matt Sanders](github.com/mattsa) is probably the best person chat with if you’ve found a bug or want to get a patch included.

We’ve also been lucky enough to have some help from a number of [other contributors](github.com/chriseppstein/compass-960-plugin/contributors).