Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Susy 0.9 Reference Documentation

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment