Susy is a powerful set of Sass mixins for building grid-based layouts.
What’s so great about Susy? We’ll show you the basics of working with Susy in this tutorial, but here’s a list of pros to consider:
- Anti-framework: Susy doesn’t impose any specific grid philosophy on you. Thus, you won’t be dropping in a CSS file and using classes out of the box (as you would with a Framework such as Bootstrap); instead, you’ll be defining your own grid rules, letting Susy take care of the calculations for you.
- Mixin-oriented, no-bloat: Susy isn’t a framework. It doesn’t have a kilobyte count, because it doesn’t output any CSS rules you don’t manually define yourself.
- Powerful configuration, sensible defaults: Susy uses configuration rules during its build process, but it doesn’t require that you learn everything to get started.
These three simple pros are more than enough to warrant giving Susy a look. Let’s get started!
Set up
First, you’ll need to be familiar enough with Sass to write and compile it. At the time of this writing, Susy implements some Sass features which are not currently supported by LibSass (the C-based Sass compiler) so you’ll need to utilize the Ruby version of Sass. Start by installing Sass and learn how to use the watch command, which will be essential to working with Sass in general, as well as Susy.
Next, you’ll need to get Susy installed on your computer. Because Susy’s only dependency is Sass itself, you can download the project’s zip file from GitHub and copy the contents of the Sass folder into your project.
Next, you’ll need to import Susy into your Sass file.
@import "susy";
This assumes you are in a directory with the contents of the Sass folder.
Hello Columns: First Example
Susy is fundamentally a set of mixins, which are like functions in Sass. These mixins are called inside your Sass code, and when the Sass compiler runs, it will look at the mixin definitions in the Susy files and determine the proper output.
The most important mixin in Susy is the span mixin, which looks like this:
.content {
@include span(20%);
}The span mixin also relies on the container mixin, which sets up what Susy calls a “layout context”.
.container {
@include container(1180px);
}Susy also allows you to create spans based on a preset number of columns in a gridset:
.quarter {
@include span(4 of 12);
}Susy’s power goes far beyond the average grid, allowing for less than normal grid configurations. Let’s start with a simple example: a 9-column layout.
.ninth {
@include span(1 of 9);
}Sass Maps
Susy allows you to set up configuration via the $susy variable. Creating a Sass map allows you to determine a number of preferences about how Susy works to lay out your spans. Susy implements a layout mixin that outputs a configuration map. Here are the default settings, taken directly from Susy’s documentation.
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 4,
gutters: .25,
column-width: false,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);You can override any specific setting by adding it to your own $susy map:
$susy: (
columns: 16,
last-flow: from
)Commonly changed options are the column count, the gutter width, and the output option. Each of these configuration options does something different.
Practical Examples
For the sake of this tutorial, we won’t go through all the configuration options (Susy’s documentation does a great job of explaining them). Instead, let’s go through a few practical examples of how you might use Susy.
Span and Container Mixins
Here, we can see a basic use of the span and container mixins:
Note: in order to appreciate the columns at full width, take a look at the full screen version.
There are a few things to notice with this example. We’ve created a contrived example of a dashboard. We’ve also included a small bit of JavaScript that fetches fake user images from the uifaces.com API.
The Susy-specific pieces are the columns. In this example, we’ve created a responsive layout utilizing the @include span() syntax. We’re also using SCSS’s nesting capabilities in a few spots. Note that Susy fits in fine with your normal media query syntax. We’ve created a container out of the .stats section using @include container;.
It should also be noted that there are nested columns in this particular example; the .avatar elements are nested inside another Susy column, and this works perfectly fine because Susy uses fluid widths by default.
Layout Shorthand
Next, we can see a usage of Susy’s shorthand for layout with a grid that has larger columns in the middle than on the outside.
In this example, we’re using a few different options which should look new to you. First, we’re creating our markup using Haml. Haml is a whitespace-sensitive markup replacement for HTML built on top of Ruby. Think of it as being a bit like a preprocessor for HTML.
Let’s look at what our example creates.
.brick-list
This creates a <div> element by default, and gives it a class of brick-list.
- 30.times do |i|
This indented line repeats whatever is nested inside of the same indention 30 times. This means that whatever is outputted will be inside of the div we created above with .brick-list. The |i| portion passes in the current index, which is the count of the loop, starting at 0. So, for instance, on our fifth time through the loop, i would be equal to 4.
.col
%img{src: "http://hhhhold.com/jpeg/700?v=#{i}"}We see this inside of our 30.times loop. The .col creates a div with a class of col. The %img{...} creates an <img> element, and the attributes in the curly braces are passed into that image. We’re using hhhhold.com for our placeholder images. The syntax here is the Ruby hash syntax, which is in many ways very similar to JSON.
Another important part of these lines is the #{}, which allows you to print out the i index variable (this is called interpolation, if you’d like to learn more Hugo Giraudel explains all you need to know). We use this variable in the URL as a parameter so that the images we load aren’t all the same.
The Susy grid is unique in this example; we setup a grid variable with the line:
$grid: (1 2 5 5 2 1);
This variable will be passed to Susy in our span mixin calls and reads create a grid with six columns; the first column should be of relative width of 1, the second column of relative width of 2, the third column of relative width of 5, etc.
We then utilize this grid throughout the example, placing our .col divs at the 1st, 3rd, and 5th column starting positions and spanning 2 columns using the nth-child CSS rule. If we were to modify this same grid to have each column with the same relative column width, it would look like this.
Here’s the same example, with a different asymmetrical layout.
As you can see, non-conventional grids are straight-forward to accomplish, and Susy makes powerful grid control a pleasurable task.
Conclusion
Susy provides a more flexible and less opinionated way of creating your own grid layouts without forcing you to adopt a predetermined set of CSS. Owing to that that flexibility, Susy can quickly be learned and brought into a project without having to fully commit to using it in every single CSS declaration you create.
Whether you determine Susy is right for you or not, as a front-end developer you should at least be aware of all the pre-processing tools available to you. They are becoming a key toolset for modern developers.