What I love about Susy (responsive grids)

Susy grid system

Responsive grids are everywhere in mobile first design. They make layout “semantic” and easier than otherwise. But most of them are a bit bulky and unwieldy and don’t really separate style (CSS) from form (HTML) as much as I’d like.

But Susy goes one step further than other grid systems, and lets you do all your responsive grids within CSS. And well, that means I don’t have to go into the HTML each time I want to change the layout.

And that means my html is very straight forward html, without weird “col12” or “row” classes.

The easiest way to see how it works is to look at the CSS(Sass).

The defaults for Susy are:

$susy: (
flow: ltr, //reading direction, left to right or right to left
math: fluid, //use fluid percentages or static units (ems, px, etc)
output: float, // the system to declare the grid, float or isolate
container: auto, //set the max width of the container or not
container-position: center, //left, right or center, where do you want it?
columns: 4, //how many columns do you want to use?
gutters: .25, //a ratio to column width
column-width: false, //set a static width
gutter-position: after, //where to put a gutter, before, after, split, inside, inside-static
global-box-sizing: content-box, //I like to change this to border-box
last-flow: to, //how to render the last column
);

And here is a sample of how I implement it…


.layout{
@include container; // this tells susy what to consider your container(s)
}
//medium breakpoint
@include susy-breakpoint ($medium){
//head columns
.headprimary{
@include span(9 of 9); //this becomes the first row
}
.headsecondary{
@include span(6 of 9); //the first part of the second row
}
.headsearch{
@include span(last 3 of 9);// the second part of the second row, not that it starts with "last", this tells the system to float it from the right instead of left, this apparently helps it to be pixel perfect as rounding errors can occur if you switch the last-flow to from, and drop the last here.
}
//body columns
.primary{
@include span(6 of 9);
}
.secondary{
@include span(last 3 of 9);
}
}

Yup, that’s pretty simple to implement… really simple actually. No need to add “rows” like a table. You just use the float concept of dropping to the next line when the first is full. And though I used pretty explicit classes to style, you could just use something like
.yourContainerName:nthChild(1), .yourContainerName:nthChild(2), etc
to tag onto, no real need to add the classes except for ease of reading.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *