Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

96 lines (93 sloc) 3.328 kb

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.

Version 1.0.rc.4

gem install susy --pre

Version 0.9 (deprecated)

gem install compass-susy-plugin

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)

:::scss
// 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 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.

Jump to Line
Something went wrong with that request. Please try again.