Susy - Compass Plugin
================================

Let me introduce you to Susy.

Susy is a semantic CSS framework creator built native to [Compass](http://compass-style.org/).

Susy is an expert at designing elastic (or fixed, if you swing that way) grids that will never activate that bloody side-scroll bar. Susy sets your width on the outer element (@grid-container@), adds a @max-width@ of @99%@ and builds the rest of your grid in percentages of the whole.

Columns can also be nested by declaring the context along with the target width. Etc.

Install
=======

    sudo gem sources --add http://gems.github.com/
    sudo gem install chriseppstein-compass
    sudo gem install ericam-compass-susy-plugin

Create a Susy-based Compass Project
==================================

    compass -r susy -f susy <project name>

Then edit your `_base.sass`, `screen.sass` and `print.sass` files accordingly. A reset is added automatically.

Customizing your Grid System
============================

To create a grid system, set the `!grid_unit`, `!total_cols`, `!col_width`, and
`!gutter_width` variables in your `base.sass` and then use the `+grid-container` mixin to declare
your container element.

Example:

    !grid_unit = "em"
    !total_cols = 10
    !col_width = 7
    !gutter_width = 1

    #page
      +grid-container

The default values are 16 columns, column width of 4em and gutter width 1em.

Making Semantic Grids
=====================

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

* Use the `+grid-col` mixin to declare a grid element. The first argument
is the number of cols, the second is the size (in grid columns) of the
containing element (defaults to the containers total_cols).

* Use the `+last` mixin to declare the last comumn in a row.

* Use the `+right` mixin to float a grid item to the right instead of left.

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



Example:

    #page
      +grid-container
      #left-nav
        +grid-col(3)
      #main-content
        +grid-prefix(2)
        +grid-col(4, 10)
        +last
        +right

Extra Utility Mixins
=====================

Extra utilities are included in Susy's `utils.sass` file, with additional list options, 
experimental (CSS3/proprietary) CSS, and more.