8

8Grids & columns

8.3

Building the responsive grid CSS file

The first thing to do is cre­ate the grid.​css file. The grid.​css file is a file that we are cre­at­ing for the web­site (it is not a third party file) and so it will live in the 11-re­sources folder; and since it is a CSS file it will be stored in the 01-CSS sub­folder—this is the same place as style.​css.

To cre­ate the file in Brack­ets, ex­pand the folder struc­ture in the left hand side bar and then right click the 11-re­sources/01-css folder and se­lect new file (Fig­ure 8.7).

Figure 8.7 - Create the grid.css file

Figure 8.7   Create the grid.css file

Re­name the new file as grid.​css and we’re ready to go.

Ok, how to do it? Any ideas?

This is what I thought of, and to demon­strate I’m just going to build the arrange­ment I want for the web­site (that is row 1 in Fig­ure 8.2). I’ll then ex­pand it for all the other com­bi­na­tions—it’s ok, won’t take more than a week or two.

My idea is that each set of columns should be held in a row con­tainer. In the HTML this would be a <div> el­e­ment and it would have a class called rg-row (re­spon­sive grid row—bound­less imag­i­na­tion).

Then within the row <div>, there would be an­other <div> for each col­umn. Like this (this is the index.​html file we cre­ated in Code 7.1):

index.html
  1.     <body>
  2.         <div class="rg-row">               <!-- ROW CONTAINER -->
  3.             <!-- LEFT  COLUMN -->
  4.             <div class="rg-col rg-span1-5>
  5.                 Col L
  6.             </div>
  7.             <!-- MIDDLE COLUMN -->
  8.             <div class="rg-col rg-span3-5">
  9.                 Col M
  10.             </div>
  11.             <!-- RIGHT COLUMN -->
  12.             <div class="rg-col rg-span1-5">
  13.                 Col R
  14.             </div>
  15.         </div>
  16.     </body>
  17.  
Code 8.1   index.html a

And boy does it look good:

Figure 8.8 - index.html (column div elements)

Figure 8.8   index.html (column div elements)

I’m show­ing the re­sults in a browser that is wider than the max­i­mum body width of 1276 px; hence the cream coloured edges.

The text shows where the columns are, Col L is in the left col­umn, Col M the mid­dle col­umn and Col R the right col­umn (they will be columns when we’ve fin­ished).

Let’s add a bit of colour to each col­umn area to make things clearer (this is sim­i­lar to what I did in § 6.4.This time I will use in­line styling in the HTML, add the fol­low­ing back­ground style to each of the col­umn div el­e­ments:

index.html
  1.     <body>
  2.         <div class="rg-row">               <!-- ROW CONTAINER -->
  3.             <!-- LEFT  COLUMN -->
  4.             <div class="rg-col rg-span1-5" style="background-color: #c57">
  5.                 Col L
  6.             </div>
  7.             <!-- MIDDLE COLUMN -->
  8.             <div class="rg-col rg-span3-5" style="background-color: #7c5">
  9.                 Col M
  10.             </div>
  11.             <!-- RIGHT COLUMN -->
  12.             <div class="rg-col rg-span1-5" style="background-color: #57c">
  13.                 Col R
  14.             </div>
  15.         </div>
  16.     </body>
Code 8.2   index.html a

The in­line style at­tribute is an­other way of ap­ply­ing CSS to an HTML el­e­ment, in this case it is ap­plied di­rectly from within the HTML file it­self (I dis­cussed it briefly § 5.3, point 1 in the list).

By adding the style at­tribute, it’s pos­si­ble to in­sert CSS rules that style the el­e­ment, di­rectly in the el­e­ment in the HTML file:

<div class="rg-col rg-span1-5" style="background-color: #c57">

The style="back­ground-color: #c57" ap­plies a colour of #c57 (red­dish) to the back­ground of the <div> el­e­ment, the entry in quotes is just CSS code, if you need more than one de­c­la­ra­tion, just put a semi­colon after each (just like CSS but with­out the braces).

The style at­tribute in the first col­umn <div> turns it red, the sec­ond <div> green and the last blue. Now we get:

Figure 8.9 - index.html (coloured div elements)

Figure 8.9   index.html (coloured div elements)

Ok, now we do the rest in CSS—rg-row first:

8.3.1

The rg-row class

Open the grid.​css file cre­ated above in Brack­ets and add the fol­low­ing code:

grid.css
  1. /* **************************************************************
  2.    RESPONSIVE GRID - ROW DEFINITION (.rg-row)
  3.    **************************************************************
  4.    Each row can contain up to six columns (if the number of
  5.    columns is to change for different parts of the page, a new
  6.    row must be defined for each).
  7.  
  8.    The first column does not require this left margin and this
  9.    is set to zero using the :first-child pseudo class.
  10.  
  11.    The subsequent before and after pseudo elements force the .row
  12.    class to self-clear (clearfix hack) to prevent floating
  13.    problems.
  14.    ----------------------------------------------------------- */
  15.  
  16. .rg-row {                   /* sets the basic row properties */
  17.     margin: 0 auto;
  18.     padding: 0;
  19. }
  20.  
  21. .rg-row:before,             /* IE 9 support */
  22. .rg-row:after {             /* ClearFix */
  23.     content:"";
  24.     display:table;
  25. }
  26. .rg-row:after { clear:both; }
  27.  
Code 8.3   grid.css (rg-row) a

This ba­si­cally does two things: it sets the mar­gins and padding and it ap­plies the clearfix hack (dis­cussed in § 6.4.1 & § 6.4.2).

The first bit is straight for­ward:

.rg-row {                   /* sets the basic row properties */
    margin: 0 auto;
    padding: 0;
}

The first line sets the top and bot­tom mar­gins to zero, and the left and right mar­gins to auto—this en­sures the row <div> is al­ways in the mid­dle of its par­ent el­e­ment (which in this case is the body el­e­ment, again like I did in § 7.4.3).

  • It’s important that the row does not have any margins or padding; we will add these with the column classes.

Next is the clear fix hack. This is a slightly more ad­vanced ver­sion of that in § 6.4.1

The ver­sion I dis­cussed in § 6.4.1 looked like this:

.clearfix:after{
    content: "";
    display: table;
    clear: both;
}

And the new one is:

.rg-row:before,             /* IE 9 support */
.rg-row:after {             /* ClearFix */
    content:"";
    display:table;
}
.rg-row:after { clear:both; }

I know it looks dif­fer­ent, but it isn’t that dif­fer­ent re­ally, es­sen­tially all that’s hap­pened is there is a :be­fore pseudo el­e­ment that ap­plies the con­tent and dis­play prop­er­ties.

I’ve com­bined the com­mon :be­fore and :after de­c­la­ra­tions; if I sep­a­rated them out it would look like this:

.rg-row:before {            /* IE 9 support */
    content:"";
    display:table;
}

.rg-row:after {             /* ClearFix */
    content:"";
    display:table;
    clear:both;
}

The sec­ond bit, the :after is iden­ti­cal to that used pre­vi­ously in § 6.4.1. The :be­fore bit is to pro­vide sup­port for In­ter­net Ex­plorer 9†1 .

  • There are lots of versions of clearfix about, this seems to be a fairly common one and it works well.
†1 It’s always bloody Internet Explorer that cocks things up. I’m not even sure I’m supporting IE9 (I can’t remember what I’ve said or in what particular rant I said it). IE9 has a 4% market share of browsers—do you want to support it?—probably not, I leave it up to you. If you don’t, simplify the clearfix to the one that just has the :after pseudo element.

Now we need to call grid.​css. Add it into the index.​html file—add it in be­fore the style.​css link (I still want style.​css to be the last CSS file called, I want it to have pri­or­ity over all the oth­ers, see § 7.3.7)

Add the fol­low­ing to index.​html:

index.html
  1. <!-- ********************************************************
  2.      HEAD CSS LOAD
  3.      ******************************************************** -->
  4. <link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css">
  5. <link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css">
  6. <link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">
  7.  
  8.  
  9.  
Code 8.4   index.html (link to grid.css) a

If we look at this in live pre­view, ex­actly noth­ing has hap­pened:

Figure 8.10 - website with rg-row in place

Figure 8.10   website with rg-row in place

This is largely to be ex­pected, the mar­gins and padding were prob­a­bly al­ready zero and be­cause there is only one row el­e­ment that spans the full page, the clearfix hack has no vis­i­ble ef­fect.

All the work is done in the col­umn classes; let’s look at those, but first.

8.3.2

Assigning more than one class to an element

It’s per­fectly pos­si­ble to as­sign any num­ber of classes to an el­e­ment; this is ev­i­dent in the as­sign­ing of classes to the col­umn <div> el­e­ments in the HTML:

<div class="rg-col rg-span1-5">

Here I’ve as­signed the class rg-col and the class rg-span1-5 to the same <div> el­e­ment.

To as­sign mul­ti­ple classes to an el­e­ment, just sep­a­rate the class names with a space (this is why class names them­selves can­not con­tain spaces).

If the classes apply con­flict­ing rules, the last class in the list will take pri­or­ity (this is sim­i­lar to the order in which the CSS files are ap­plied § 7.3.7, last one gets pri­or­ity).

8.3.3

The rg-col class

Look at the first col­umn <div> (Col L) el­e­ment

<div class="rg-col rg-span1-5">

The col­umn <div> (and all the other col­umn <div> el­e­ments too) has two classes as­so­ci­ated with it (rg-col and rg-span1-5). The first rg-col con­tains all the com­mon de­c­la­ra­tions that apply to every col­umn; the sec­ond rg-spanS-C has the col­umn spe­cific de­c­la­ra­tions (es­sen­tially the width of the col­umn).

First let’s add the rg-col code to grid.​css:

grid.css
  1. /* **************************************************************
  2.    RESPONSIVE GRID - COLUMN DEFINITION (.rg-col)
  3.    **************************************************************
  4.    Each column in a row is defined with the KG Grid margin of
  5.    3.45% on the left.
  6.  
  7.    The first column does not require this left margin and this
  8.    is set to zero using the :first-child pseudo class.
  9.  
  10.    At low screen widths (<=520 px), the columns stack vertically
  11.    and at this point all column margins are removed (by media
  12.    query).
  13.    ----------------------------------------------------------- */
  14.  
  15. .rg-col {       /* sets the basic column width and properties */
  16.     display: block;
  17.     float: left;
  18.     margin: 1% 0% 0% 3.45%;
  19. }
  20.                 /* remove left margin from first column */
  21. .rg-col:first-child { margin-left: 0; }
Code 8.5   grid.css (rg-col) a

This makes an im­me­di­ate dif­fer­ence, just look (Fig­ure 8.11):

Figure 8.11 - website with rg-col in place

Figure 8.11   website with rg-col in place

Hey, now were get­ting some­where.

So what have we done?

Well the first bit is to make the columns dis­play as blocks with the dis­play: block de­c­la­ra­tion (<div> el­e­ments are al­ready block el­e­ments, so this is a bit su­per­flu­ous here, my think­ing being that the class could be ap­plied to some­thing that isn’t a block el­e­ment by de­fault).

Next I make all the blocks float to the left (with the float: left com­mand), this is iden­ti­cal to set­ting up the box model § 6.4. It makes all the col­umn <div> el­e­ments float to the left, they are in a line and each <div> is just as wide as its con­tent (the “Col L” &c.).

The rea­son the columns are only this wide, is be­cause we haven’t told them to be­have any dif­fer­ently (we do that with the rg-spanS-C class, § 8.3.5).

There is also a white band be­tween each of the columns and the columns have moved down slightly (there is a thin white band above the columns in Fig­ure 8.11 that wasn’t there in Fig­ure 8.10, it sep­a­rates the columns from the top edge of the browser win­dow).

These white gaps are the mar­gins that I set with the de­c­la­ra­tion:

margin: 1% 0% 0% 3.45%;

This sets the mar­gins in the order top, right, bot­tom, left (§ 6.3.1) as fol­lows:

 Top margin 1%
Right margin zero
Bottom margin zero
Left margin 3.45%

The top mar­gin is 1% of the par­ent el­e­ment’s width†2 (this is the rg-row div and this is as wide as its own par­ent el­e­ment—in this case the body el­e­ment and this is lim­ited to a max­i­mum width of 1276 px—es­sen­tially, the top mar­gin is 1% of the body width, if all the body width is vis­i­ble in the browser this will be 1% of 1276 px), this gives the top white band above the columns.

†2 It’s odd, I know, to set a height property based on a width, but that is exactly what it does.

The bot­tom mar­gin is zero, this can be seen by the fact that the cream html back­ground colour is ad­ja­cent to the bot­tom of each col­umn area.

The right mar­gin is also zero, this is harder to see but just take my word for it.

This just leaves the white gaps ei­ther side of Col M. This is the left mar­gin set­ting of 3.45%. I’ll come to why it is this value, but first I want to ex­plain about the mar­gins.

The white gap to the left of Col R is its left mar­gin set­ting of 3.45%. Sim­i­larly, the white gap to the left of Col M is its left mar­gin set­ting of 3.45%.

There is no gap to the left of Col L (the first col­umn) and this is odd be­cause there is clearly a left mar­gin de­fined by the de­c­la­ra­tion:

margin: 1% 0% 0% 3.45%;

So what’s going on?

The an­swer is in the last line:

rg-col:first-child { margin-left: 0; }

Here we have an­other pseudo el­e­ment (:first-child).

8.3.4

first-child, last-child and nth-child pseudo elements

These pseudo el­e­ments are fairly straight for­ward, but the syn­tax can be a bit con­fus­ing so I’ve put them in their own sec­tion—so you can find them again.

The :first-child el­e­ment de­tects the first time the spec­i­fied class (in this case rg-col) is used within a par­ent el­e­ment (the par­ent el­e­ment in this case is the rg-row div, the next one up as it were).

What it does here, is it sets the left mar­gin to zero the first time rg-col is used; this is why there is no white gap to the left of Col L, Col L is the first-child of rg-col, and this has its mar­gin set to zero: 

rg-col:first-child { margin-left: 0; }

There are other such pseudo el­e­ments: :last-child and :nth-child(x).

The :last-child is the last in­stance of the class being used in a par­ent el­e­ment.

  • If the class exists only once in a parent element then it is both the :first-child and the :last-child; indeed, such a class has its own special pseudo element of (would you believe it) :only-child—seriously.

:nth-child(x) se­lects the xth oc­cur­rence of the class, Col M for ex­am­ple would be :nth-child(2). Col R would be :nth-child(3) &c.

The :nth-child(x) can be used to spec­ify ranges—you’ll like these:

 :nth-child(n+6) Selects the 6th to the last occurrence (inclusive)
nth-child(-n+6) Selects the first occurrence to the 6th occurrence (inclusive)
:nth-child(n+3):nth-child(-n+8) Selects the 3rd occurrence to the 8th occurrence (inclusive)
Table 8.1   nth-child examples

There’s loads more—you can se­lect odd and even chil­dren (want to say childs) every third even child &c. check them out at the nthmaster site.

That’s enough of that. In short, I use :first-child to re­move the left mar­gin from the first col­umn in a row.

8.3.5

The rg-spanS-C class

The last bit, and the eas­i­est bit—noth­ing com­pli­cated here, just some maths.

The rg-spanS-C is only con­cerned with set­ting the width of the columns. Dif­fer­ent columns widths have dif­fer­ent val­ues of S and C. In this par­tic­u­lar ex­am­ple, we need val­ues for:

  • rg-span1-5

  • rg-span3-5

Al­though we have three columns, two of them are the same size—rg-span1-5.

So how do we work out the widths?

Well let’s con­sider the Ger­st­ner grid of § 3.1.1. The Ger­st­ner gird has the fol­low­ing rules:

  1. The grid is 58 units wide

  2. When the grid is split into columns, each col­umn is sep­a­rated from its neigh­bour by 2 units

In our case, at the max­i­mum width, the grid is 1276 px wide, this makes 1 unit 22 px wide.

1 unit=1276 px58=22 px
(8.1)

So 1 unit is 22 px and we know (point 2 in the list) that the gap be­tween columns is 2 units or 2 × 22 = 44 px.

So we want the mar­gin that is on the left of the columns to be 44 px wide when all the body area (all 1276 px) is vis­i­ble; but what hap­pens if less than 1276 px is vis­i­ble? Well, we want the mar­gins to get nar­rower but to keep in pro­por­tion and we do this by set­ting the mar­gin as a per­cent­age of the body area width.

Now at the full body width of 1276 px, a mar­gin of 44 px is 3.448% of the body width:

441276×100=3.448%
(8.2)

Round­ing to two dec­i­mal places this is a left mar­gin of 3.45%—sound fa­mil­iar? This is the mar­gin that was set for the rg-col class:

margin: 1% 0% 0% 3.45%;

It’s com­ing to­gether.

Next is the width of the col­umn it­self; for the first col­umn we want this to be the width of one col­umn in a five col­umn arrange­ment, here is the col­umn arrange­ment from the Ger­st­ner grid di­a­gram of Fig­ure 3.3—re­pro­duced below:

Figure 8.12 - Gerstner grid as columns

Figure 8.12   Gerstner grid as columns

So the first (and last) columns are 10 units wide (the blue row, sec­ond from bot­tom).

In this case, 10 units is 10 × 22 px = 220 px. As a per­cent­age of the max­i­mum screen width this is:

2201276×100=17.24%
(8.3)

So the first col­umn rg-span1-5 has a col­umn widths of 17.24%.

The mid­dle row is three columns wide so that is 3 × 10 units = 30 units. Plus it also spans the two gaps in the mid­dle; this adds an­other 4 units (two for each gap). So the total width is 34 units, as a per­cent­age this works out at 58.62%

34 units×22 px1276 px×100=7481276×100=58.62%
(8.4)

The for­mula for work­ing out the per­cent­age width of any span and col­umn arrange­ment is:

SpanWidth%=100×SC-Margin%(1-SC)
(8.5)

The Mar­gin% is the two unit gap worked out in (8.2), it has a value of 3.45%; so:

SpanWidth%=100×SC-3.45(1-SC)
(8.6)

In the first in­stance rg-span1-5, S = 1 and C = 5, using (8.6) this give

100×15-3.45(1-15)=20-(3.45×0.8)=17.24%

I.e. rg-span1-5 has a col­umn widths of 17.24%. This is ex­actly the same an­swer ob­tained em­pir­i­cally above (8.3).

For the mid­dle col­umn rg-span3-5, S = 3 and C = 5, using (8.6) this gives:

100×35-3.45(1-35)=60-(3.45×0.4)=58.62%

I.e. rg-span3-5 has a col­umn width of 58.62%. Again, ex­actly the same as the em­pir­i­cally an­swer above (8.4).

So all that is needed is to put these in the code:

grid.css
  1. /* **************************************************************
  2.    RESPONSIVE GRID - SPAN CONTROLLS
  3.    *********************************************************** */
  4.  
  5.  
  6. /* --------------------------------------------------------------
  7.    Five column span arrangements
  8.    ----------------------------------------------------------- */
  9.  
  10. .rg-span1-5 { width: 17.24%; }
  11. .rg-span3-5 { width: 58.62%; }
Code 8.6   grid.css (rg-spanS-C) a

Bet that was eas­ier than you thought. It gives us this:

Figure 8.13 - website with rg-span in place

Figure 8.13   website with rg-span in place

Well bug­ger me, it’s only gone and worked—I was sur­prised too.

There is a bit left to do, mainly work­ing out the widths for all the dif­fer­ent com­bi­na­tions (I’ll come to this, but don’t worry about it yet—it’s just plug­ging the num­bers into equa­tion (8.6) for each span and col­umn value).

The bit we have to look at is the re­spon­sive­ness of the columns, to demon­strate, grab the right edge of the browser and drag it to make the win­dow nar­rower; things start out well, the columns get nar­rower, but keep the rel­a­tive pro­por­tions—this is just what we wanted to hap­pen.

The prob­lem is they just keep going until we hit the min­i­mum browser win­dow width†3. It even­tu­ally looks like this:

Figure 8.14 - website with minimum width

Figure 8.14   website with minimum width

So the web­site is re­spon­sive up to a point, but if you re­mem­ber, when we get below 520 px wide, we want the columns to stack (§ 8.2), so how do we do this?—Read on.

†3 With Chrome, the minimum width of the browser window on a PC seems to be about 150 px, it just doesn’t go any smaller. I don’t know if it is Chrome or Windows that sets this limit?

8.3.6

Making the columns stack

It’s ac­tu­ally pretty easy to make the columns stack; we do it by mak­ing the width of every col­umn 100% and set­ting the mar­gins to zero when the browser is 520 px wide or less.

The prob­lem is: how does the code know the width of the browser?

Well CSS comes to the res­cue with media queries. These are funny look­ing things that start with an @ sym­bol (@media). Media queries were in­tro­duced in CCS 2 and have been around for a while. They give in­for­ma­tion about the de­vice that is view­ing the web­site; this can be things like the width of the de­vice, the res­o­lu­tion of the de­vice, whether it is mono­chrome—even if it is a speech based screen reader—all sorts of things.

The media query has a slightly un­usual syn­tax; it’s dif­fer­ent to what we’ve used so far in CSS. I show it in full in Fig­ure 8.15:

Figure 8.15 - media query rule structure

Figure 8.15   media query rule structure

So what does it all mean, well ba­si­cally it is a log­i­cal test that re­turns a true or false an­swer, if it’s false noth­ing hap­pens, if it’s true then the CSS in the de­c­la­ra­tion block at the end gets ex­e­cuted.

The first bit @media NOT | ONLY me­di­atype is a test for how the web­site is being ex­pe­ri­enced, the valid me­di­atypes are:

Mediatype Function
screen The page is being viewed on a screen (computer, tablet, smart phone &c.)
print Specifies a printer—the page is being printed
speech Specifies a screen reader (a device that reads the page out loud)
all All devices, any of the above
Table 8.2   Mediatypes in media queries

There used to be some oth­ers (braille, em­bossed, tty &c.) but these are no longer sup­ported by the CSS stan­dard and should not be used (most browsers do still sup­port them though).

The only one we are in­ter­ested in is screen (I guess re­spon­sive de­sign could apply to screen read­ers by de­ter­min­ing the order in which things are read, in our case it would be the same order as the columns when stacked—i.e. the same as the vi­sual order).

So our media query will start

@media only screen

This state­ment will be true if the web page is being viewed on some form of com­puter screen (PC, Mac, smart phone, tablet &c.)

The next bit tests some fea­ture of the me­di­atype, for a screen there are a lot, there is a full list here; I think some of the ex­pla­na­tions are a bit mis­lead­ing though, I give my own in­ter­pre­ta­tion in § 8.4. The one we want (and we are going to use it a lot) is max-width. It’s used like this:

@media only screen and (max-width: 520px) { /* execute if width ≤520px */ }

The max-width prop­erty is fol­lowed by a num­ber (520 px in this case) and the prop­erty is true if the browser width is less than or equal to the max-width value (in this case if it is 520 px or less).

Now, in our case, if the browser win­dow is 520 px or less we want the col­umn width set in rg-span1-5 and rg-span3-5 to be set to 100%. And we do this by adding the media query to grid.​css:

Add the fol­low­ing:

grid.css
  1. /* **************************************************************
  2.    RESPONSIVE GRID - SPAN CONTROLLS
  3.    *********************************************************** */
  4.  
  5.  
  6. /* --------------------------------------------------------------
  7.    Five column span arrangements
  8.    ----------------------------------------------------------- */
  9.  
  10. .rg-span1-5 { width: 17.24%; }
  11. .rg-span3-5 { width: 58.62%; }
  12.  
  13. @media only screen and (max-width: 520px) {
  14.     .rg-span1-5 { width: 100%; }
  15. }
  16.  
  17. @media only screen and (max-width: 520px) {
  18.     .rg-span3-5 { width: 100%; }
  19. }
  20.  
Code 8.7   grid.css (responsive rg-spanS-C) a

If you drag the browser edge in now, at a width of 520 px, the columns stack and we get this

Figure 8.16 - Initial column stacking

Figure 8.16   Initial column stacking

Ig­nore the mar­gins at the left of the green and blue columns (that we should now call rows), this is be­cause we haven’t ad­dressed the mar­gins yet.

If you open the browser out again they go back to nor­mal (three columns in a hor­i­zon­tal line).

Let’s look at the first media state­ment and make some sense of it:

@media only screen and (max-width: 520px) {
    .rg-span1-5 { width: 100%; }
}

The top line:

@media only screen and (max-width: 520px)

This re­turns a true value if we are look­ing at the web­site on a screen AND the max-width of the browser win­dow is 520 px or less.

So if the browser is less than 520 px the code within the first set of braces gets ex­e­cuted (I’ve shown these braces in bold).

That code .rg-span1-5 { width: 100%; } is just a per­fectly nor­mal bit of CSS code it sets the width of class rg-span1-5 to be 100% of its par­ent el­e­ment’s width (in this case it will be the full width of the browser)—this forces the next col­umn onto the line below, this col­umn is 100% wide so there is no room for any­thing else on this line.

And that’s how it works.

There are a cou­ple of other things to do: firstly get rid of those mar­gins. We do this with an­other media query, but this time for the rg-col class, that’s where those mar­gins are com­ing from, add the fol­low­ing:

grid.css
  1. .rg-col {       /* sets the basic column width and properties */
  2.     display: block;
  3.     float: left;
  4.     margin: 1% 0% 0% 3.45%;
  5. }
  6.                 /* remove left margin from first column */
  7. .rg-col:first-child { margin-left: 0; }
  8.  
  9. /* --------------------------------------------------------------
  10.    Remove margins at lower screen widths ( 520 px or less)
  11.    ----------------------------------------------------------- */
  12.  
  13. @media only screen and (max-width: 520px) {
  14.     .rg-col { margin: 0; }
  15. }
Code 8.8   grid.css (responsive rg-col) a

This works in ex­actly the same way as the rg-span media query, if the web­site is being viewed on a screen AND the max-width of the browser win­dow is 520 px or less, set the rg-col mar­gins to zero.

We get:

Figure 8.17 - Responsive margins

Figure 8.17   Responsive margins

With­out the mar­gins—just what we want.

There is one last ad­just­ment that I want to make; this is just for the sake of ap­pear­ance.

With the columns stacked on top of each other, any text in those columns is right up against the side of the browser win­dow.

I want to move the text away from the edge slightly and I do this by adding some padding to the left and right of the rg-span classes in the media query:

grid.css
  1. /* **************************************************************
  2.    RESPONSIVE GRID - SPAN CONTROLLS
  3.    *********************************************************** */
  4.  
  5.  
  6. /* --------------------------------------------------------------
  7.    Five column span arrangements
  8.    ----------------------------------------------------------- */
  9.  
  10. .rg-span1-5 { width: 17.24%; }
  11. .rg-span3-5 { width: 58.62%; }
  12.  
  13. @media only screen and (max-width: 520px) {
  14.     .rg-span1-5 { width: 100%; padding:0 1%; }
  15. }
  16.  
  17. @media only screen and (max-width: 520px) {
  18.     .rg-span3-5 { width: 100%; padding:0 1%; }
  19. }
Code 8.9   grid.css (add padding to collapsed columns) a

I’ve put the old and new ver­sion of the web­site side-by-side to show the dif­fer­ence:

Figure 8.18 - Collapsed grid without padding

Figure 8.18   Collapsed grid without padding

Figure 8.19 - Collapsed grid with padding

Figure 8.19   Collapsed grid with padding

It’s just moved the text in from the edge (you can only see it on the left side—if you put more text in you would see it on both).

The next thing is to tidy the media queries, we have two for the rg-span classes at the minute, they do the same thing, but they do it to dif­fer­ent classes, we can com­bine these into a sin­gle media query like this:

grid.css
  1. /* **************************************************************
  2.    RESPONSIVE GRID - SPAN CONTROLLS
  3.    *********************************************************** */
  4.  
  5.  
  6. /* --------------------------------------------------------------
  7.    Five column span arrangements
  8.    ----------------------------------------------------------- */
  9.  
  10. .rg-span1-5 { width: 17.24%; }
  11. .rg-span3-5 { width: 58.62%; }
  12.  
  13. /* stack columns at <=520 px by making all columns 100% wide */
  14. @media only screen and (max-width: 520px) {
  15.     .rg-span1-5,
  16.     .rg-span3-5 { width: 100%; padding:0 1%; }
  17. }
  18.  
Code 8.10   grid.css (combined media query) a

I’ve just ap­plied the media query to mul­ti­ple classes by sep­a­rat­ing them with a comma (this is just like the h1, h2 el­e­ments in § 5.5).

We can also put the rg-col media query on a sin­gle line:

@media only screen and (max-width: 520px) {.rg-col {margin: 0;}}

Keep­ing media queries on a sin­gle line tends to be the norm—I don’t know why, it’s just what peo­ple do—I do think it looks a bit neater though.

8.3.7

Finishing off with the other column arrangements

The next bit is just the boiler plate stuff, we have to repli­cate what we did with rg-span1-5 and rg-span3-5 with all the other com­bi­na­tions; there are a fair few of these, but not an un­man­age­able amount. This is a table of all the dif­fer­ent vari­a­tions with their widths worked out as a per­cent­age using equa­tion (8.6).

Class No. of columns Span arrangement Width (%)
.rg-span1-1 1 column arrangement spans full width 100.00
.rg-span1-2 2 column arrangement spans 1 of the columns 48.27
.rg-span2-2 2 column arrangement spans both columns 100.00
.rg-span1-3 3 column arrangement spans 1 of the columns 31.03
.rg-span2-3 3 column arrangement spans 2 of the columns 65.51
.rg-span3-3 3 column arrangement spans all columns 100.00
.rg-span1-4 4 column arrangement spans 1 of the columns 22.41
.rg-span2-4 4 column arrangement spans 2 of the columns 48.27
.rg-span3-4 4 column arrangement spans 3 of the columns 74.13
.rg-span4-4 4 column arrangement spans all columns 100.00
.rg-span1-5 5 column arrangement spans 1 of the columns 17.24
.rg-span2-5 5 column arrangement spans 2 of the columns 37.93
.rg-span3-5 5 column arrangement spans 3 of the columns 58.62
.rg-span4-5 5 column arrangement spans 4 of the columns 79.31
.rg-span5-5 5 column arrangement spans all columns 100.00
.rg-span1-6 6 column arrangement spans 1 of the columns 13.79
.rg-span2-6 6 column arrangement spans 2 of the columns 31.03
.rg-span3-6 6 column arrangement spans 3 of the columns 48.27
.rg-span4-6 6 column arrangement spans 4 of the columns 65.51
.rg-span5-6 6 column arrangement spans 5 of the columns 82.75
.rg-span6-6 6 column arrangement spans all columns 100.00
Table 8.3   All column variations in the Gerstner grid

I’ve put these into grid.​css; I’ve shown it here, don’t bother typ­ing it in, just down­load grid.​css from the link at the bot­tom—this is the fully com­mented ver­sion (hence the change in the line num­bers).

grid.css
  1. /* **************************************************************
  2.    RESPONSIVE GRID - SPAN CONTROLLS
  3.    **************************************************************
  4.    Each column spans an area of the row, taking a three columns
  5.    width arrangement, this can be arranged in four different ways
  6.  
  7.     - three columns of single column width
  8.       span1-3 (span 1 column of 3)
  9.  
  10.     - one double width column - span2-3 (span 2 columns of 3)
  11.       and a single column (span1-3)
  12.  
  13.     - one single width column - span1-3
  14.       and a double column (span2-3)
  15.  
  16.     - finally a single triple width column
  17.       span3-3 (span 3 columns of 3)
  18.  
  19.      |<------------------- width of screen  ------------------>|
  20.  
  21.      |<--- span1-3 --->| |<--- span1-3 --->| |<--- span1-3 --->|
  22.  
  23.      |<------------- span2-3 ------------->| |<--- span1-3 --->|
  24.  
  25.      |<--- span1-3 --->| |<------------- span2-3 ------------->|
  26.  
  27.      |<----------------------- span3-3 ----------------------->|
  28.  
  29.    The widths of each column are determined by the table in the
  30.    header above and implemented in the following classes.
  31.  
  32.    At screen widths of 520 px and less, all spans are set to 100%
  33.    width (columns stack at this point)
  34.    ----------------------------------------------------------- */
  35.  
  36.  
  37. /* --------------------------------------------------------------
  38.    One column span arrangements
  39.    ----------------------------------------------------------- */
  40.  
  41. .rg-span1-1 { width: 100%; }
  42.  
  43. /* stack columns at <=520 px by making all columns 100% wide */
  44. @media only screen and (max-width: 520px) {
  45.     .rg-span1-1 { width: 100%; padding:0 1%; }
  46. }
  47.  
  48. /* --------------------------------------------------------------
  49.    Two column span arrangements
  50.    ----------------------------------------------------------- */
  51.  
  52. .rg-span1-2 { width: 48.27%; }
  53. .rg-span2-2 { width: 100%; }
  54.  
  55. /* stack columns at <=520 px by making all columns 100% wide */
  56. @media only screen and (max-width: 520px) {
  57.     .rg-span1-2,
  58.     .rg-span2-2 { width: 100%; padding:0 1%; }
  59. }
  60.  
  61. /* --------------------------------------------------------------
  62.    Three column span arrangements
  63.    ----------------------------------------------------------- */
  64.  
  65. .rg-span1-3 { width: 31.03%; }
  66. .rg-span2-3 { width: 65.51%; }
  67. .rg-span3-3 { width: 100%; }
  68.  
  69. /* stack columns at <=520 px by making all columns 100% wide */
  70. @media only screen and (max-width: 520px) {
  71.     .rg-span1-3,
  72.     .rg-span2-3,
  73.     .rg-span3-3 { width: 100%; padding:0 1%; }
  74. }
  75.  
  76. /* --------------------------------------------------------------
  77.    Four column span arrangements
  78.    ----------------------------------------------------------- */
  79.  
  80. .rg-span1-4 { width: 22.41%; }
  81. .rg-span2-4 { width: 48.27%; }
  82. .rg-span3-4 { width: 74.13%; }
  83. .rg-span4-4 { width: 100%; }
  84.  
  85. /* stack columns at <=520 px by making all columns 100% wide */
  86. @media only screen and (max-width: 520px) {
  87.     .rg-span1-4,
  88.     .rg-span2-4,
  89.     .rg-span3-4,
  90.     .rg-span4-4 { width: 100%; padding:0 1%; }
  91. }
  92.  
  93. /* --------------------------------------------------------------
  94.    Five column span arrangements
  95.    ----------------------------------------------------------- */
  96.  
  97. .rg-span1-5 { width: 17.24%; }
  98. .rg-span2-5 { width: 37.93%; }
  99. .rg-span3-5 { width: 58.62%; }
  100. .rg-span4-5 { width: 79.31%; }
  101. .rg-span5-5 { width: 100%; }
  102.  
  103. /* stack columns at <=520 px by making all columns 100% wide */
  104. @media only screen and (max-width: 520px) {
  105.     .rg-span1-5,
  106.     .rg-span2-5,
  107.     .rg-span3-5,
  108.     .rg-span4-5,
  109.     .rg-span5-5 { width: 100%; padding:0 1%; }
  110. }
  111.  
  112. /* --------------------------------------------------------------
  113.    Six column span arrangements
  114.    ----------------------------------------------------------- */
  115.  
  116. .rg-span1-6 { width: 13.79%; }
  117. .rg-span2-6 { width: 31.03%; }
  118. .rg-span3-6 { width: 48.27%; }
  119. .rg-span4-6 { width: 65.51%; }
  120. .rg-span5-6 { width: 82.75%; }
  121. .rg-span6-6 { width: 100%; }
  122.  
  123. /* stack columns at <=520 px by making all columns 100% wide */
  124. @media only screen and (max-width: 520px) {
  125.     .rg-span1-6,
  126.     .rg-span2-6,
  127.     .rg-span3-6,
  128.     .rg-span4-6,
  129.     .rg-span5-6,
  130.     .rg-span6-6 { width: 100%; padding:0 1%; }
  131. }
Code 8.11   The final grid.css code a

So there we are, that is the re­spon­sive grid. This will form the basis of every page in the web­site.

8.3.8

Chrome Inspect Element feature

Chrome has sev­eral use­ful fea­tures for web de­vel­op­ers (let’s call our­selves web de­vel­op­ers, who doesn’t want to be a web de­vel­oper?—it’s nearly as good as being a pi­rate) and we will look at some of them as we progress. The first one I’m going to show you is In­spect El­e­ment; this gives you a lot of in­for­ma­tion about your web page.

Open the web­site (the one we made in the pre­vi­ous sec­tion) in Live Pre­view and make the win­dow quite large (large enough to see the cream coloured edges). Now right click any­where in the page area and se­lect In­spect from the pop-up menu (Fig­ure 8.20).

Figure 8.20 - Chrome, open Inspect Elements

Figure 8.20   Chrome, open Inspect Elements

This will open the In­spect El­e­ments win­dow on the left hand side, it will be sim­i­lar to Fig­ure 8.21; the exact in­for­ma­tion just de­pends where you clicked in the main win­dow.

Figure 8.21 - The Inspect Elements window

Figure 8.21   The Inspect Elements window

The In­spect El­e­ment win­dow has a lot of use­ful in­for­ma­tion; the lit­tle di­a­gram shows the mar­gin, padding and di­men­sions of the el­e­ment clicked.

The thing I want to show you is how you find out how big the browser win­dow is; to do this drag the bar be­tween the web page and the In­spect El­e­ments panel, the mouse will turn into mouse cursor when it hov­ers over the di­vider; I’ve high­lighted it in or­ange in Fig­ure 8.22:

Figure 8.22 - The Inspect Elements window

Figure 8.22   The Inspect Elements browser dimensions

If you drag the di­vider, an in­di­ca­tor will open show­ing how wide and how high the web page is in the browser win­dow, in my case it is 863 px wide by 306 px high. You can just see it on top of the blue Col R bit of the page.

The problem with Inspect Elements

Yes, there is a prob­lem.

The trou­ble is when you use In­spect El­e­ments, it breaks the link to Live Pre­view, this means that any changes you make in Brack­ets no longer au­to­mat­i­cally up­date in chrome. This is a pain, but there is a work around.

If you make a change in Brack­ets while In­spect El­e­ments is ac­tive, just press F5 in Chrome to re­fresh the win­dow, this will then show the changes.

Once you’ve fin­ished with In­spect El­e­ments, kill Chrome and re­trig­ger Live Pre­view in Brack­ets.



End flourish image