Power tools for the web

Your markup, your design, your opinions | our math.

In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?

In The Wild

Sass Virgin America Square Market Esquire UK Python Media Molecule Simple Smithsonian

See more sites using Susy, or add your own »

I like the idea of grids-on-demand, rather than a strict framework.
— Chris Coyier, CodePen

Susy and Zendesk have been getting along magically... It’s precisely what you need and nothing more.
— Stephany Varga, Zendesk Creative Collection

If you’re interested in reading Sass poetry, be sure to look at Susy’s source code!
— Hugo Giraudel, SitePoint

Rapid Prototypes, Built to Scale

Rapid prototypes are only the start to a long process of development, changes, handoffs, and maintenance. Susy is built to evolve with your project for the long haul.

Get started quickly with the flexible span mixin:

nav { @include span(25%); }
main { @include span(75%); }

Then stick around for fully customizable grids:

$susy: (
  columns: 12,
  gutter-position: inside,
  math: fluid,
  output: float,
  flow: rtl,
);

And take complete control of the math when you need it:

nav {
  float: left;
  width: span(3);
  margin-right: gutter();
}

main {
  @include span(isolate 9 at 4 no-gutters);
}

Better Together

Responsive Design — Susy integrates smoothly with Breakpoint for powerful media-query controls. See the documentation for details.

Vertical Rhythms — If you’re using the Compass, we add support for $rem-with-px-fallback, and show your baseline grids for debugging.

Package Managers — We love Compass and highly recommend it, but you can use Susy 2 anywhere Sass is compiled. Try it with Bundler, Bower, Yeoman, Bourbon, or copied directly into your project. Then check out Sache.in for more great Sass extensions.

Community Effort — Susy was originaly based on Natalie Downe’s CSS Systems, but has grown much more powerful and flexible than any one system. For Susy 2 we joined forces with Salsa, and borrowed back from Singularity, Zen Grids, and elsewhere. We’d love to hear your ideas as well.

Read the Book!

Zell Liew wrote a great book to get you started with Susy. You can even Get the first five chapters for free! Here are some of the things that you’ll learn:

How to use the Span Mixin
How to output the Background Grid
How to configure the Global Settings to your needs
How to do mobile-first responsive coding with Susy and Breakpoint
How different gutter-positions affect your layout
How to build asymmetric layouts without breaking a sweat
How to use the isolation to prevent subpixel rounding errors

Susy