public
Last active

Susy 0.9 Reference Documentation

  • Download Gist
reference.mkdn

Susy Reference

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.