Build responsive sites using the 320 and up framework

You may also like...

  • 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()

  • Sean

    Good article, only thing that would make it better is if the download link worked. For those looking go to the project homepage @


  • 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

    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%;
    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?

  • 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!.

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