Creating an Adaptive Grid with Compass and SUSY

by: Kathleen Martin

With more and more users accessing the internet from their mobile and tablet devices, web designers need to create site designs that adapt to the screen on which the content is being displayed. Previously, this meant producing a second, mobile-minded design. However, such mobile implementations often times lacked features or information present on the full site, and felt like second class versions of the grown up desktop version. On top of that, it created two separate front-end designs that both needed to be maintained. Enter adaptive design.

Adaptive web design eschews the idea of having two different versions of the site and instead focuses on making one version which is flexible enough to respond to the screen size of the device it is being viewed on. By leveraging media queries, a designer can determine the size of the device's screen, and modify the site's CSS styling to accommodate the real estate.

But while this creates a much better approach to handling the mobile and tablet needs of most websites, creating a layout that works cross-browser, on a variety of pages, and now on a variety of screen sizes is a daunting task. Enter Compass and SUSY, two life-saving tools that will make not only creating adaptive or responsive layouts a manageable task, but will also greatly aid in general web development.

Prerequisites

I'm not going to go into detail on how to setup Compass and SUSY. Both of those projects have excellent documentation on how to get them set up with your project and they're crazy easy to do. I am also not going to go into detail about SASS. At this point, if you are not using SASS or LESS, and are instead writing strait CSS, you're shooting yourself in the foot. Either one make development so much easier, as well as allowing for very complex styling, that if you haven't jumped on the bandwagon yet, I'm not going to try and convince you. Also, if you are using SASS or LESS, you absolutely must use an either LiveReload or CodeKit. Both make using and compiling SASS or LESS easy; they also automagically update your browser, making local development even better. Get them. Learn them. Live them.

Media Queries - What the what?

The foundation of what makes all of this adaptive web design possible are media queries, which you might have already come across when adding special styling for pages being viewed for print versus being display on the screen. Basically they are little lines of code that allow you to execute styling contained within their brackets if a certain condition is met. In this post we will be discussing only the screen and min-width uses, but in actuality you can gather a whole bunch of information about the user's device using them. I won't go into too great of detail about them, as SUSY will handle this for us.

SUSY and the Container

SUSY is a framework built on top of Compass and SASS that let's you create responsive grids very quickly with only a couple lines of SASS code. The two critical mixins are container and span-columns. Consider the following simple HTML structure:

<section id="main">   <article id="content">     <p>My content</p>   </article>   <aside id="sidebar">     <p>Also check this out</p>   </aside> </section>

The first order of business is to turn the #main <section> into a container that will hold our grid elements. To do this, all you need is the following lines of code:

// Grid variables $total-columns: 12; // 12 columns $column-width: 4em; // columns are 4em wide $gutter-width: 1em; // with 1em gutters $grid-padding: 1em; // and 1em padding on the grid container

#main { @include container; }

This will create your basic grid container. By default, SUSY makes a "magic" grid that  is fluid on the inside, with an elastic container max-width. The em-width makes it responsive to font sizes, while the max-width setting makes it responsive to window sizes. If you'd like to make that container fluid, you can add the variable $container-style: fluid; and to make it static, use $container-style: static; it's that easy. There are a myriad of options that you can learn more about here.

Now all you need to do is define how many grid units you want your two inner elements to take up. This is where the span-columns mixin comes in. Let's make the #content <article> span 9 of the colums and the #sidebar <aside> span 3. This would look like:

#content { @include span-columns(9,12); } #sidebar { @include span-columns(3 omega,12); }

That's all you have to do! You now have a nice little grid layout that is defined in em. Note that the omega should be added to the last element in your grid. This removes the right gutter.

Making things Adaptive with Breakpoints

Ok, so that's all well and great, but now we need to make the thing adaptive so that it will respond to the device width. This is where breakpoints come in. A breakpoint is the term used to describe the point at which the grid switches from one set of layout rules to the next. It may seem like a good idea to then set these breakpoints at the different device widths, however this is not the best way to go about it. One major problem is that device widths will change over time. If you choose, say the portrait and landscape widths of the iPhone and the iPad to create your breakpoints, what happens with Apple makes super-duper retina displays? Or how will that look on the wide array of Android screens? On top of that, you are taking your content and trying to fit it into abitrary widths defined by a device.

Instead you should set breakpoints that make sense for your design and the content it is displaying. This means you wil need to evaulate breakpoints on a case-by-case basis. This may be a bit more work, but the end result will be a layout that fits your content, which is ultimately the most import thing on a site.

To create breakpoints using SUSY, you define the default grid settings, such as the example from earlier, then use the at-breakpoint mixin to adjust the styling for that breakpoint. For example, say I want to take the above example, and make a grid that is mobile first, and then expands to a large grid when it reaches a size suitable for a tablet device. To do that I use the following code:

// Grid variables for the main container // Mobile first approach $total-columns: 4; // 12 columns $column-width: 4em; // columns are 4em wide $gutter-width: 1em; // with 1em gutters $grid-padding: 1em; // and 1em padding on the grid container

#main {   // Build the container   @include container;

  // Define the inner elements   #content { @include span-columns(4, 4); }   #sidebar { @include span-columns(4, 4); }      // Now create a media-query breakpoint at the min-width of 30em and use a larger grid and modify the layout   @include at-breakpoint(30em 8) {     // This will create a new container with a total of 8 columns     @include container;

    // Now modify the inner elements to their new home     #content { @include span-columns(6,8); }     #sidebar { @include span-columns(2 omega,8); }   } }

And there you have it. You would also want to create a second breakpoint to handle laptop/desktop computers, and you could even take it a step further and add breakpojnts for mobile and tablet devices in portoriat and landscape modes.

The power of SUSY cannot be understated. The above example is only scratching the surface. You owe it to yourself to check out the official SUSY documentation and examples to see just how powerful it is, and the wide variety of things you can do with it. Happy coding!

Outlier

Video, Web, and Design Agency