Susy 0.9 Reference Documentation

reference.mkdn

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();

perfect

+1

New link to 1.0 documentation: https://github.com/ericam/susy/blob/master/REFERENCE.mkdn