Preface

I’m going to be making assumptions that you know the following concepts: Responsive design, and Grid based layout. If you do not have a good grasp on these concepts you may want to do some research before diving in to this exercise.

@mixin susy-grid-background is the override mixin I created to show my horizontal lines.

@include establish-baseline sets the body’s line height to what ever you set $base-line-height to above.

.grid is an extendable class you can use if you need to see the grid visibly while your developing ill get into this a bit later.

section.content is out main content container for our application and calling the @include container mixin will apply the susy grid scoped to that container so you can actually have multiple grids on a page but I do not recommend this.

Understanding the helper functions and mixins

Susy

Sadly, this is the part that really confused me for awhile susy’s documentation of the mixins and functions it provides are a bit lackluster the tutorial as some information but not much. There is a gist that describes them but it was never published on the susy website. Most of the content here is copied from that gist for easy reference.

Terms

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.

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.

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

Vertical Rhythm

A complete list of compass’s vertical rhythm functions and mixins are located on the typography documentation page. I will cover the most used ones here so you don’t have to keep fliping back and forth

Terms

Rhythm: An imaginary unit that defines the Vertical Rhythm

leader: A vertical spacing that comes before the selected text either a top margin or padding

trailer: A vertical spacing that comes after the selected text either a bottom margin or padding

Mixins

establish-baseline([$font-size])

Establishes a font baseline for the entire document

This returns an html style and an html>body style so it must be called at the root of your style sheet.

adjust-font-size-to($to-size [, $lines, $from-size])

Adjust a block to have a different font size and leading to maintain the rhythm.

$lines is a number that is how many times the baseline rhythm this font size should use up. Does not have to be an integer, but it defaults to the smallest integer that is large enough to fit the font.

Use $from_size to adjust from a non-base font-size.

leader($lines [, $font-size, $property])

Apply leading whitespace as margin

$lines is a number that is how many times the baseline rhythm leader size should use up.

$font-size defaults to $base-font-size

$property either margin or padding

trailer($lines [, $font-size, $property])

Apply trailing whitespace as margin

$lines is a number that is how many times the baseline rhythm this trailer should use up.

$font-size defaults to $base-font-size

$property either margin or padding

Functions

rhythm($lines [, $font-size])

Calculate rhythm units

returns a raw unit of measurement suitable for math operations.

Basic layout

So what is going on in this image first lets look at the style sheet (Note: this isn’t the full style sheet only an example)

By default compass sprites are put in to the app/assets/images directory which is copied to public/assets on precompile/deploy. By moving the files to their own sprite folder only the generated images get moved in to public/assets when deploying to production which should save some file space.

Instructions

First create the directory app/assets/sprites

Then create the initializer below in config/initilaizers/sprite_load_path.rb: