Susy is a lightweight grid-layout engine for Sass, designed to simplify and clarify responsive grid layouts without ever getting in your way. Originally released in 2009, Susy has become one of the most popular layout frameworks on the web.
I like the idea of grids-on-demand, rather than a strict framework.
—Chris Coyier, CSS Tricks
My experiments have left me impressed. The current state of CSS layout means that unless you like to spend a lot of time doing calculations something like Susy is really useful. The output CSS is pretty much what I’d come up with myself, which to me is the acid test for tool use.
—Rachel Andrew, Invited Expert to the CSS Working Group
If you’re interested in reading Sass poetry, be sure to look at Susy’s source code!
—Hugo Giraudel, SitePoint
Susy & Zendesk have been getting along magically… It’s precisely what you need and nothing more.
—Stephany Varga, Zendesk Creative Collection
My constant search for a better grid system ended when I discovered Susy. It is very likely that Susy is what you’re looking for as well.
—Zell Liew, Learning Susy
Learning Susy, by Zell Liew
Zell Liew wrote a great book to get you started with Susy. 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