Susy Documentation

More Official-sh Documentation

See Eric Meyer’s Github page.

Introduction

Susy is a semantic CSS framework creator entirely native to Compass. Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that will never activate that bloody side-scroll bar. Susy sets your width on the outer element (container), adds a max-width of 100% and builds the rest of your grid in percentages. The philosophy and technique are based on Natalie Downe’s CSS Systems – which introduces difficult math in the service of beautiful structure. With the power of Compass/Sass, Susy will do that math for you.

Features

The Susy framework is relatively new and so far includes mixins for a grid with baseline testing, inline block list, hiding, skiplinks, opacity, border radius, multiple box-model handling, box shadow and column count, plus a few more advanced tricks.

Tutorial

The Oddbird Susy Tutorial

Basic Installation

compass -r susy -f susy

Create a Rails app and add Compass with Susy

rails
cd
haml —rails .
compass -r susy -f susy —rails .

Discussion

Susy Google Group on the Compass Google Group (why not join!)