For my project I needed a grid system. I didn’t want to use bootstrap just because it’s heavy and I wouldn’t use a lot of the features in it. While looking at grid systems I stumbled upon Susy, which I thought would work well for my project.
What is Susy?
Susy is very different from most grid systems out there. Most common grid systems consist of a CSS library which contain classes that you add to your HTML mark up. Susy is more of a Sass tool kit which uses sass mixins and maps to allow the developer to create their own grid. I talked more about Susy and sass in a prior blog post – found here.
The fundament concept of Susy based on this mathematical equation: target / context = multiplier
Target is your element sizing / how many rows, ems, px a html element takes up and the context is your grid size e.g. 12 columns. Your multiplier is your element size as a percentage.
So this grid toolkit creates fluid layouts. It also has lots of very cool and handy mixin’s (sass functions) which really takes a lot of the time and effect out of using Susy, just declare your sizing in the mixin and Susy works all the math out for you.
What if you want a responsive fluid grid or an static responsive grid? Susy using the new sass map feature. The Sass map feature is a collection of key, value pairs that you can define. Maps main purpose is for settings. Using the $susy() map you can set your grid up how you want It, gutter size and type , column size, float position, math type plus a lot more, (More about Susy settings here )
Susy has built in breakpoint features to allow for easier media queries. Which gives all the goodness of sass variables and sass intuitive formatting with media queries.
Why Susy?
Light weight, Susy is a toolkit for writing your own grid. No heavy JS / CSS libraries
Susy’s smart. It’s very exact with its mathematical CSS outputting. Looking at the CSS of Susy you will see sizing, margins, paddings are calculated to 5 decimal places!
Fast. Once you get past the learning curve you can put together responsive sites with Susy very fast. This is due to the large number of positioning mixing and the highly customizable $susy() map.
Something Different. There are a lot of grid frameworks and library’s: bootstrap, 960grid , pure , responsive, all using the same concept of CSS classes which you attach to your html mark-up.
Conclusion
Susy worked well for me but I unsure how it would suit large site layouts. Due to Susy being the underdog in the grid world not a lot of people have heard of it making it not a good choice for team projects.
Alex's blog 