Build responsive sites using the 320 and up framework

Adopt the 320 and up framework to build flexible layouts that respond and react to desktop, mobile and tablet screens

Build responsive sites using the 320 and up framework

The hottest trend in web design right now is responsive design. Thanks to the powers of CSS3 and HTML5, we can finally embrace the concept of One Web, which lets us build one website that adapts to the device it is being viewed upon. This is necessary since the plethora of devices on the market is ever-growing, and with that we get more and more screen resolutions to take into account. For most projects it just isn’t possible to build a mobile version, an app and then a tablet version, and a desktop one at that – there is no sense in the economy there.

Luckily responsive web design can help, thanks to the possibility to query the screen resolution using   @media and min-width, and then act upon that. This means that we can have one set of styles for resolutions up to 768 pixels, and one for those above, for example.

320 and Up is an interesting framework developed by Andy Clarke that helps you build sites, starting with the most common denominator, which is the smallest screen. Then we add to it with additional styles. This tutorial will help you understand how to start working with it, so that you can apply it to your own projects.

Tutorial files: download.

01. Download 320 and Up

The first thing we need to do is download the 320 and Up framework. At the time of press the most current version available is 0.9, and you can access it directly by visiting

02. Examine the package

The 320 and Up ZIP archive contains two folders, one titled Multiple linked style sheets and one called Single style sheet. These contain different versions of the 320 and Up framework, either as one style sheet or split up into several. The fewer style sheets you use the better, since it makes it easier on the server due to fewer requests, but it also means the files get bigger and perhaps harder to work with. Copy the contents of the Single style sheet folder to a place of your choosing. That’s what we’ll work with.

03. A closer look at the contents

320 and Up is an organised framework, as you’ll see when looking at the contents of the Single style sheet folder. You’ve got your style sheets in a folder called ‘CSS’, images in the ‘img’ folder and JavaScript files in the ‘js’ folder. You’ll also notice ‘index.html’ and ‘404.html’, which will help us create our mobile site.

04. Let’s take a look at ‘index.html’

The ‘index.html’ file is essentially empty of content, the only thing we get is a h1 heading at the top and the basic HTML markup needed. What’s interesting is the actual markup obviously, and the style sheets that make it all happen. Get familiar with ‘index.html’ and, if things like viewport are Greek to you, at least take a look at the page markup, starting with header on line 63, down to the closing off footer on line 78.

05. ‘index.html’ in the browser

Looking at ‘index.html’ in the browser as it is now doesn’t tell us much, but the developer has been kind enough to leave us a grid that we can ”activate”. Open ‘style.css’ (in the CSS folder) and scroll down to line 64. There, uncomment the url(../img/tmp/grid.png) repeat-y 50% 0 part for the html tag. Reloading ‘index.html’ in the browser will show a grid image being repeated, which will be helpful as we go along.

06. Let’s add some content

Let’s add some content to ‘index.html’. First of all, change the contents of h1 (on line 64) to something else, and then put a few simple paragraphs within the <div role=”main”> tag on line 69. Dragging the Browser window now will just let the content flow to almost full width.

07. Populate the other columns

To really get an idea of how things relate to each other, let’s add some paragraphs to the <div role=”complementary”> as well. Then, while we’re at it, put something within the <footer role=”contentinfo” class=”clearfix”>, preferably something that tells you it is from the footer.

08. It doesn’t work!

Taking a look at ‘index.html’ as it is now, you’ll notice that nothing aligns – the content is just presented in one long column. That’s because 320 and Up doesn’t come littered with stylings for your desktop experience.

09. Find our way in the style sheet

If you want to learn a thing or two on how to organise a style sheet, look no further than to ‘style.css’. There’s even an index at the start of the file, which is nice. Consult it to find your way in the file.

10. Let’s add some style

In ‘style.css’, you’ll find that the media queries start at line 423. There you’ll find a placeholder for adding styles for screens larger than 480 pixels (min-width: 480px is the rule). Let’s make some changes to the h1 tag here, shall we? The added code changes the h1 color to blue, gives it padding and a line below it whenever the screen is more than 480 pixels. Obviously we could add more, but this will do for this particular size.

001 /*480px ______________ */
 002 @media only screen and (min-width: 480px) {
 003 /* 2.HEADINGS */
 004 h1 {
 005 color: blue;
 006 padding-bottom: .1em;
 006 border-bottom: 1px solid #bbb;
 007 }

11. Column markup

If you drag your Browser window right now, you’ll find that larger screens also inherit the style we added in step 10. That’s because we’re designing from the small screen out. Next resolution is 768 pixels upwards (line 453 in ‘style.css’), so let’s make this the point where we start using columns. First, open ‘index.html’ and find <div role=”main”>, to which you’ll add class=”content-main”. Then do the same with <div role=”complementary”> but add class=”content-complementary”. This will make it easier for us to style the div containers using CSS.

12. Add the main column style

Next, go back to ‘style.css’ and the @media rule for min-width: 768px (and up). Here, under ”11. MAIN”, we’ll add the necessary style to float the div.content-main container left.

001 /* 11.MAIN */
 002 div.maincontent {
 003 float: left;
 004 width: 65%;
 005 }

13. Add the secondary column style

Now, let’s give the secondary column, the one with the role ”complementary” in ‘index.html’, float: right and a better suited width. In fact, let’s also make sure that the font size differs and the color is dark grey rather than black as the main content. Refer to ”3. TYPOGRAPHY” and ”12. COMPLEMENTARY” in the code below, still within the @media rule with
min-width: 768px, of course.

001 /*768px ___________ */
 002 @media only screen and (min-width:     768px) {
 003 /* 3.TYPOGRAPHY */
 004 div.complementarycontent p {
 005 font-size: 0.9em;
 006 color: #666;
 007 }
 008 /* 11.MAIN */
 009 div.maincontent {
 010 float: left;
 011 width: 65%;
 012 }
 013 /* 12.COMPLIMENTARY */
 014 div.complementarycontent {
 015 float: right;
 016 width: 30%;
 017 }
 018 }/*/mediaquery*/

14. Draw the line

There are several sizes beyond min-width: 768px, but chances are you want to draw the line somewhere as to how wide your site can be. We’ll do that in the @media query with min-width: 992px, setting the maximum allowed width to 960 pixels. While we’re at it, let’s also make that blue h1 heading a bit larger, shall we?

001 /*992px ____________ */
 002 @media only screen and (min-width:     992px) {
 003 /* 1.ROOT */
 004 body {
 005 max-width: 960px;
 006 }
 007 /* 2.HEADINGS */
 008 h1 {
 009 font-size: 4em;
 010 padding-bottom: .5em;
 011 }
 012 /* 17.MODERNIZR */
 013 }/*/mediaquery*/

15. Add an image

Images need some love if they are to fit to the screen size. Let’s open ‘index.html’ and add one to the HTML markup, between two paragraph tags in the main div container. For demonstration purposes, we added ‘image.jpg’ to the img/tmp/ folder.

16. Scale the image

We need to make sure that the image scales with the content. The solution is to give all img tags max-width: 100%, which will make sure that it never exceeds its wrapping container’s width. Adding max-width: 100% to img on
the screen sizes you want this behaviour on is easy, of course. You might want it to be a global thing, in which case you would add it to the img tag globally.

001 div.content img {
 002 max-width: 100%;
 003 }

17. Hide an element

Let’s say that we don’t want to show the complimentary column’s content if the screen width is smaller than 480 pixels. We do this with display: none applied to div.complimentarycontent, which will stop it from rendering. To make it work, we first must add it under ”12.COMPLIMENTARY” on line 255 in ‘style.css’, to make it a starting point.

001 /* 12.COMPLIMENTARY */
 002 div.complimentarycontent {
 003 display: none;
 004 }

18. Show the element when needed

So now div.complimentarycontent is hidden on small screens, and since that is where the code begins, all other resolutions will inherit it. To sort that out we’ll have to add display: block to div.complimentarycontent at the @media rule, where we want it to start appearing. In this case, that would be at min-width: 768px, where we’ll add display:block to the already present stylings of div.complimentarycontent.

001 /*768px ______________ */
 002 @media only screen and (min-width: 768px) {
 003 /* 3.TYPOGRAPHY */
 004 div.complimentarycontent p {
 005 font-size: 0.9em;
 006 color: #666;
 007 }
 008 /* 5.FIGURES & IMAGES */
 009 div.content img {
 010 max-width: 100%;
 011 }
 012 /* 11.MAIN */
 013 div.maincontent {
 014 float: left;
 015 width: 65%;
 016 }
 017 /* 12.COMPLIMENTARY */
 018 div.complimentarycontent {
 019 display: block;
 020 float: right;
 021 width: 30%;
 022 }
 023 /* 17.MODERNIZR */
 024 }/*/mediaquery*/


Take control of your backgrounds with CSS3

Cross-browser fonts and CSS styling rules