Responsive Web Design Using Compass – Part 1

How to build a responsive grid with compass

I started my career doing Art Direction for print advertising; I learnt how to direct my creative process in many ways and an important factor to be taken into consideration was the media type and size – Magazine, Tabloid, Billboard, all the media sizes were fixed and I knew exactly the canvas size.

After migrating to the online environment a lot has changed but I was still designing for fixed width (800, 960, 1024…); Those days seem to be gone for good.

We can not assume that our audience is reading our content on a desktop anymore. The content is been squished or stretched creating different reading experiences across tablets, mobile phones and laptops of  varied screen sizes and resolutions.

Comparison between MOST known video resolutions including relevant aspect ratio lines.

Responsive Design is the answer

Responsive Design has been crafted by Ethan Marcotte, a Designer/Developer form Cambridge, Massachusetts. He is the author of the book Responsive Web-Design that has inspired me to do this experiment.

Responsive design is the combination of:

  1. Flexible Grid Layout
  2. Flexible Content – Images and Media
  3. CSS Media Queries

The use of these three elements together makes it possible for us to create websites that respond to the device or browser window size, adjusting the content accordingly in order to offer a better reading experience, should you be hunching over a mobile phone on a busy train or comfortably sitting in front of a 30″ LCD shopping for dog food.

Our Experiment

This experiment’s objective is to build a Responsive Grid using Compass to do build the grid and compile our stylesheet. In doing so, we will split this study in two parts, first I will talk about Compass and in the second part, I will explain how to achieve a responsive page using Compass and Susy Grid.

What is Compass?

Compass is an open-source CSS Framework created by Chris Eppstein that uses Sass to make it possible for us to use nested rules, variables, mixins, includes and much more. Compass brings loads of helpers and utilities that makes writing CSS feels like a holiday, no joke.

Let’s see an example:

You write:

div.mybox
  +border-radius(4px)
    a
      +replace-text("btn.jpg",50px,30px)

Compass writes for you:

div.mybox {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

div.mybox a {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url('../images/btn.jpg');
  background-repeat: no-repeat;
  background-position: 50px 30px;
}

I have just written 4 lines and Sass/Compass have written 16 lines of valid CSS code. Isn’t it amazing?

Installation

If you are on a Mac, the installation is pretty straight forward. Open your Terminal and type:

$ sudo gem install compass

Then, to confirm the installation:

$ compass version

It’s been successfully installed if you read:

Compass 0.11.3 (Antares)
Copyright (c) 2008-2011 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

If you are using windows, you need to install Ruby first.

Sass Syntax

For this example, we will be using the indented syntax, simply called Sass. As stated on Sass homepage, “…it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks.” You can try it out online here.

You can also use the SCSS syntax, if you like. I personally find it a bit more complicated, but at the end, both of them are going to be compiled into valid CSS code. It is just a matter of which one you want to go with.

If you are more familiar with the SCSS syntax, you can convert the sass files using the command line.

$ sass-convert screen.sass screen.scss
$ sass-convert _base.sass _base.scss

Susy Compass Plugin

We will also need to install the grid we will be using. It is the first time I am using Susy and it has shown the best fit for this project, as we have the option to not use side gutters and we can use percentage for achieving a flexible grid. I am quite convinced that Susy is, so far, the best grid I have worked with.

To install, you need to go on to your Terminal and type:

$ sudo gem install compass-susy-plugin

Remember to take some time to have a look at the Susy documentation, so you can better understand its usage.

Using Compass

Let’s say you are creating a new project using Susy. All you have to do is to open your terminal and type:

$ compass create project_name -r susy -u susy --syntax sass

Note: if you don’t use –syntax sass, the project will be created using scss syntax by default.

If you find it hard to use, while I was writing this post, I have just found out that there’s a UI for creating projects with compass. Check it out here. I haven’t tested it yet.

Project Structure

Compass will create a folder called project_name, containing:

/config.rb
/sass/_base.sass
/sass/screen.sass
/stylesheets/ screen.css

The files with “_” at the beginning are considered partials. The_base.sass, contains all the imports and the grid parameters that are to be imported at the top of screen.sass file. I also like to put the reset, all the varies, font-face and mixins in the _base.sass as well.

The screen.sass we will have all our page styles followed by our media queries.

The config.rb will contain your project paths and will also have a few other configuration options that come briefly commented. For example, when you finish your project you may want to compile your stylesheet in a minified version, then all you have to do is to use the declaration:

output_style = :compressed

If you are going to use relative paths and you are not using a local web-server, you will need to uncomment the line:

relative_assets = true

Remember to comment it out again when you deploy it to production. See more about the config.rb here.

Your css will be compiled to the /stylesheets/ folder, all you have to do is to import this file into your html file.

To start working, you need to let compass know that you are changing your .sass files. To do that, you have to go to your project directory on Terminal and type:

$ compass watch

From now on, every time you save one of your .sass files, Compass will re-compile the .css file with the changes you have just made. Easy peasy.

Debugging on Compass

If you are not using the compressed output style, your css is organized and commented. If you inspect an element, the comments on the css file will refer you to the line of the .sass declaration that targets this element.

Whenever you save the file, if there’s something wrong, compass will tell you which line and which file you messed up.

If you are new to Sass, pay attention to the indentation. If you don’t use the same indentation or forget the correct spacing, it will not work.

Example:

It is fine to write:

#my_box
  float: left

But, it will not work if you forget the space between the attribute and the value:

#my_box
  float:left

I am just saying that because I have lost a quite a few minutes cursing at the code as I couldn’t see anything wrong.

To be continued…

In the second part of the post, I will elaborate about the flexible grid and post the sample code, so you can have a go and try for yourself.

UPDATED: Second part published. Keep reading it here.

Drop us a comment if you have any problem, we will help as much as we can.

See you soon!

Lyssandro Reis – @Lyssandro