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

Susy is a semantic CSS framework creator entirely native to
[Compass](http://compass-style.org/).
Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that
will never activate that bloody side-scroll bar. Susy sets your width on the
outer element (`container`), adds a `max-width` of `100%` and builds the rest
of your grid in percentages. The philosophy and technique are based on
[Natalie Downe](http://natbat.net/)'s "[CSS
Systems](http://natbat.net/2008/Sep/28/css-systems/)" - which introduces
difficult math in the service of beautiful structure. With the power of
Compass/Sass, Susy will do that math for you.

Using simple mixins, columns can be created, suffixed, prefixed, and nested
easily - and always in flexible percentages.

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.

Philosophy and Goals
--------------------

The method comes from [Natalie Downe](http://natbat.net/)'s "[CSS
Systems](http://natbat.net/2008/Sep/28/css-systems/)", but I'll cover it here.

It is important for accessibility and usability that we are:

* Responsive to text sizing: In order for our site to be accessible we need to
  allow different font-sizes to be set by the client. In order to maintain
  design integrity of proportions and line-lengths, the grid needs to respond
  to those sizes.

* Responsive to window sizing: In order to maintain usability across
  platforms/monitors, our grid needs to respond to the size of the viewport.
  This is mainly an issue as the viewport shrinks and we are given a
  side-scroll bar. No one likes that. On the large end our design integrity
  and line lengths are more important than taking up all the possible space.

In order to achieve both we need to combine the best of the elastic (em-based)
and fluid (%-based) models. The solution is simple: First we build a fluid
grid, then place it inside an elastic shell, and apply a maximum width to that
shell so that it never exceeds the size of the viewport. It's simple in
theory, but daunting in practice, as you constantly have to adjust your math
based on the context.

But Susy harnesses the power of Compass and Sass to do all the math for you.

Grid Basics
===========

* Set up your default grid values (total columns, column width, gutter
  width, side gutter width), your base font size, and other style defaults
  in `_base.sass`.

* Create your grid in `screen.sass`: apply the `+susy` mixin to the `body`
  element and the `+container` mixin to the element that contains the page
  grid.

* Use the `+columns` mixin to declare the width in columns of an element,

* Use `+alpha` and `+omega` to declare elements which include the first or
  last column within their parent element (`+full` to declare both `+alpha`
  and `+omega`).

* Use `+prefix` or `+suffix` to give the width (in columns) of an elements
  left or right margin, or `+pad` to give both `+prefix` and `+suffix` at
  once.

* In nested contexts, all of these mixins take an extra final argument, the
  width in columns of the parent (nesting) element.

That's it for the basics! Here's a sample Susy grid layout:

    body
      +susy
     
    #page
      +container
     
    #brand
      +columns(8)
      +pad(1,1)
      +full
      h1
        +columns(5,8)
        +pad(1,2,8)
        +full(8)
        
    #nav
      +columns(2)
      +alpha
     
    #content
      +columns(8)
      +omega
      #description
        +columns(5,8)
        +alpha(8)
      #credit
        +columns(3,8)
        +omega(8)

Tutorial
========

For more details, read [the tutorial](http://www.oddbird.net/susy/tutorial/).  
It's also included with Susy in the docs/ folder.

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

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

* `+show-grid(!src)` will remove all your backgrounds and repeat the specified
  grid image on an element. Good for testing your baseline grid.

* `+inline-block-list([!horizontalpadding])` for making lists inline-block
  when floating just won't do the trick.

* `+hide` for hiding content from visual browsers while keeping accessability
  intact.

* `+skip-link([!top = 0, !right, !bottom, !left])` hide a link, and then show
  it again on focus. the TRBL settings allow you to place it absolutely on
  display. Default will be top left of the positioning context.

* `+inline-italic` because some fonts/browsers add line-height when you
  explicitly set italics on an inline element - this takes some away.

And then the fun stuff:

* `+opacity(!opacity)` adds cross-browser opacity settings (takes a range of
  0 to 1).

* `+border-radius(!radius)` (`+border-bottom-left-radius` etc. all work) for
  rounded corners in supporting browsers.

* `+box-sizing(!model)` for setting the box sizing model in supporting
  browsers.

* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` for
  box-shadow in webkit and CSS3.