March 28, 2024

Responsive Web Design Templates and Frameworks

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

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. Jeff Reply

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

  2. Sean Erdrich Reply

    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!

  3. Matt Reply

    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.

  4. Prodyot Reply

    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.

  5. purencool Reply

    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.

  6. Ryan Bollenbach Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *