Responsive design for DIY-developers with Susy

Date: 18/01/2013

Author: Geert Braekmans

These days Twitter Bootstrap seems to be the new hype for front-end work. It’s so popular that it makes you forget there are other frameworks out there. And while there surely is a reason for bootstrap’s popularity, it might not be the best fit for your project. Sometimes you want something more generic, elegant and flexible.

You want to write CSS yourself. You want control over every line of code. You want Susy.

What is Susy?

Susy is a set of Sass and Compass extensions to make responsive design easy for you. It is packaged as a ruby gem, so inclusion in your project means adding a line to your Gemfile!

So it’s another bootstrap? No, it gives you the power to roll your own bootstrap quickly. And that might be a blesing or a curse, depending on your skill, your project and time constraints.

The basics

I assume you already use compass and you are familiar using Sass (or LESS). Susy uses grids to define your layout. And a grid has

Amount of columns. Each column has:
- Width (in px, em, %, …)
- Margin (called gutters in Susy)
Padding

susy grids visualized

Enough talk for now, let’s start coding! We start by creating a simple html file containing the grid.

 1<html>
 2<head>
 3    <link href="stylesheets/style0.css" media="screen, projection" rel="stylesheet" type="text/css" />
 4</head>
 5<body>
 6<div id="container">
 7        <div id="main">
 8                This is main content.
 9        </div>
10        <div id="side">
11                This is side content.
12        </div>
13</div>
14</body>
15</html>

With the following css:

 1#container {
 2  padding: 5px;
 3  background-color: black; }
 4
 5#main {
 6  padding: 5px;
 7  background-color: #F99; }
 8
 9#side {
10  padding: 5px;
11  background-color: #99F; }

What we want to achieve

When viewed on a desktop computer:

The container must be 750px wide, centered on the page
Main content (2/3 of page) is on the left hand side in the container
Side content (1/3 of page) is on the right hand side in the container

When viewed on a tablet or phone:

The container is 300px, also centered.
Main content is visible
Side content is hidden

Using Compass and Sass

Since Susy uses Sass, we need to make sure we get a working Sass environment.

We need to intall Compass
Initialise a new Compass project
Create a .scss file in the sass folder
compile the .scss files with compass

# install compass
$ gem install compass

# initialise the project
$ cd path/to/project
$ compass init

# create the scss file
$ touch sass/style.css.scss

# compile
$ compass compile

Now that Compass and Sass are ready, we are ready to create our first SCSS files.

The mobile layout

We’ll use a mobile-first approach (as documented by susy) and we start off by setting variables to initialise the Susy-grid:

$total-columns: 6;
$column-width: 40px;
$gutter-width: 10px;
$grid-padding: 5px;

// 6 * 40px + 5 * 10px + 2 * 5px = 300px
// $total-columns * $column-width + ($total-columns - 1) * gutter-width + 2 * $grid-padding = container width

#container {
	padding: 5px;
	background-color: black;
}

#main {
	padding: 5px;
	background-color: #F99;
}

#side {
	padding: 5px;
	background-color: #99F;
}

Because we’ve done nothing more than setting some variables, we can’t expect any change in output. We don’t use these variables yet…

Add Susy to your config.rb in compass. If you like an example, here is my config.rb.
Instruct Sass to import the Susy library. We do this by using an @import command. Example: @import “susy”
Use functions in the susy library do define our columns and containers. We do this using @include.
- @include container; sets the current element as the page container
- @include span-columns 2; tells susy to make the element span 2 columns.

Now we’ll add the definitions for our grid. Like this:

$total-columns: 6;
$column-width: 40px;
$gutter-width: 10px;
$grid-padding: 5px;

// 6 * 40px + 5 * 10px + 2 * 5px = 300px
// $total-columns * $column-width + ($total-columns - 1) * gutter-width + 2 * $grid-padding = container width

@import "susy";

$break-desktop: 15;

#container {
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: black;
	@include container;
}

#main {
	background-color: #F99;
	@include span-columns($total-columns);
}

#side {
	padding: 5px;
	background-color: #99F;
	display: none;
}

And you end up with this result. Exactly the mobile layout we had in our mind when designing the website.

The desktop layout

Now we’ll add the responsive mix-ins to make an alternate desktop layout.

add a variable named $desktop-break, which has an amount of columns.
update our container definition to allow for multiple containers
use an at-breakpoint to update our CSS if the user can support the resolution.

And now we end up with this file:

$total-columns: 6;
$column-width: 40px;
$gutter-width: 10px;
$grid-padding: 5px;

// 6 * 40px + 5 * 10px + 2 * 5px = 300px
// $total-columns * $column-width + ($total-columns - 1) * gutter-width + 2 * $grid-padding = container width

@import "susy";

$break-desktop: 15;

#container {
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: black;
	@include container($total-columns, $break-desktop);
}

#main {
	background-color: #F99;
	@include span-columns($total-columns);
}

#side {
	background-color: #99F;
	display: none;
}

@include at-breakpoint($break-desktop) {
	#main {
		@include span-columns($break-desktop - 5, $break-desktop);
	}

	#side {
		@include span-columns(5 omega, $break-desktop);
		display: block;
	}
}

Using these mix-ins we have now created a solution which uses the desktop layout if possible, and otherwise switches to the mobile layout. If you only see the desktop version, try resizing your browser window. You are now ready to start your first responsive design.

Good luck!

Section R

Blog