design sites using the responsive grid system _ tutorial _
TRANSCRIPT
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
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 2/12
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 3/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
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 4/12
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.
<div class="col span_1_of_3">5.
This is column 26.
< /div>7.
<div class="col span_1_of_3">8.
This is column 39.
< /div>10.
< /div>11.
And for four columns:
<div class="section group">1.
<div class="col span_1_of_4">2.
This is column 13.
< /div>4.
<div class="col span_1_of_4">5.
This is column 26.
< /div>7.
<div class="col span_1_of_4">8.
This is column 39.
< /div>10.
<div class="col span_1_of_4">11.
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
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
2 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 5/12
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
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
2 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 6/12
}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+.
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
2 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 7/12
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
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
2 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 8/12
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
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
2 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 9/12
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
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
2 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 10/12
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
September 06, 2012 at 23:37
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
September 07, 2012 at 11:10
Great tutorial! THX :]
Report abuse
3
grahammiller
September 07, 2012 at 11:47
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
September 10, 2012 at 08:40
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
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
12 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 11/12
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
September 10, 2012 at 12:44
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?
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi
12 11/06/20
7/22/2019 Design Sites Using the Responsive Grid System _ Tutorial _
http://slidepdf.com/reader/full/design-sites-using-the-responsive-grid-system-tutorial- 12/12
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.
gn sites using the Responsive Grid System | Tutorial | .net magazine http://www.netmagazine.com/tutorials/design-sites-using-responsi