960 Grid System - Compass Plugin
================================

960.gs is created by Nathan Smith. See the official site for more info: <http://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](http://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](http://chriseppstein.github.com/) is the creator of Compass, a core contributor to Sass and the father of this plugin.

[Nathan Smith](http://sonspring.com/) is the author of [960.gs](http://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](https://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](https://github.com/chriseppstein/compass-960-plugin/contributors).