Instead of working under a rigid 12 column framework, Susy gives you a tool to create your own grid system. You have the flexibility to roll any kind of grid including fluid, adaptive and fixed layouts with as many or as few columns as you like. Layout settings are all defined within a single variable, giving you the power to quickly access and manage values such as column and gutter widths. This makes your grid so much easier to maintain. Susy will also help you produce builds faster, simply because you don’t have to do any of the maths. Every measurement is calculated and managed for you by Susy’s API. It even supports different kinds of units such as em, px and percentages!

Variables

Generally we prefer to use multiple layouts for different breakpoints. We define them like so:

This defines three different layouts, a default (mobile), medium and large grid. Changing grid settings on the fly becomes simple and makes them extremely flexible. For example, we could change our gutter widths for our $susy-large layout:

This would effect the gutter width for all of our $susy-large grids throughout our stylesheets.

Mixins & Functions

We interact with layouts through the Susy API. There is a lot you can do with the Susy, but for now its best to keep it simple. We frequently use: 

You can find everything you need to learn Susy from interacting with column sizing to complex isolated grids from the documentation.

Drupal Selector Variables

We also use helpful selector variables to quickly target common selectors:

They are very powerful for creating a collapse grid of columns, such a view:

These selector variables allow you to apply the styles with the right specificity while avoiding writing the same code over and over again.

Compile Times

Some of our compile times have become rather long (up to 20 seconds) while trying to compile our stylesheets. When a build gets bigger and bigger, we have to use Susy to create more and more layouts. This snowball effect can cause a large amount of wait time because of the amount of things it has to process. We are hoping that this will dramatically decrease with the integration of Susy & Libsass. Until then, try to optimise your stylesheets with @extend and %placeholders when you can to reduce processing times:

Final Thoughts

Using Susy has definitely saved us a lot of development time for our Drupal builds. We don't have to calculate the width of 3 columns in a 12 column grid any more. We can quickly adapt a grid system for any kind of design without having to any complex maths. If you are not using Susy for your grids or haven’t at least tried it, you are missing out.