Chapter 5. Responsive and Flexible Grids with Sass and Compass

The use of grids for visual layout is a technique that dates back hundreds of years. Pick up any newspaper and you can see a grid at work. Its principal aim is to bring visual harmony to possible discord. A great grid structure can bind columns of type, the media within them, the headings above them, and more. At the risk of being reductive, a grid helps provide some relationship between the component parts of a layout.

Note

Although we will consider Sass and Compass tools for building a grid in this chapter, the fundamentals of creating grids and how to establish relationships between elements is beyond my expertise, so I’d therefore recommend taking a look at this round up of resources at Smashing Magazine: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/.

When tasked with building a website from a graphical composite, it’s possible you’ll be building a grid system without even realizing it. A good...

Arguments against grids

Grids are a divisive topic. As useful as they can be, there are a few common complaints with them. Let’s deal with these first.

Semantic purists argue that writing markup laden with HTML classes such as column_8 and column_4 is tantamount to a cardinal sin. Let’s squash this issue right away; using Sass and Compass based grids requires zero amendments to the markup.

Another common objection is that starting a design with a grid system stifles creativity, imposing an artificial construct before more critical design decisions have (or should have) been made. If that is a sentiment you agree with, I would offer this olive branch; when using Sass and Compass the grid system need not be pre-defined or pre-prescribed.

What we will be working with is a truly flexible grid system that can be implemented at any time during the design and build of a website. Make the design however you want, then use Sass and Compass to build out that design with relative ease. Have as many columns...

Reasons to use a grid system

The main reason Sass and Compass based grid systems are great to work with is that they handle all the complex mathematics. Hands up who enjoys working out the percentage calculations necessary for layouts? I know I can live without that and a Sass and Compass based grid system allows us to deal with layouts in a less academic manner. They do this by using mixin names that abstract some of the complexities of widths into simpler terms. But we are perhaps getting ahead of ourselves. Let me first tell you a little about the first Sass and Compass based grid system I fell in love with.

What is Susy?

There are a number of Sass and Compass grid systems available. Everyone has their favorite and mine is Susy. It’s simple to use, produces clean code and is extremely flexible and well documented. See the boxout section for information on some others but understand that for this chapter we will chiefly be working with Susy (because it’s been scientifically tested to be 99.99% amazing*).

Susy was principally created by Eric A. Meyer (not to be confused with the ‘CSS reset’ Eric A. Meyer), a core member of the Compass team.

I mention this for two reasons, firstly, by way of a hat tip to him and secondly, to let you know that you are in safe hands. Susy works beautifully with Sass and Compass projects and I find it the easiest way to build responsive grids.

Note

There are plenty of other grid systems for Sass and Compass we won’t be looking at. If Susy doesn’t do it for you (seriously, what is wrong with you?), consider looking at Zen Grids (http://zengrids.com) or the one that comes...

Installing the Susy Compass plugin

As some GUI Sass compiler tools include Susy and some don’t, we will err on the side of caution and install Susy from the command line. Susy is another plugin and like the other Sass and Compass based goodies we have dealt with, they are available as gems that we can install from the command line.

Open up your command-line tool (‘Command Prompt with Ruby’ on Windows, ‘Terminal’ or ‘iTerm’ on OS X) and enter the following command:

gem install susy

Remember if you are running OS X you may need to prefix the command with sudo:

sudo gem install susy

Enter your usual desktop password if prompted and press Enter.

Tip

Remember the command line won’t give you any visual indication that the password is being input, you’ll likely just see the cursor blinking in the same position.

You should see a response like this once installed:

Fetching: susy-1.0.7.gem (100%)

Successfully installed susy-1.0.7

1 gem installed

Well done, you just installed another Ruby gem; you are...

Including Susy in a project

Back in Chapter 2, Setting up a Sass and Compass project, we looked at how the config.rb file allows us to specify any required plugins. We need to ensure that our project ‘knows’ that we require Susy. Open the config.rb file and enter the following line at the top (if it is not there already):

require “susy”

Tip

You can also create a blank project with Susy using the following command (where project-name is the name of the project you wish to create):

compass create project-name -r susy -u susy

This will create a Compass-based project including files such as a _base.scss partial that already contains the required variables and imports them to get started with a Susy layout.

Now our project knows we need Susy, we need to actually include it in our project.

Susy project variables

Susy uses a number of variables to define the settings of a grid. When creating a Susy project from scratch (see the previous tip), Susy places these variables in the _base.scss file. However...

Setting up a Susy grid

When setting up a Susy grid, the first thing we will do is include all the necessary Susy-specific variables for the grid. Let’s add the following at the top of the _layout.scss partial:

@import “susy”;
$total-columns  : 12;             // a 12-column grid
$column-width   : 5em;            // each column is 5em wide
$gutter-width   : 1em;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters

First, we are importing Susy using the @import directive and then defining some settings for a grid as values next to the various Susy variables. Let’s look at each of these:

• $total-columns: This is the number of columns we want our grid to have. Here we are using a 12-column grid but it can be any number of columns you like.

• $column-width: This is the width of each column in the grid. We are using em as a unit of measurement here but it could be defined as pixels if you would rather; Susy won’t mind.

• $gutter-width: Defines the...

Defining a context for the grid

At this point, nothing has changed. We have just imported Susy and defined the settings but we are not actually using it. To use it, we need to set one or more elements as a container element (the ‘context’ for grid columns).

Note

The importance of context

Context is an important concept to grasp when working with Susy. The context is simply the containing element for grid items. Perhaps more importantly, the number of columns that the containing element spans. For the most part, in our example we are dealing with a 12-column grid and no nesting, so the context is usually 12. However, if things start going screwy when working with grid elements, ensure you’re not inadvertently nesting a grid item within a new context. For example, if an element within a grid is also set as a container it becomes the context for any elements nested within it.

Let’s therefore amend the first section of the existing layout rules to this:

[class^=”inner”] {
  @include container...

Making a ‘mobile first’ responsive grid

When building up a responsive design, the initial layout I think about is what I consider the ‘accessibility’ layout. The idea of this is that no matter the device or capability (crucially, whether or not JavaScript is supported on the device) this layout should work and provide access to the content. It doesn’t need to be the ‘optimum’ visual layout. For example, the chapter lists will need scrolling past before each page’s main content, but it will still be accessible.

Having looked at the design, perhaps we can get away with just three visual breakpoints for the design structure (a ‘breakpoint’ merely being a term used to specify where the layout should change based upon available space in the viewport).

Tip

Viewport is a term used to describe (and distinguish) the viewable size of a browser window from the size of the device screen itself. On a smartphone, the size of the viewport is typically the same as the device window (sans interface ‘chrome...

Making breakpoints with Susy

With Susy you can have as many breakpoints as you need. However, rather than try and remember the various widths for the breakpoints in ems or pixels, let’s make a couple of variables, one called $M (for medium-sized viewport widths) and the other called $L for larger ones. We’ll add these in the _layouts.scss partial below the other Susy settings:

// Breakpoint variables
// ====================================================================
$M: 47em; // roughly speaking, around 750px wide with 16px body font
$L: 75em; // roughly speaking, around 1200px wide with 16px body font

Remember that our first layout will actually be the absence of media queries: that’s our ‘accessibility’ layout. With these two variables we can therefore ultimately facilitate three layouts, the initial accessibility layout (where no media query is used), a layout at a breakpoint of 47em (around 750px wide assuming a 16px body font) and a layout at a breakpoint of 75em (around 1200px...

Creating an entirely fluid grid

While Susy creates an elastic grid (that flexes to a point and then become fixed) by default, it can easily convert a grid to be fully fluid (in which it completely and proportionally fills all the available space). This can be achieved by adding this variable below the existing grid settings:

$container-style: fluid;

And here is how that looks in the browser:

Tip

Be aware you can also set a percentage width for a fluid grid container with the following variable:

$container-width: 80%;

Creating a static ‘fixed’ grid

Susy is of most help when creating elastic grids( ) (that flex to a point and then become fixed) and fluid grids (that fluidly fill the entire size of the viewport).

However, there may be instances when you are handed a graphics composite with the remit of creating a fixed version of the grid system in use (http://960.gs, for example).

If you need a static grid system, you can do this easily with Susy; just add a single variable (be aware that you will need to edit, remove, or comment out any existing $container-style variable):

$container-style: static;

If you use that and resize the viewport (make the browser window smaller), you will see that the grid remains entirely static until it hits a relevant breakpoint.

Using Susy grid helpers

Let’s revert to the elastic grid now and comment out those prior variables. Remember that Sass will remove comments on compile so if you would like to leave them in place (for reference), don’t feel bad about it. For clarification, here is the relative section of the _layout.scss partial that defines the grid:

// Grid layout variables (http://susy.oddbird.net/)
// ====================================================================
@import “susy”;
$total-columns  : 12;             // a 12-column grid
$column-width   : 5em;            // each column is 5em wide
$gutter-width   : 1em;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters
$border-box-sizing: true; 

As mentioned, Susy has a few grid helper mixins to solve common layout issues.

Prefix, Suffix, and Pad

prefix, suffix, and pad are all mixins that make adding padding before or after (or both before and after) columns simple.

Prefix

We’ve already used the...

Pre, Post, Squish, Push, and Pull

Just like the padding helpers, Susy has helper mixins to more easily administer margins within a grid. They work in a very similar manner. The helpers are called pre, post, squish, push, and pull.

Pre

The pre mixin applies margin before an element. For example, to add a column’s worth of margin before an element, you would add this mixin:

@include pre(1);

Be aware that if you add margin to an element with pre, you may need to adjust the amount of columns with the span-columns mixin. Therefore, to adjust the main content to give the same visual effect with pre instead of prefix or pad, we could write this:

.main-content {
  @include pre(1);
  @include span-columns(8 omega, 12);
}

To clarify for the people at the back not paying attention, there are 9 columns available after the chapters section; we want 1 to be used for margin and the other 8 for the content (and as the content takes up the final column we’re passing the omega argument).

Post

The post mixin does...

Grids within grids

As already mentioned, Susy makes it easy to create grids within grids. Let’s use this feature to space out the section of links beneath the block quote (the links to Amazon and Barnes and Noble bookstores).

We’ll separate the styles that will affect this area across two partials. We only want the _layout.scss partial to contain structural layout so we can add the Susy-related rules there:

// Grid override for purchase links
 @include with-grid-settings(4,12em,1.5em,0) {
  .purchase-links-wrapper {
    @include container;
  }
  .purchase-link {
    @include span-columns(1);
    @include nth-omega(4n);
  }
};

There are a few things going on here, so let’s break that chunk of code down. First of all, we are including the with-grid-settings mixin:

@include with-grid-settings(4,8em,1.5em,0) {

This lets us create a new grid, with different settings, within an existing grid. The syntax of the with-grid-settings mixin is: number of columns (4 columns in the preceding example), the...

Sub-pixel rounding issues

I have a confession; I’ve been keeping something from you. Take a look at the following screenshot and if you are the kind of designer that freaks out when there is a pixel astray, please make sure you’re sitting down.

Can you see an odd-sized gap before the final red grid item? The screenshot is taken in Safari 6. This same problem isn’t apparent in Chrome or Firefox. That’s because Safari rounds down sub-pixels. Why?

Although the outer dimensions of the grid (the context) may be set as ems, all the column widths within the grid are defined as percentages. That’s a large part of what enables the grid to be responsive to different viewports.

To actually paint the page, browsers convert percentage values into pixels. Parts of pixels cannot be rendered so they are rounded. The problem is that some browsers round up, some don’t, and some do something else. Most of the time this isn’t an issue. In some browsers, in some instances it is, typically when there are multiple...

Summary

We’ve covered a lot in this chapter. We have installed the Susy grid system, included it in our project, and then implemented it to create a grid-based layout that responds to different viewport sizes. If we were always using Susy, we could use the at-breakpoint mixin to create media queries, changing the layout structure or appearance of certain elements when needed.

However, there will likely be situations when a grid system isn’t needed. Therefore, we need some independent way of easily creating responsive styles. In the next chapter, we will learn how to create our own media query mixin, giving us the power to easily change styles for any element inline.

In today’s responsive design world, it is one of the Sass and Compass features I find most compelling.