Responsive Web Design Templates and Frameworks

By / Nov 3, 2011 / Resources
shares

Eventually, we’ll all stop talking about responsive web design – not because it will go away, but because it will become what’s expected. Flashback ten years ago and we were all talking about CSS and tableless design, but today there’s no need to mention it. It’s simply the way modern websites are built, although sadly, I’m sure there’s a few out there still using tables.

Nevertheless, the concept of responsive web design is still relatively new. So it’s our job to help you learn about it and to help you find the stuff that makes building responsive sites easier. For this post we’ve gathered a collection of Responsive Web Design Templates and Frameworks.

Mobile Boilerplate

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Responsive Web Design Templates and Frameworks

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Responsive Web Design Templates and Frameworks

Hardboiled CSS3 Media Queries

These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.

Responsive Web Design Templates and Frameworks

tiny fluid grid

The happy & awesome way to build fluid grid based websites.

Responsive Web Design Templates and Frameworks

FluidGrids

A CSS framework for rapid interactive prototyping.

Responsive Web Design Templates and Frameworks

Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Responsive Web Design Templates and Frameworks

CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Responsive Web Design Templates and Frameworks

inuit.css

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

Responsive Web Design Templates and Frameworks

flurid

A cross-browser CSS grid framework that doesn’t hide pixels in margins!

Responsive Web Design Templates and Frameworks

Fluid Grid

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones.

Responsive Web Design Templates and Frameworks

320 and Up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

Responsive Web Design Templates and Frameworks

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

27 Comments

  1. Ashlie Webb
    November 3, 2011

    This is gold. I’ve been trying to bring clients and colleagues into thinking responsively for over a year now.
    Thanks!

    Reply
  2. Ian G. Lang
    November 3, 2011

    Great resources! I’ve used some of them myself and now have my own proprietary one.

    Reply
  3. Rupert Ong
    November 3, 2011

    Has anyone tried Foundation by Zurb? http://foundation.zurb.com/

    Reply
  4. Chetan
    November 3, 2011

    I’m surprised the list is missing the current darling of the responsive movement: ZURB’s Foundation framework http://foundation.zurb.com/

    Reply
  5. nate
    November 3, 2011

    yep. People accessing the web from computers is becoming less by the day. In a couple years tablets and phones should have the market share.

    Reply
  6. Evan ‘OldWorld’ Skuthorpe
    November 3, 2011

    A nice collection. I also like simplegrid, it’s a very nice framset.

    Reply
  7. Jeff
    November 3, 2011

    @Rupert Ong I’m developing a site with Foundation by Zurb right now. I’m having to do some tinkering here and there, but overall i’m very happy with it. It’s exactly what it says it is – a “foundation”. It’s like the HTML5 boilerplate plus base styles & js for elements you’ll commonly use.

    Checkout the source from Git, all the stylesheets and js are separated so you can easily strip out the features you don’t want (I removed their reveal and orbit plugins). There’s a few other things, like removing the console logging in app.js (IE doesn’t like), etc… Pretty sure it’s still a work in progress, so it’s bound to get better and better! Oh, and the mobile styles are pretty nice too!

    Reply
  8. aledesign.it
    November 3, 2011

    A good selection of resources for these last times! Thanks for sharing! Add to bookmark!

    Reply
  9. Sagar Ranpise
    November 4, 2011

    Awesome Resource for Responsive Technique! I have also created a post on responsive html5 page. I hope you like it!

    http://www.alldesignstuffs.com/2011/creating-responsive-html5-page-using-media-queries/

    Reply
  10. mat
    November 4, 2011

    don’t miss the Hive Responsive Grid system written for scss and sass
    http://spleenteo.github.com/hive/

    Reply
  11. Flavio Mester
    November 4, 2011

    This will be very useful for us. Thanks!

    Reply
  12. Tom | Website Design Durban
    November 7, 2011

    Currently using Skelelton and works great for us! Definitely a standard part of a high quality website build

    Reply
    • HTM
      December 8, 2011

      Skeleton, I have not worked in IE7

      Reply
  13. adumpaul
    November 9, 2011

    Nice useful articel.Thank you.

    Reply
  14. Sean Erdrich
    November 20, 2011

    Sweet. I had done some research on Skeleton a few weeks back, but hadn’t heard of these others. Speaking of Skeleton, I just got finished building my first responsive site that uses Skeleton. It (skeleton) works fantastically and is very easy to use once you understand how to use it.

    Additionally, the developer of skeleton was very helpful when I hit a small stumbling block.

    Thanks again!

    Reply
  15. James
    November 24, 2011

    So great! I love Skeleton http://www.getskeleton.com, you can easily create a responsive layout. I have made a simple UI to make it even easier for designers and developers
    http://www.responsivedesign.co.nz

    Reply
  16. Chris – freelance web designer
    December 4, 2011

    Great list, just built my portfolio site using the 1140 grid, was very easy to use once you get your head around it!

    Reply
  17. Erick
    January 17, 2012

    + for Foundation and Less Framework. Both work well for us.

    Reply
  18. Matt
    January 30, 2012

    Currently using Skeleton to create my own Drupal theme. So far so good. Too bad about the MIT license, would have like to have created a theme available to all once I was done.

    Reply
  19. Andrei
    February 21, 2012

    Hey guys, I recently built a responsive CSS framework located at http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs. Unlike other responsive CSS frameworks this framework ajdusts on any screen size (not only mobile and tablets) and you are not limited by a fixed width. It has 12 and 16 columns versions. You can see SmashingMagazine’s website to understand how it works.

    Reply
  20. Prodyot
    February 23, 2012

    Great list.
    Thanks for sharing the collection.
    I recently discovered a great responsive boilerplate called “Yet Another Mobile Boilerplate” (YAMB which practices mobile-first approach but is equally elegant in wider view-ports.

    Reply
  21. Themes Design
    February 23, 2012

    This is good job, i also published something similar in my blog, Please check.
    Regards

    Reply
  22. purencool
    March 24, 2012

    I have started using omega as my theming framework in Drupal as because of of its versatility and it has templates in html5 and CSS3. To deploy a website design in Omega has really helped me make our clients online vision a reality.

    Reply
  23. Ryan Bollenbach
    March 24, 2012

    Hi Henry,

    Very cool article – I love using responsive web design frameworks.

    I’ve created this article: Responsive Web Design Frameworks, Grid Systems and Starter Kits.

    http://boompah.com/2012/03/22/responsive-web-design-frameworks-and-dev-kits/

    I essentially go through the differences between several responsive solutions, outline the benefits of each and I have a small guide to selecting which one is right for your project at hand.

    Please check it out,

    Cheers.

    Reply
  24. ShweRoom
    May 11, 2012

    Cheer up!
    Awesome resources! Please write up a article for responsive design framework comparison.

    Reply
  25. Graham Miller
    June 21, 2012

    Can you please add http://www.responsivegridsystem.com to the article? It wasn’t around when you made your list…

    Reply
  26. Web Design Malaysia
    September 25, 2012

    anybody have experiences with Fluid Grid?

    not easy to use..

    Reply

Leave a Reply