Susy might be my new favorite thing… at least in CSS.
I say "dumb grids" with nothing but love, because in this case "dumb" means "not too magic and easy to grok". Without providing any configuration to Susy you can do this:
.container {
@include container;
/* this is our grid breakpoint, ~ a medium width */
@media (min-width: 50em) {
max-width: 50em;
.half {
@include span(1 of 2);
}
.third {
@include span(1 of 3);
}
.half,
.third {
&.last {
@include last;
}
}
}
/* this is our "desktop" width */
@media (min-width: 65em) {
max-width: 65em;
}
}
So now, without having to define any grid settings, we have basic support for half- and third-width grids inside of containers that snap to fixed widths at breakpoints.
Neat, huh?