design sites using the responsive grid system _ tutorial _

7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _

http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 1/12



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.

gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi

2 11/06/20



The HTML

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

For three columns:

<div class="section group">1.

<div class="col span_1_of_3">2.

This is column 13.

< /div>4.


This is column 26.

< /div>7.


This is column 39.

< /div>10.

< /div>11.

And for four columns:

<div class="section group">1.


This is column 13.

< /div>4.


This is column 26.

< /div>7.


This is column 39.

< /div>10.


This is column 412.

< /div>13.

< /div>14.

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

enough for most purposes.

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE


2 11/06/20



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

The CSS

The HTML above is styled in the CSS that comes as part of the Responsive Grid System.

Here's the code:

/* SECTIONS */1.

.section {2.

clear: both;3.

padding: 0px;4.

margin: 0px;5.

}6.

7.

/* COLUMN SETUP */8.

.col {9.

display: block;10.

float:left;11.

margin: 1% 0 1% 1.6%;12.

}13.

.col:first-child { margin-left: 0; }14.

15.

And this is the code for the three and four column layout:16.

17.

/* GRID OF THREE */18.

.span_3_of_3 {19.

width: 100%;20.

}21.

.span_2_of_3 {22.

width: 66.1%;23.

}24.

.span_1_of_3 {25.

width: 32.2%;26.

VIEW SOURCE

COPY CODE


2 11/06/20



}27.

28.

/* GRID OF FOUR */29.

.span_4_of_4 {30.

width: 100%;31.

}32.

.span_3_of_4 {33.

width: 74.6%;34.}35.

.span_2_of_4 {36.

width: 49.2%;37.

}38.

.span_1_of_4 {39.

width: 23.8%;40.

}41.

42.

/* GROUPING */43.

.group:before,44.

.group:after {45.

content:"";46.

display:table;47.

}48.

.group:after {49.

clear:both;50.

}51.

How it all works

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

.section

splits up the page horizontally

.col

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" orclass="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.

.group

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+.


2 11/06/20



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:

@media only screen and (max-width: 480px) {1.

.span_3_of_3 {2.

width: 100%;3.

}4.

.span_2_of_3 {5.

width: 100%;6.

}7.

.span_1_of_3 {8.

width: 100%;9.

}10.

}11.

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

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-

scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

1.

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE


2 11/06/20



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:

.span_1_of_4:nth-child(2n+1) {1.

clear: both;2.

margin-left: 0;3.

}4.

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.

VIEW SOURCE

COPY CODE


2 11/06/20



RELATED ARTICLES

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 www.edwardrobertson.co.uk, 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

www.responsivegridsystem.com. 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.

Tweet

139

3

Me g

19

TAGS CSS CSS3 HTML HTML5 RESPONSIVE WEB DESIGN

15

ShareShare


2 11/06/20



Build a responsive site in a week: designingresponsively (part 1)

Build a responsive site in a week: typographyand grids (part 2)

Build a responsive site in a week: images andvideo (part 3)

Build a responsive site in a week: mediaqueries (part 4)

Build a responsive site in a week: going further(part 5)

Graham Millerwww.grahamrobertsonmiller.co.uk

Graham Miller has been building web

sites since 1996. He's web design director

at Edward Robertson and creator of the

Responsive Grid System. You can also

follow him on Twitter.

8 COMMENTS

amosg

September 06, 2012 at 13:32

Very useful info. Thanks.

Report abuse

1

jonhobbs


Responsive grid systems are a big talking point at the moment and I don't think this solution is one

that I'd use, because it's not possible to be semantic than you're calling your classes "1_of_3". That

simply won't make sense at some breakpoints.

I've been making my own semantic, responsive grid system using SASS, but I've also discovered

SUSY which looks better - http://susy.oddbird.net/

Report abuse

2

Marylka


Great tutorial! THX :]

Report abuse

3

grahammiller


Hi Jon

I couldn't work out a way for the spans to be semantically correct at all breakpoints, so I went with

making it easy to code up on a desktop. If you can think of a solution please drop me a line, I'd love to

improve the Responsive Grid System.

Report abuse

4

bkno


Hi Graham

Great article. I've tried a lot of grid systems and I like the look of this one. A few questions:

1. You seem to combine the section class with group class every time. Couldn't they just be a single

5


12 11/06/20



Other .net sectionsRSS

Hosting directory

Premium area

Advertising enquiries

Terms and Conditions

Privacy Policy

Cookie policy

Contact usWe love to get feedback, and we do our

very best to answer every email

accurately and promptly. If you’ve got an

idea for an article that you’d like us to

run, a product you’d like to pimp, or if you

simply want to ask a question of the team

– nothing kinky, mind – then drop us a

line. Just click the link below. It really is

that easy.

class to make it even simpler, or is there situations where you see these needing to be used

separately?

2. Does this grid system support nesting? I.e. section > col > section > col

3. Does it work in IE6 and above? (I get the impression from the site it does but wanted to double

check!)

Thanks

Ben

Report abuse

paul909


Came across this via Webmonkey http://www.webmonkey.com/2012/09/drink-in-the-responsive-

grid-with-bourb...

but http://susy.oddbird.net/ seems to be another good choice.

Report abuse

6

farid123

October 11, 2012 at 21:30

merci bcq

Report abuse

7

nehakhanna

December 04, 2012 at 05:49

Great tutorial, However grid system have it's own drawback one of which is it limits the designer to

design as per grids and they always comes up with boxy designs.

Report abuse

8

You need to login or register to post a comment

Login Forgot username/password?


12 11/06/20



Contact us

About .net.net is the world’s best-selling magazine for

web designers and developers, featuring

tutorials from leading agencies, interviews

with the web’s biggest names, and agenda-

setting features on the hottest issues

affecting the internet today.

Read more about us

Subscribe to .net magazine

Current issue of .net

Retweet Reply Follow us

@netmagRT @CreativeBloq: 10 things

designers need to know about iOS7 -

http://t.co/cjCEyihCpd #apple #ios #ux

#wddc

2:37PM Jun 11th via TweetDeck

Future is AOP and PPA Consumer Digital Publisher of the Year.

This site is part of Future plc, an international media group and leading digital publisher. We produce content across five core areas:

TechRadar

T3

MacLife

Gizmodo UK

More...

Technology

CVG

PC Gamer

GamesRadar

Total Film

More...

Entertainment

Classic Rock

MusicRadar

Guitarist

Metal Hammer

More...

Music

Digital Camera World

Mollie Makes

Photography Week

The Simple Things

More...

Creative

BikeRadar

Cyclingnews

ChopMTB

TriRadar

More...

Sport & Auto

About Future Jobs PR Advertising Privacy Policy Cookies Policy Terms & Conditions Subscriptions Investor Relations

Contact Future

© Future Publishing Limited, Beauford Court, 30 Monmouth Street, Bath BA1 2BW. All rights reserved. England and Wales company registration

number 2008885.


design sites using the responsive grid system _ tutorial _

Documents