Using Susy Breakpoints

Susy is my favorite grid system, and it’s been that way since I started using Sass (and Compass). My two favorite points on Susy are these:

  1. It’s a grid, period. Not a framework, not a “one tool to rule them all.” It’s a grid.
  2. Susy allows developers to write well-formed, semantic HTML that isn’t cluttered with “span-10″ and “push-2″ classes. On large sites with complex layouts, it is really nice to have HTML you can just read and be able to see the document’s structure right away.
  3. Responsive development is pretty easy with this grid

One stumbling block I had in the beginning was figuring out how to use Susy breakpoints. This is actually super easy to do.

First of all, you’ll want to install Susy. I’m assuming that you have Compass, and therefore also Ruby, installed. If not, take a look at the RVM installation guide and the Compass documentation. Another assumption is that you’re on a Mac or Linux machine. If not, I hear Cygwin is a nice tool to use.

Now open your terminal and enter the command to install Susy as a Ruby gem:

gem install susy

Once it’s installed, make sure it works by entering:

gem list

If you see Susy in your list of Ruby gems, you’re good to go.

Now to start a new project, CD into the directory where you want to start your new Susy project and type this:

compass create your_project_name -r susy -u susy

In case you’re not yet familiar with how Compass works, the “your_project_name” will become the directory Compass creates to store your Sass and CSS files. I highly suggest also making this the directory where you will put the rest of your site files. Think of the entire site as part of the Compass project.

Now view the project directory in your editor of choice. Open up the _base.scss file in your Sass directory and take a look. Susy is already imported and has some presets. These presets assume you’re working on a desktop layout, or at the very least a desktop-first one. That’s not gonna work for us, so change it to match this:

$total-columns : 4;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;

Going mobile-first, we’re starting out with four columns. This is fine for a narrow screen. Columns will be 4 ems wide, which isn’t going to change. The difference is that as the screen gets larger, we will add columns at our breakpoints.

Speaking of which, here’s the breakpoints I currently use:

$tablet : 52em 10;
$desktop : 68em 16;

These variables aren’t in the _base.scss file out of the box, so go ahead and add them. Technically, Susy does not even need these, and the naming convention is just one I decided to use. It’s better to set this up in one place now, though. As for the widths and column numbers, feel free to use the example I gave (they’re from a real project) or change them to suit your needs.

View your screen.scss file next. It’s importing _base.scss, so that’s all set. Susy also got you started with this:

.container {
@include container;
@include susy-grid-background;
}

This is the “container” class for your site. Its width is the sum of the widths of each column times the number of columns being shown, plus the column gutters and padding on each side of the grid. The “susy-grid-background” bit is nice, because it will display a light blue grid background wherever it is applied, making debugging a little easier. By the way, you can also rename that “container” class to something else.

To see the grid so far in action, create a web page inside your project directory and create a section or a div with the “container” class. Be sure to put some dummy text inside the element. Now open the page in your browser and take a look. You’ll see the grid in the background, but even on a large screen, there’s only four columns. Time to fix that.

Here is the syntax for a Susy breakpoint:

@include at-breakpoint(52em 10) {
// styles for this element at this breakpoint go in here
}

The above mixin “at-breakpoint” takes two variables as its arguments, first the width (I use ems, but any unit will work) and then the number of columns. Remember the “$tablet” and “$desktop” variables from before? Now’s the time to use them. The final product looks like this:

.container {
@include container;
@include susy-grid-background;

   @include at-breakpoint($tablet) {
@include container;
@include susy-grid-background;
}

   @include at-breakpoint($tablet) {
@include container;
@include susy-grid-background;
}
}

Open up your web page again and try decreasing and increasing the width of the browser. When a breakpoint is hit, the number of columns will change. Cool!

Just to make sure all this makes sense, though, let’s make a two-column layout. In your HTML, create two divs inside your container. Make the mobile layout first, where one div is stacked on the other:

.left {
@include span-columns(4);
}

.right {
@include span-columns(4);
}

This is a good starting point. Now introduce the tablet layout:

.left {
@include span-columns(4);

   @include at-breakpoint($tablet) {
@include span-columns(5);
}
}

.right {
@include span-columns(4);

   @include at-breakpoint($tablet) {
@include span-columns(5 omega);
}
}

The “.right” div gets an “omega” alongside the column number, since it’s the last column in its row. Notice how this is similar to how the container was set up? How to make the desktop layout should now be an easy guess. Go ahead and play with it.

Read more about how to work with Susy by reading the documentation at the official Susy website.

Leave a Reply