JoomlaVision > Web design > Design sites using the Responsive Grid System

Design sites using the Responsive Grid System

Design sites using the Responsive Grid System. The Responsive Grid System isn’t a framework or a boilerplate. But it does make creating responsive websites quick and easy. Graham Miller, its creator, explains how to use it

Deciding the site content

A certain Jeffrey Zeldman said: “Content precedes design. Design in the absence of content is not design, it’s decoration.” We kicked off the process by listing all of the elements we wanted to put on the home page, so we could build outwards from there.

Along with the company logo and navigation we settled on a sliding carousel, four featured services, three featured projects, our latest news and a client testimonial.

Sketching the wireframe

We sketched out the layout for the page using the Paper iPad app by FiftyThree. It’s excellent for creating quick layout sketches, and the watercolour effect is especially nice at adding colour without obscuring the details.

The wireframe for the Edward Roberston site, as sketched out on an iPad using the Paper app

Building the site in the browser

Now we were ready for the fun part: building the site in the browser. If you’re creating something responsive, it’s not always feasible to produce a PSD for each view, so we jumped into the browser as soon as we could.

As the wireframe shows, the page is split into horizontal sections that fill the full width of the screen. Some of them are split into columns, but the whole site doesn’t conform to one master grid. That’s what makes it visually interesting.

The Responsive Grid System is great for this because:

  • It lets us have any number of columns. Some grids are split into twelve or sixteen, which is fine for designs with three or four equal columns, but what if you want five? It doesn’t compute…
  • It scales to fit any width. It uses percentages for the column widths and the gutters, and does all the maths for us.
  • It includes some smart code to make the development easier and fix common bugs.
  • It plugs into our existing CSS, so we don’t need to change how we work.
  • Media queries for mobile layouts are already baked in, although you can also cook up some of your own.

What’s that noise? It’s the sound of our designers, developers and site users cheering.

Getting into the code

The Responsive Grid System isn’t a boilerplate or a framework: it’s a few lines of code that fit in with how you work and can be plugged into your existing markup.


To split the page into vertical columns we used the code shown below.
For three columns:

And for four columns:

The Responsive Grid System comes with code for up to twelve columns, which is more than enough for most purposes.

Possible column layouts with the Responsive Grid System: just match the layout to the content


The HTML above is styled in the CSS that comes as part of the Responsive Grid System. Here’s the code:

How it all works

Let’s go through what’s going on here:

splits up the page horizontally

divides the section into columns. Each column has a left margin of 1.6% (around 20 pixels on a normal monitor) except the first one. This is removed by the .col:first-child { margin-left: 0; } code, and it has the extra benefit that you don’t need to use class=”last” or class=”end” anywhere (woo!). It works in all browsers since IE6.

.span_1_of_3 / .span_1_of_4
specifies the width of the column. Using percentages means it’s 100% fluid.

solves any floating problems, by forcing the section to self-clear its children (aka the ‘clearfix hack’). This works in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+.

The Edward Robertson site, as it appears on a desktop monitor…

Going responsive

The Responsive Grid System has code baked into it to adjust the layout to suit mobile devices, so you can easily put your site in someone’s pocket. It includes media queries:

Which turns three columns into three rows, each filling the width of the screen. But that alone won’t do the trick on a smartphone unless we put

into the document head. This nifty bit of code tells viewport-aware browsers (such as those on mobile devices) not to scale down a desktop site into a mobile-sized screen, but to treat the width of the browser window as that of the device.

And now our media queries can kick in.

…and the Edward Roberston site viewed on mobile devices

Adjusting the layout for different widths

“What about iPads and other devices with screen sizes in between?” you say. If we don’t want four columns to become four rows, but we want four columns to become two rows of two, we can add this code into the CSS that is delivered to iPads:

The nth-child tomfoolery removes the margin and clears every second div. If you’re not familiar with how nth-child works, there’s a fantastic article by Chris Coyier at CSS-Tricks.

Test, test and test again

As satisfying as it is, it’s not enough to keep shrinking and expanding your browser window. We tested the site on as many different mobile devices that we could get our hands on, and so should you.

And we’re done (yay!)

We built a fully responsive website using the Responsive Grid System. There are more comprehensive grid systems out there, but for speed, ease of use and flexibility, it was just the job. I hope it will be for you too.

You can see the finished site at, where you can fiddle around with the browser window size to your heart’s content.

The completed web page

Over to you

You can download all of the HTML and CSS that you need from If you have any problems, please let me know. And I’ll be thrilled to hear if you use the system on any of your own responsive websites.

Related posts