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

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

Recent News

Rapid Prototypes, Built to Scale

Rapid prototypes are only the start to a long process of development, changes, handoffs, and maintanance. 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