Sass as a responsive band-aid

Say you’ve been tasked with taking a website built using arbitrary pixel-width definitions and making it responsive. Okay, there are likely loads of questions running through your mind right now. It may seem like a daunting undertaking to retrofit an existing site for mobile devices. With unlimited budget and all the time in the world a proper route would be to meticulously migrate all existing desktop styles into a grid-compliant, neat, organized, and re-factored package. Then we could further refine by diving in and doing some serious performance testing and optimization.

“But… we don’t have time (or budget) for that.”

Making sacrifices

We now have necessary constraints; budget and time. By applying this responsive band-aid, we are not creating a 100% performant, responsive solution. We are giving our users access to our content on smaller devices — which can be just as important.

In this post I’m going to talk about a solution that takes a path of least resistance, and can yield awesome results.

The tools

• Sass
• Compass
• Breakpoint
• Singularity Grid System

The approach

Let those arbitrary widths be themselves

Maybe it’s best to not bite off more than we can chew. Instead of migrating all existing code into a perfect world scenario package, let’s be pragmatic and pick-and-choose what we migrate.

The desktop can still be the desktop

The approach we’re going to take is to leave all existing markup and once agonized-over pixel-perfect layout, completely alone. We’re not going to touch it. Hello worms, you’re not coming out of your can today.

Using the breakpoint-gem we can create a max-width breakpoint in our project configuration file (e.g. _config.scss). For an introduction on Sass/Breakpoint/Singularity please read this post.

This value should be set to the wrapping-most div’s width. For the sake of this post, this width value is 1000px and our website has a wrapping div id of #container.

Set the threshold breakpoint:

$grid-max: 1000px, 'no-query' '.lte-ie8';

In the statement above, in addition to establishing our threshold, we’re also using the no-query fallback option and setting a CSS class for “dumb browsers”. For more information on using no-query fallbacks see this documentation.

Breakpoint in action:

Here we’re implementing our max threshold breakpoint. We wrap all relevant current desktop presentation CSS into the following statement:

#container {
  @include breakpoint($grid-max) { 
    width: 647px;
    min-height: 600px;
    margin-top: 2px;
    padding-bottom: 40px;
    height:100%; 
    margin-bottom:15px;
    overflow:auto;
  }

  // styles applicable at all resolutions
  float: left;
  position: relative;
  background-color: #E8E8E7;
}

What we have here is a fully intact desktop presentation that now allows us to introduce the grid system after this $grid-max breakpoint has been reached. Depending on the complexity of your website, you can use the awesome singularity grid system, or any favorite grid system.

The big payback

Instead of aiming to re-write, re-factor, and re-theme an existing site and codebase to be responsive, you can save time, money and maybe some sanity by leveraging Sass, Breakpoint, and a somewhat different way of thinking about responsive design. We have implemented this approach recently to favorable and profitable results. I can’t speak to exact metrics, but I guarantee much time and budget were spared.