Responsive Web Design Templates and Frameworks

By / Nov 3, 2011 / Resources

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.

  • http://www.ashliewebb.co.uk?utm_source=webdesignerledger.com&utm_medium=comment&utm_campaign=spread%2Bthe%2Bword Ashlie Webb

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

  • http://ianglang.com Ian G. Lang

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

  • http://rupertong.com Rupert Ong

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

  • Chetan

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

  • http://www.natehull.com nate

    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.

  • http://www.oldworldcreative.com Evan ‘OldWorld’ Skuthorpe

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

  • Jeff

    @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!

  • http://www.aledesign.it aledesign.it

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

  • http://twitter.com/sagarranpise Sagar Ranpise

    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/

  • http://www.basictrading.biz mat

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

  • http://www.yourwebdepartment.com Flavio Mester

    This will be very useful for us. Thanks!

  • http://www.kingkroell.co.za Tom | Website Design Durban

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

    • http://www.howtomake.com.ua HTM

      Skeleton, I have not worked in IE7

  • http://www.webflysoftware.com adumpaul

    Nice useful articel.Thank you.

  • Sean Erdrich

    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!

  • James

    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

  • http://www.cginspired.com Chris – freelance web designer

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

  • Erick

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

  • http://twitter.com/#!/MisterMisterAU Matt

    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.

  • http://titanthemes.com Andrei

    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.

  • Prodyot

    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.

  • http://www.themesdesign.org/ Themes Design

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

  • http://www.purencool.com purencool

    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.

  • http://boompah.com Ryan Bollenbach

    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.

  • http://myanmarroom.com ShweRoom

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

  • http://www.grahamrobertsonmiller.co.uk/ Graham Miller

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

  • http://www.sweetmag.my Web Design Malaysia

    anybody have experiences with Fluid Grid?

    not easy to use..