Skip to content
This repository

Responsive layout toolkit for Sass

Fetching latest commit…


Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 sass
Octocat-spinner-32 templates
Octocat-spinner-32 .gitignore
Octocat-spinner-32 CHANGELOG.mkdn
Octocat-spinner-32 LICENSE.txt
Octocat-spinner-32 Manifest
Octocat-spinner-32 README.mkdn
Octocat-spinner-32 REFERENCE.mkdn
Octocat-spinner-32 Rakefile
Octocat-spinner-32 VERSION
Octocat-spinner-32 susy.gemspec

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" - 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 span-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 span-columns(3); }

  #content { 
    @include span-columns(9 omega);

    #main { @include span-columns(6,9); }
    aside { @include span-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); }
Something went wrong with that request. Please try again.