The web is a responsive place, from your lithe & lively development process to your end-user's super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.
Susy grids are fluid on the inside, ready to respond at any moment, but contained in the candy shell of your choice, so they respond how and when and where you want them to.
We don't design your site or dictate your markup, we just do the math and get out of your way.
Why is 1.0 a release candidate?
Susy 1.0 is stable, tested, & feature complete; but our launch depends on unreleased Compass and Sass features. We think those features are stable as well, and you should get started with Susy 1.0 RC right now. We'll make sure the final upgrade is as painless as possible.
10-column complex nested grid AG test
ag1 2 of 10
ag2 6 of 10
ag4 3 of 6
ag5 3 of 6 (omega)
ag6 2 of 6
ag7 4 of 6 (omega)
ag8 2 of 4
ag9 2 of 4 (omega)
ag10 auto
ag3 2 of 10 (omega)
// Complex AG grid, brought to you by Susy:
.ag1 { @include span-columns(2,10); }
.ag2 { @include span-columns(6,10); }
.ag3 { @include span-columns(2 omega, 10); }
.ag4 { @include span-columns(3,6); }
.ag5 { @include span-columns(3 omega,6); }
.ag6 { @include span-columns(2,6); }
.ag7 { @include span-columns(4 omega,6); }
.ag8 { @include span-columns(2,4); }
.ag9 { @include span-columns(2 omega,4); }
.ag10 { clear: both; }
Quickly add media-query breakpoints for new layouts with
at-breakpoint,
or create your own custom math
using Susy's full array of
grid helpers.
Build a one-off site in minutes,
or create your own scalable object-oriented grid library
for large projects.
Susy provides the power-tools,
what you build is up to you.
We're just getting warmed up.