Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 68 lines (65 sloc) 2.472 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.

We don't design your site or dictate your markup, we just do the math and get out of your way.

gem install susy

Changes & upgrade instructions »

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.

Something went wrong with that request. Please try again.