Grids are an important tool for design, but creating grids in CSS has never been straightforward. Lots of frameworks and tools exist to help us create responsive layouts more quickly and easily, but one that stands out to me is Susy, a Sass-based framework that allows you to create fixed-width or percentage-based grids with relatively little code.
Unlike many other CSS frameworks, Susy is implemented entirely in your Sass files and doesn’t touch your HTML. Put simply, it’s a library of mixins for you to call upon at will to define your layout – and you can use it as much or as little as you like. Susy’s
span mixin is really all you need to start with, but there’s a whole range of other features that could also come in useful if you feel like exploring further.
As a designer, I find Susy really speeds up my workflow when prototyping, but there’s no reason why it can’t be used in production code too. As the outputted CSS really only consists of only well-supported properties (floats, margins, padding, etc.), so there are no issues with browser support.
Susy has a growing community and good documentation – there are plenty of tutorials out there to help you get started – which is another reason to recommend it. The documentation hints that version 3.0 could support flexbox and / or Grid Layout, which would make it an even more powerful tool.
If this piques your interest, you might want to read an article I wrote for Smashing Magazine recently: Smarter Grids with Sass and Susy.