139.365 Coloring outside the Lines by ReillyButler

Sass helps streamline the responsive dev process.

Responsive web design has been a hot topic with web developers ever since Ethan Marcotte introduced the method. It’s a really great way to build one site that is usable across many devices, but it takes a lot of work with math for truly flexible designs, and managing extra css rules for media queries can be a pain.

That was the case until recently. With new CSS box-sizing options and the latest version of Sass, developers can build responsive web sites much easier now, with a combination of a few new tools at our disposal.

Border-box and Sass 3.2

Like any developer, I’ve spent more time than I like to admit working on issues with the css box model. It can be really frustrating to adjust a bunch of container sizes just to change the padding on one element.

The new css rule

box-sizing: border-box

makes our jobs a lot easier. It changes the css box model so that containers don’t expand with padding and border width adjustments. This rule is new to CSS3 and is compatible with Firefox, Chrome, Opera, and IE8+ (with an available polyfill for IE6 and IE7). If you aren’t familiar with the border-box rule, you’ll want to read the articles by Paul Irish and CSS-Tricks on using it. Border-box especially shines when it comes to grids.

Another tool that really helps developers create sites easier and quicker is Sass. Sass is CSS, but much smarter; it adds the ability to use nesting, variables, and reuse snippets of code called mixing. If you haven’t used Sass yet, The Sass Way has a getting started guide. Sass 3.2 introduces even more smart tools especially for use with responsive web design. At this time 3.2 is the ‘bleeding edge’ version, so you’ll need to install it with this line:

gem install sass --pre

A simple Sass layout

Here is an example of responsive design using variables and a few simple equations to do the math for you.

Source

Demo

The example is a typical blog post: we have a large column for the article next to a smaller column for relevant information, a header on top and a footer at the bottom. But rather than choose the widths of the columns directly, we implemented a Sass mixin and some variables for a simple custom grid.

$columns: 12;
$max-page-width: 1200; /* Even though we mean 1200 pixels, we leave out 'px' so that the mixing below can perform calculations on it. */
$column-width: $max-page-width/$columns;
$column-padding: 1rem;

@mixin column($amount, $context: $max-page-width, $padding: $column-padding) {
width: percentage(($column-width * $amount) / $max-page-width);
padding: $padding;
}

Our variables at the top describe the grid; we have 12 columns of 100px each, with 1 relative em of padding. The column mixin lets you choose the amount of columns you want and optional context and padding amounts, then performs the standard target / context = result formula on it.

So that our padding won’t break our grid, add box-sizing to every element:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Now we can assign width to our article, figure, and aside elements:

#content {
    float: left;
    @include column(8);

    figure {
        @include column(5, $padding: 0);
        min-width: 240px;
        margin: 0 0 1rem 1rem;
        float: right;
    }
}
aside {
    float: left;
    @include column(4);
}

Adding Breakpoints

Our page looks good now, at least on large screens. Rather than jump in right away and add a lot of media queries at standard breakpoints, we’re going to put in breakpoints based on our content. In other words, at points where our layout breaks, we’re going to adjust it with a media query based rule.

When we resize the window, it’s clear that around 800px window width, our article text is really getting squeezed by the image. This is a good spot to put in a breakpoint. Try it out for yourself by grabbing the corner of your browser window and shrinking it.

We can use another Sass mixin to make it easy:

@mixin breakpoint($size) {
 @media only screen and (max-width: $size) { @content; }
}

Now we can include the mixin to stack and resize our columns:

#content {
    float: left;
    @include column(8);

    @include breakpoint(770px) {
        clear: left;
        @include column(12);
    }

aside {
    float: left;
    @include column(4);

    @include breakpoint(770px) {
        clear: left;
        @include column(12);
    }
}

We could take it a step further and use variables for the width; The Sass Way goes into more detail on this and other Sass 3.2 features.

More testing by resizing the browser gives us another breakpoint at 600px – we’ll drop the article text below the image here.

    @include breakpoint(600px) {
        min-width: 280px;
        margin: 0 auto;
        float: none;
    }

Now, our site looks good at any browser width. The best part, though, is that using the Sass mixins and variables means that you can adjust the layout quite easily as you build and adjust a site design.

Going Forward

While this is just a simple example, I hope it will help you cut down on the amount of time it takes to build your next responsive site!

Do you build responsive websites? What tools and methods do you use to streamline your work?

4 Comments

  1. Ana on | Reply

    Awesome article!… I am just learning this and, at first, it seemed daunting .. now, it’s just a little *less* daunting. Thanks for the great step by step breakdown. Really helps — Ana

  2. Yah on | Reply

    Thank you!!

  3. mstf on | Reply

    that was amazing! thank you!

  4. punithan on | Reply

    Nice work!

Leave a comment

We'd love to work on your next project

Get in touch