pattulus
8/22/2011 - 11:34 PM
Susy 0.9 Reference Documentation
Susy 0.9 Reference Documentation
# Susy 0.9 Reference Documentation
_See the official [Susy site](http://susy.oddbird.net) for 1.0 documentation._
Terms
-----
* *Susy Grid*: A grid that you build with Susy. You can have multiple on one page if you need.
* *Grid Element*: Any HTML element that is aligned to a _Susy Grid_.
* *Container*: The root element in a _Susy Grid_. Anything inside it is a potential _Grid Element_.
* *Context*: Either root (default) or the number of columns spanned by the parent _Grid Element_.
* *Root Context*: When the _Container_ is the nearest _Grid Element_ ancestor.
* *Column*: The main unit of horizontal content measurement.
* *Alpha*: Any _Grid Element_ spanning the first _Column_ in its _Context_.
* *Omega*: Any _Grid Element_ spanning the last _Column_ in its _Context_.
* *Full*: Any _Grid Element_ spanning both the first and last _Columns_ in its _Context_.
* *Gutter*: The space between _Columns_. Added as `margin` after each _Grid Element_, and included in the internal width of a _Grid Element_ that spans multiple _Columns_.
* *Side Gutter*: Space between the _Susy Grid_ and the edge of the document on either side. Added as `margin` before _Alpha_ and after _Omega_ elements in the _Root Context_.
Imports
-------
* `susy`
* _That's everything. There is nothing else._
Basic Settings
--------------
* `$total-cols`
* _The number of Columns in your Susy Grid._
* unitless number
* Default: `12`
* `$col-width`
* _The width of a single Column in your Susy Grid._
* `em` | `px` | `%` | etc.
* default: `4em`
* `$gutter-width`
* _The width of space between Columns._
* units must match `$col-width`.
* default: `1em`
* `$side-gutter-width`
* _The width of space before and after the grid._
* units must match `$col-width`.
* default: `$gutter-width`
Advanced Directional Settings
-----------------------------
* `$from-direction`
* _The side of the Susy Grid from which the flow starts. For ltr documents, this is the left._
* `left` | `right`
* default: `left`
* `$omega-float`
* _The direction that Omega elements should be floated._
* `left` | `right`
* default: `opposite-position($from-direction)`
Mixins
------
* `container()`
* _Apply to the outer grid-containing element. This element will act as the Container for your Susy Grid._
* `columns(number [, context, from-direction])`
* _Apply to any element to align it to the Susy Grid. This is now a Grid Element._
* number (`$n`): Required number of Columns to span. This will become the Context for any children Grid Elements.
* context (`$c`): Current nesting context _if other-than-root_. Default: `false`.
* from-direction (`$from`): Direction from which the context flows. Default: `$from-direction`
* `alpha([context, from-direction])`
* _Apply to any element with `columns` if that element will span the first Column in a given context. Alpha is only used to apply a Side Gutter in the Root Context, so it is never needed in any other Context._
* context (`$nested`): The context, if other-than-root. Should always be false. Default: `false`.
* from-direction (`$from`): Direction from which the context flows. Default: `$from-direction`
* `omega([context, from-direction])`
* _Apply to any element with `columns` if that element will span the last Column in a given Context._
* context (`$nested`): The context, if other-than-root. Default: `false`.
* from-direction (`$from`): Direction from which the context flows. Default: `$from-direction`
* `full([context])`
* _Shortcut for `columns`, `alpha`, and `omega` when an element should span its entire Context._
* context (`$nested`): The context, if other-than-root. Default: `false`.
* `prefix(number [, context, from-direction])`
* _Add Columns of empty space as `padding` before an element._
* number (`$n`): The number of Columns for the Prefixed `padding` to span.
* context (`$c`): The context, if other-than-root. Default: `false`.
* `suffix(number [, context, from-direction])`
* _Add columns of empty space as padding after an element._
* number (`$n`): The number of Columns for the Suffixed `padding` to span.
* context (`$c`): The context, if other-than-root. Default: `false`.
* `pad([prefix-number, suffix-number, context, from-direction])`
* _Shortcut for adding both Prefix and Suffix `padding`._
* prefix-number (`$p`): The number of columns for the Prefixed `padding` to span.
* suffix-number (`$s`): The number of columns for the Suffixed `padding` to span.
* context (`$c`): The context, if other-than-root. Default: `false`.
* `susy-grid-background()`
* _Apply to your Container in order to see the Susy Grid as a background-image. This is only meant as a debugging tool._
Functions
---------
Where a mixin returns property/value pairs, functions return simple values that you can put where you want. Don't like Prefix and Suffix applied to `padding`? Add some Columns to your `margin` instead.
* `columns(number [, context, from-direction])`
* _Identical to `columns` mixin, but returns the math-ready `%` multiplier._
* example: `width: columns(3,6);`
* `gutter([context])`
* _The `%` width of one gutter in any given context._
* context (`$c`): The context, if other-than-root. Default: `false`.
* example: `margin-right: gutter(6) + columns(2,6);`
* `side-gutter([context])`
* _The `%` width of one side gutter in a given context. Context *should* always be root._
* context (`$c`): The context, if other-than-root. Default: `false`.
* example: `margin-right: gutter() + columns(3) + side-gutter();`