What is Susy and how to use it for web design

Susy is a preprocessor used in Sass to generate grids custom: this is a very useful tool as an alternative to the libraries used as Bootstrap or Foundation.

The latter, however much they may be fast, they are also very limited, because:

  1. These libraries use a single grid which will then be used throughout the project. In the event that you need to exit from the pre-established pattern, you will need to override the classes, or create new ones, going so that you bypass the library selection. Let’s see some of the items in which you are restricted:
    • The width of the gutter (space between columns): in Bootstrap the gutter of 15px, but it will be difficult to always keep the same space in a single project;
    • The gutter can only be ‘% ‘or ‘px’ depending on the chosen library.
    • The number of columns: in general, you use a grid of 12 columns, this number will be however armored, over we can’t go, even using an additional grid of, for example, 5 columns.
  2. Carry around all of the code to go to cover all the possible cases: it is a question of several bytes of code which is used only a part, sometimes minimal.

Why use Susy solves these problems

Using a preprocessor such as Susy , we can overcome these problems.

With Susy, in fact, we have the possibility to define configurations of grids that then we will use in our project: we can define the X column and gutter custom, both in size and in the measurement unit (px, %, rem, etc..). Susy will do all the necessary calculations to be applied to our classes.

The choice to take care only of the calculations is due to a simple reason: we choose whether to use the property float, the flexbox, or other. Susy in addition it also gives you the chance to have a preview of the grid. By enabling this option, the preprocessor will apply an svg image to the container of the columns. For better use of this tool, we make use of the library breakpoints, useful to manage the various media-queries.

How to use Susy

Example 1

Configuration:

What is Susy and how to use it for web design

In this example, we have a classical grid of 12 columns equal, a gutter defined in the px and the preview of the grid. We also have another item: spread and container-spread. Let us analyze to better understand the concept of spreads: the container-spread describes the manner in which the gutter is distributed between the columns, so you can calculate the exact width of the columns themselves. The possibilities are:

  1. narrow: the gutter is distributed between the columns, as a result, the number of the gutter will be less than the number of columns. By doing so the last column will not have the gutter on the side but will be flush with the container.
  2. wide: The gutter is divided in two and applied to the sides of each column, the number of the gutter will be equal to the number of columns.
  3. wider: The gutter is applied to both sides of each column in its original size, we would have a gutter more than the number of columns.

In our case the grid will be used in the following way: Enable the svg guide:

What is Susy and how to use it for web design

We define the behavior of the columns, specifically, you have two columns at 50% with a gutter of 30px between them. By providing that the gutter remains only between the two columns (‘container-spread’: ‘narrow’) we bring to zero the gutter on the second.

What is Susy and how to use it for web design

Let’s see how it generates the css on the columns:

What is Susy and how to use it for web design

As you can see, Susy , we had a big hand in this calculation: let us remember that we used columns with width in percentage and gutter in px.

Example 2

Configuration:

What is Susy and how to use it for web design

This example is very similar to the previous one, the only difference is that we used the property wide of the container-spread. We will use then the padding side 2rem instead of the right margin:

What is Susy and how to use it for web design

Let’s see how it generates the css on the columns:

What is Susy and how to use it for web design

Also in this case Susy has been of great help.

Example 3

Configuration:

What is Susy and how to use it for web design

In this last example, we’ll use a grid, asymmetrical, or use of columns of different size, in particular we want to:

  • the first column of 120px
  • the last column of 12em
  • A central space ideally divided into 4 equal parts.

Let’s see how you can use this configuration in sass:

What is Susy and how to use it for web design

To define the width of the columns we will use this syntax:

  • column 1 ( 120px ) : width: span(1 first);
  • column 2 ( all the remaining space , we occupy all 4 spaces of the same size ) : width: span(4 at 2 );
  • column 3 12em: width: span(1, last );

The compiled css will be:

What is Susy and how to use it for web design

In these examples, we have used the property, css float, but nothing prevents us to apply the same logic to the property flex or inline-block.

In addition to define the grids and to use them, with Susy we can also make specific interventions on the individual columns to create exceptions. Let’s look at an example. In this case, we use a grid with property ‘container-spread’: ‘narrow’ (as in the example 1) so that you can have a gutter between the columns. If we want to, however, get a situation of the type:

  • 1st column: the gutter on the right
  • 2nd column: no gutter
  • 3rd column: it occupies all the available space while remaining attached to the right edge, and the column n° 2

then you’ll need to write the code to sass as follows:

What is Susy and how to use it for web design

As you can see, we have removed the gutter on the second column and apply the properties wide to the third (the width of the column is added to the size of the gutter) so that it occupies the space destined for the gutter of the second column, thus reaching the goal that we had set.

How to invoke the different configurations

All’ inside of a project we can, as said, use different grids. To recall the different configurations where we need, we can use a mixin like the following:

What is Susy and how to use it for web design

And then use it as follows:

What is Susy and how to use it for web design