Susy 0.9 Reference Documentation

See the official Susy site 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();

mirisuzanne/reference.mkdn