A responsive grid framework for Compass.
Pull request Compare This branch is 1186 commits behind oddbird:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Susy - Compass Plugin

Susy is a semantic CSS grid system for designers.

Use Susy anywhere. Static sites, Rails sites, Django sites, PHP sites, etc. You name it. Susy just helps you with the grid - without ever touching your markup.

Melts in the mouth

Susy grids are always fluid on the inside, but contained in the candy shell of your choice (fixed/fluid/elastic/magic). That allows them to flex, react, and move as needed.

What's a magic grid? That's Susy's Special Sauce. The magic grid begins as a simple fixed or elastic grid, but becomes fluid when the window is too small to contain it. Based on Natalie Downe's "[CSS Systems] (http://www.slideshare.net/nataliedowne/css-systems-presentation)" - this otherwise math-heavy technique becomes simple with Susy. It's the only grid system I know of that could never exist as a library apart from Sass.


sudo gem install susy
compass create <project name> -r susy -u susy

Grid Basics

(This now refers to the unreleased 1.0 version of Susy.)


Set up your default grid values: total columns, column width, and gutter width.

$total-columns  : 12;             /* a 12-column grid */
$column-width   : 4em;            /* each column is 4em wide */
$gutter-width   : 1em;            /* 1em gutters between columns */
$grid-padding   : $gutter-width;  /* 1em padding on the grid */


The basic grid is composed using two simple mixins:

  • Apply the container mixin to create your initial grid context.
  • Apply the columns mixin to declare the width of an element on the grid.

Use the 'omega' trigger to declare elements that span the final column of their parent element, and pass a 'context' in nested situations. The 'context' for any element is equal to the number of columns spanned by it's parent.

For example:

#page {
  @include container;
  /* If you want padding on the grid, just add it to the container. */

  full-width items like the header don't need any help from Susy:
  header { ... }

  nav { @include columns(3); }

  #content { 
    @include columns(9 omega);

    #main { @include columns(6,9); }
    aside { @include columns(3 omega,9); }

  footer { clear: both; }

Layouts and Breakpoints

The point is to change layouts (number of columns in the grid) at breakpoints. If you supply only a breakpoint, Susy will supply the closest layout. If you supply only a layout, Susy will provide the closest breakpoint.

/* Switch to a 12-column grid when there is room for one. */
@include at-breakpoint(12) { 
  .container { @include container; } 

/* At a min-width of 30em, switch to the nearest fitting layout. */
@include at-breakpoint(30em) { 
  .container { @include container; } 

/* Between the min-width of 30em and the max-width of 60em, 
   use a 10-column layout. Provide a fallback class for IE. */
@include at-breakpoint(30em 10 60em ie) { 
  .container { @include container; } 

/* Create all your container layouts in one go. 
   Each argument accepts min/layout/max/ie, same as at-breakpoint. */
.container { @include container(4,8,12); }