gem install susy

Your markup. Your design. Our math.

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.

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; }

We're just getting warmed up.

Quickly add media-query breakpoints for new layouts with at-breakpoint, or create your own math using Susy's array of grid helpers. Build a one-off site in minutes, or create your own scalable grid library for large projects.

Susy provides the power-tools, what you build is up to you.