Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
2nd January 2012

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

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.

tools | tech | trends: HTML, CSS, JavaScript, 320 and up (framework)
expert: Thord Daniel Hedengren
tutorial files: download

01. Download 320 and Up
Build responsive sites using the 320 and up framework
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 http://stuffandnonsense.co.uk/projects/320andup/latest.zip

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
Build responsive sites using the 320 and up framework
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!
Build responsive sites using the 320 and up framework
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
Build responsive sites using the 320 and up framework
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
Build responsive sites using the 320 and up framework
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
Build responsive sites using the 320 and up framework
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
Build responsive sites using the 320 and up framework
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
Build responsive sites using the 320 and up framework
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*/

RELATED ARTICLES

Take control of your backgrounds with CSS3

Cross-browser fonts and CSS styling rules

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://AlchemyUnited.com Mark Simchock

      This overview was helpful in terms of a tool for implementation. Thanks.

      However, it would be helpful to see more discussion of the step prior and that decision making process. For example, it was said, “Let’s say that we don’t want to show the complimentary column’s content if the screen width is smaller than 480 pixels.” That’s a great idea but then what? Just leave the extra column out?

      Don’t get me wrong, I understand context (read: device) impacts experience. None the less, if content is going to hit the editing room floor at 480 and below, perhaps it’s not worth of 480 and above either? Would it really be a sin to do a single site in 480? At least then the UX would be 100% consistent? In a multi-device world is it really fair to expect someone to relearn a site over and over?

    • Pingback: Responsive Website Design

    • Pingback: Build responsive sites using the 320 and up framework | Lee Sands At Sazies

    • http://www.ofogi.com Sean

      Good article, only thing that would make it better is if the download link worked. For those looking go to the project homepage @ http://stuffandnonsense.co.uk/projects/320andup/

      -cybersholt

    • Iggy

      to expand on your bit here….

      I have added colors to each of the h1 tags for each of the ‘media queries’ for the different screen sizes…

      so as to see exactly how the h1 element will load at each page size

      later also added h1 font size – it seems ff only sees the initial media query?? and loads the font color and size for 480 – then nothing regardless of the screen resizings

      ie8 works ok…

      the how do we get this to actually work?

      seems like a great tool…

      huge thanks

      Iggy

    • Iggy

      been working on this most of the day… now have colors working on h1 tag…

      but not showing 2 columns…

      i see this: div.content-main container left.

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

      i changed oo2 to div.content-main and down the line… div.complimentarycontent to div.complimentary-content which is what is in current index file — and am unable to get the page to show columns with this:

      /*768px ___________ */
      @media only screen and (min-width: 768px) and (max-width : 991px){
      /* TYPOGRAPHY */
      div.content-complementary p {
      font-size: 0.9em;
      color: #666;
      }
      /* MAIN */
      div.content-main {
      float: left;
      width: 65%;
      }
      /* COMPLIMENTARY */
      div.content-complementary {
      float: right;
      width: 30%;
      }
      /* HEADINGS */
      h1 {
      font-size: 55px;
      color: red;
      padding-bottom: .1em;
      border-bottom: 1px solid #bbb;
      }
      }

      any idea what is wrong?

    • http://blog.tangyandbrightdesigns.com Mena

      this was very easy to learn and adapt to. i had a bad luck understating it until now.
      is there more tutorials about responsive designs ?

    • Paul

      Very cool stuff!, i have built a responsive design site from scratch and ahhhhhh, i cant believe i didnt see this sooner. Its like a really big reset.css with a very well thought out index for css, this is gonna save so much time.

      I have followed the tutorial exactly but just wondered if anyone has had the issue of showing the image in ie9, ie8, ie7, the outline of the image is there with the broken icon and the alt tag?.

      Is it just me?, ill find a fix and share here if anyone beats me please share.

      Thanks for the great article!.

    • http://surrey-webdesign.net Simon

      320 and up is a very nice package, very clearly written and comes with everything that you would need to build a responsive site, Including icons and graphics for subscribed websites.

      I personally found it very easy to use, images are still an issue but I cant see this being developed around in the near future.