Understanding RWD Breakpoints

and then doing them in Susy

I had a hard time figuring out how to setup a responsive layout with breakpoints using Susy, so I figured I’d share what I’ve figured out so far.

When we want to make a mobile-first, responsive layout, we need to be able to react to the width of the screen getting too big for our default layout.

The best practice currently is to come up with a certain width that your layout seems to break, and to set a break point there.

A break point is the point at which the width of the user’s screen will cause your layout to change. For example, your default narrow layout might have two sections stacked on top of each other, but if a user views your site at a width of say, 700 pixels, the two sections will be side-by-side instead. At 700 pixels, you have a break point.

In plain ‘ol CSS, you would implement your break point using a media query, but using SASS, Compass, and Susy we can do better.

Using Susy in a Compass project, we would likely have a default layout setup like this:(fyi, I’m using .scss syntax)

// grid defaults
$total-columns: 5;
$column-width: 6em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
.page {
//a mixin to let me see the grid
@include susy-grid-background;
// setup the containing element
@include container;
     .one,.two {
@include pre(1);
@include span-columns(3 omega);
@include post(1);
}
}

That gives me a layout that looks like this:

Some content in the middle, a column on each side.

So let’s say that at 700 pixels wide, that the layout starts to look too wide and we want the two boxes to be side-by-side.

First, we’ll define a break point in a SASS variable, like this:

$wide: 700px 5;

This tells SASS that at 700 pixels, we want to have a break point and to have 5 columns in our layout. We can change the number of columns at our break points, but for this example we don’t need to.

We can use this break point variable inline with the rest of the sass. We do that by using the at-breakpoint mixin.

What I want to do is to use the at-breakpoint mixin to tell SASS that at the $wide breakpoint, that .one and .two should no longer have a pre(1) and should span two columns each, side-by-side.

I can do that like this:

// grid defaults
$total-columns: 5;
$column-width: 6em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
// breakpoints
$wide: 700px 5;
.page {
//a mixin to let me see the grid
@include susy-grid-background;
// setup the containing element
@include container;
    .one,.two {
@include pre(1);
@include span-columns(3 omega);
@include post(1);
@include at-breakpoint($wide) {
//remove column width margin-left
@include pre(0);
//remove omega, we get side-by-side
@include span-columns(2);
}

}
}

This, at 700 pixels, gives a layout that looks like this:

Two columns wide each, with one column to the right.

We can have as many break points in our layouts as we need to. It just depends on what your app’s needs are.

I hope this has helped in your understanding of susy breakpoints and RWD breakpoints in general. Like I said, I’m still figuring this out myself, but anyway, thanks for reading!