10 Best Responsive HTML5 Frameworks

This post was brought to you with help by MightyDeals

MightyDeals provides daily deals for web designers and developers. They can get you discounts up to 97% off on products and services for web professionals.

1. Twitter Bootstrap

Twitter Bootstrap

Bootstrap is a popular, modern front-end/UI development framework. It’s feature-packed and will have most of the things you’ll need for developing responsive sites and apps.

Bootstrap has a 12-grid responsive layout, 13 custom jQuery plugins for common UIs like carousels and modal windows, a Bootstrap customizer, and more.

Bootstrap is well-documented, and this open source project has plenty of coverage in blogs and tutorial sites.

Bootstrap Tutorials

Bootstrap Tools and Resources

Tools/Resources Description
Bootswatch open source, free Twitter Bootstrap themes
Built With Bootstrap showcase of websites and apps that use Bootstrap
Bootstrap Browser Compatibility table showing what browsers Bootstrap supports
Building Twitter Bootstrap how Bootstrap was built
WP-Bootstrap an open source WordPress starter theme built on top of the Bootstrap framework
Font Awesome icon fonts designed for Bootstrap
Official docs of Bootstrap

2. Foundation

Foundation

Foundation is another popular responsive front-end framework. With this modern HTML5 framework, you can approach web design either mobile first, or from big displays down to mobile sizes.

It has rapid-prototyping capabilities, a responsive grid system and much more.

Foundation is by ZURB, a company of product designers focused on providing web-based solutions.

Foundation Tutorials

Foundation Tools and Resources

Tools/Resources Description
Foundation: HTML Templates HTML layout design patterns you can readily use
Foundation Icons Fonts useful set of UI icons
Foundation: Omnigraffle Stencils a template for your wireframes
Official docs of Foundation

3. Skeleton

Skeleton

Skeleton is a simple and clean responsive CSS boilerplate for HTML5 websites and apps. It’s got just the things you need, and nothing more.

Some notable features: a responsive layout grid, standard media queries for your device-specific CSS style properties, a CSS class for responsive image elements that scale with the layout grid, a PSD template for mocking up your web designs, and an HTML5 shiv for old web browsers.

If you want to get started with responsive design quickly, you should look into this open source project.

Skeleton Tutorials

Skeleton Tools and Resources

Tools/Resources Description
Skeleton WordPress Theme WordPress starter theme written using Skeleton
Skeleton Examples & Extensions showcase and a list of projects built with Skeleton
Official docs of Skeleton

4. HTML5 Boilerplate

HTML5 Boilerplate

In 2010, HTML5 Boilerplate became one of the first, and subsequently, most popular open source front-end web development tools for getting HTML5 websites and web apps up and running in no time. It’s a compilation web development solutions that enable our sites to support modern web browsers.

Included in HTML5 Boilerplate is a mobile-friendly HTML template, placeholder icons, CSS resets for normalizing/standardizing your stylesheet property values, standard media queries for popular viewing screens, an HTML5 shiv for non-modern web browsers, and more.

HTML5 Boilerplate Tutorials

HTML5 Boilerplate Tools and Resources

Tools/Resources Description
HTML5 Boilerplate Showcase Tumblr blog featuring websites and apps that use HTML5 Boilerplate
Mobile Boilerplate offshoot of HTML5 Boilerplate specifically for mobile apps
Sites Using HTML5 Boilerplate list of websites that use HTML5 Boilerplate
Official docs of HTML5 Boilerplate

5. HTML KickStart

HTML KickStart

One of the newest kids on the block, HTML5 KickStart is a lean and mean package of HTML, CSS, and JavaScript files that promises to save UI developers hours of work.

At about 300KB, HTML KickStart packs quite a punch: UI components like stylish buttons and navigation bars, scalable icons (using Font Awesome), a responsive grid layout, a touch-enabled slideshow component and so on.

HTML KickStart Tutorials

HTML KickStart Tools and Resources

Tools/Resources Description
Official docs of HTML KickStart

6. Montage HTML5 Framework

Montage HTML5 Framework

Montage is an open source HTML5 framework for building modern apps. This JavaScript library uses declarative binding which easily helps you keep your app data and UI in sync.

Montage also has a feature called Blueprints for associatively binding metadata onto your app objects — a pretty nifty function for dealing with lots of dynamic page elements.

Montage Tutorials

Montage Tools and Resources

Tools/Resources Description
Apps Made with Montage gallery and showcase of live apps that leverage Montage
mop open source tool for minifying your Montage files and customizing your Montage bundles
Official docs of Montage

7. SproutCore

SproutCore

SproutCore is a front-end framework for building HTML5 apps rapidly.

It follows the MVC architecture pattern and promises its users the ability to craft native-like user experiences for the Web.

SproutCore Tutorials

SproutCore Tools and Resources

Tools/Resources Description
SproutCore Showcase demos and examples on this section of SproutCore’s website
Official docs of SproutCore

8. Zebra

Zebra is a rich UI open source framework that leverages HTML5 canvas as the backbone of its rendering abilities.

Zebra says that using it "isn’t rocket science" and that you can get started in 5 minutes.

Zebra Tutorials

Zebra Tools and Resources

Tools/Resources Description
OOP cheat sheet helpful resource for understanding the concept behind Zebra’s object-oriented programming logic
Official docs of Zebra

9. CreateJS

CreateJS

CreateJS is a suite of open source JavaScript libraries and tools for creating rich, interactive HTML5 content. It consists of 5 modular JavaScript libraries. It will help you with implementing animation effects, supporting HTML5 audio in your site, and much more.

Adobe, Microsoft, and AOL sponsor this project.

CreateJS Tutorials

CreateJS Tools and Resources

Tools/Resources Description
EaselJS demos a showcase of the capabilities of one of CreateJS’s JS libraries
CreateJS CDN Libraries a public CDN for serving up your CreateJS files
Official docs of CreateJS

10. Less Framework

Less Framework

Less Framework is a modern front-end framework for building responsive designs. Similar to Skeleton (discussed above), Less Framework focuses on being just a plain and simple layout grid framework.

It has 4 pre-built layouts: Default, Tablet, Mobile and Wide Mobile.

Less Framework Tutorials

Less Framework Tools and Resources

Tools/Resources Description
Frameless Grid grid system concept, a collection of resources, and a good starting point for designers and developers using the Less Framework
Less Grid useful grid overlay to help you develop your layouts
Less Guides 4 Guides for popular Adobe software to help you mock up your layouts
Official docs of Less Framework

Comparison Table

  License Size (MB)* CDN Contr-ibutors Twitter Founder Repo Start Date
Twitter Bootstrap Apache License v2.0 3.15 cdnjs BootstrapCDN 235 @twbootstrap 69,923 followers Mark Otto, jacob (fat) GitHub Aug 2011
Foundation MIT License 2.20 None 237 @foundationzurb 11,326 followers ZURB GitHub Sep 2011
Skeleton MIT License 0.03 jsDelivr 14 @dhg
6,676 followers
Dave Gamache GitHub May 2011
HTML5 Boilerplate Multiple open source licenses .09 None 157

@h5bp
28,221 followers

Paul Irish GitHub Apr 2010
HTML KickStart MIT License 0.30 jsDelivr 11 @htmlkickstart 308 followers Joshua Gatcke GitHub Feb 2013
Montage BSD License 0.89 None 24 @montagejs
83 followers
Multiple GitHub Jul 2012
SproutCore MIT License 10.7 None 126 @SproutCore 2,999 followers Strobe Inc. GitHub 2010
Zebra LGPL 6.82 None 4 @sandtube
0 followers
Andrei Vishneuski GitHub Nov 2012
CreateJS Unknown Various sizes CreateJS CDN Libraries 14 @CreateJS
2,972 followers
Multiple GitHub Mar 2012
Less Framework MIT License 0.007 MB None 2 @lessframework 1,461 followers Joni Korpi GitHub Jun 2011

*Size is determined as the master package’s archive file size on disk (on MS Windows)

What Responsive HTML5 Framework/Boilerplates/Tools Do You Use?

I chose these 10 based on quantitative (i.e. development activity, popularity, etc.) as well as qualitative (such as reputation of the founders and simply personal preference) reasons.

These are my top picks. I’d like to know yours. Please write a review about your favorite open source HTML5 front-end web development framework or boilerplate and please also discuss your personal experience with it in the comments below.

  • Alex

    What about Gumby framework? I recently used it to create a website quickly and although I had some issues with it I quite liked it.

  • Hey Alex, thank you for suggesting Gumby!

    Info about Gumby for those of you who are curious:

  • ali

    we also use Gumby framework in some web sites and its really nice.

  • That’s a wonderful round-up Jacob, thank you for collecting all this information and for the comparison table too, which is very useful and succinct. All of the developers you’ve highlighted here have obviously worked hard to produce something which people can learn, download and use in their projects to everyone’s benefit.

    That’s what the modern web is all about, for me.

  • What a wonderful comment MarkT. I agree 100% with you.

  • Thank you for this very complete article. Personally, I use Foundation, it is very well. I also invite you to read a very good article on responsive web design :
    http://www.vuduweb.fr/lagence-web-kelcible/responsive-web-design/

  • Has nobody heard of this responsive light weight front end html5 framework?
    One file, four components and a plugin system to add just what you need without extra bloat of things not required.

    http://skeljs.org/

    17kb

  • I’d like to add HTML5 Bones as an HTML5 template to check out. I wasn’t able to include it in my original list.

    I like HTML5 Bones because it has the bare essentials, and nothing more (which means less code bloat). Also one of its UVPs is a high emphasis on accessibility, already including some WAI-ARIA roles.

  • Dave Jimenez

    Not sure if http://purecss.io/ qualifies, but it is an awesome framework and very lightweight. I am using it exclusively these days.

  • I agree with Jacob Bones is a great HTML5 framework and it should have a place on this list. I’m personally using Boilerplate and Bones a lot.

  • Great list!

    Just finished my redesign using the IVORY Framework for it’s ease of use! I tried some of the others you listed here. But IVORY works perfect than the others!

  • I agree with Jemma. Just tried Ivory and it’s a very easy to use one. Highly recommended if you are looking for simplicity. I think Get Skeleton also a good choice. Give it a try and see what others think.

  • Jay

    I recently used Bootswatch themes to spruce up one of existing sites with good results. The CDN for Bootstrap/Bootswatch is on BootstrapCDN. Also used Google web fonts (google.com/fonts) also hosted on Google’s CDN. Highly recommend this option.

  • saleem

    Hello,

    Please suggest me which framework is best for responsive in these all.

    Thanks.

  • Gumby 2 is not bad framework for WordPress site. 🙂 Voted for it!

  • I love Bootstrap and Jquery, Thanks Jacob for your article.

  • Marcus

    If you had to chose between Foundation and HTML Kickstart, which would you choose and why?

    Thanks!

  • Dani Chavez

    Another good framework that is not in the list is Groundwork2 I have been working with it very good. Good article

  • Chris Ruralbwoy

    I have test driven quite a lot of frame works but Foundation does it for me.

  • Among all of the frameworks listed above, I think Bootstrap wins the race. It also has variety of plugins and themes available on the net.

  • ines

    I love you!!! Thanks a lot.

  • Must have been added few more, there are plenty of useful frameworks are available now.

  • rad

    Bootstrap FTW, but I find Gumby quite appealing

  • Check out Cascade Framework for a highly modular OOCSS framework that protives an optimal balance between features and footprint.

    If you want just the most basic features, there’s now also Cascade Framework Light.

  • desafecto

    I miss something about “meteor.js”
    Thanks for the article

  • I personally vote for Bootstrap. I used it some of my project and found its a very good framework. Maybe I need to look at Gumby and Foundation as well because most people use these two frameworks as well.
    BTW very nice topics to talk about.

  • Harish Kulal

    Very useful information. The comparison chart really helps in understanding the possibilities and limitations with in the framework.

  • Thank you Jacob for providing all the details. I think, bootstrap and skeleton are topping the rest because I see that in most of the responsive designs. Anyway, I’ve decided to make my new website in bootstrap. 🙂

  • I too think that bootstrap wins the race. I use it quite a lot because of the enormous number of queries for developing responsive sites.

    regards.
    ajoy77.dutta

  • Nice list of frameworks. thx

  • Nikhil

    can we use different frameworks in a single web project?

  • Morteza Ipo

    In many situation , yes! but it depends on your framework actions. some frameworks set automatically attributes to some elements (like bootstrap version 2) , so it will make problem to use several frameworks with each other.

  • Morteza Ipo

    Thank you.
    What about http://semantic-ui.com/ . that is one of the best.

  • I mainly use Twitter Bootstrap, especially latest 3.1.x version is fantastic!! I found also Kickstart to be very simple and great (right now I am integrating a purchased template). While reading the docs it fits my way of working/thinking. It “seems” similar to Bootstrap and more lightweight probably.

    I would like to see a comparison on speed of all these frameworks (found this great post while searching kickstart VS bootstrap).

    Thank you

  • Thank you for this comment! I put the links to the docs because I was under the belief that, as a web developer, the documentation is an important criteria for selecting a solution over another, and you verified this assumption Antonis.

    Great idea regarding speed comparison. Right now, I’m having a hard time designing a performance benchmark test that can compare these projects in an apples-to-apples way.

    The best I can think of is measuring CSS rendering speed and load speed. But my methodology has many, many flaws:

    For CSS rendering speed: As the control, I could have the same layout structure, like a 3-column layout — which would mean I won’t have the exact same markup because the classes will be different, which then introduces variation in my control case — and dummy content, and then measure how fast the entire page renders for each framework. This is tricky because rendering a 3-column layout, etc. will be different for each framework, and the way I would build a 3-column layout might be different from the way you build yours. This all means we don’t have a fixed control case, which leads to uncertainty in the results.

    For load speed (how fast does the entire framework load): This won’t conclusive because there’s so much variation and use-cases between each framework. For example, by default, Bootstrap is already at a disadvantage because it’s big. However, a developer should customize her Bootstrap package to her needs, to make it lighter and thus possibly making it higher-performing than another framework for her use-case. So it would be unfair/inaccurate to say Bootstrap loses over, say, Skeleton, when I used the entire kitchen sink to render a simple 3-column layout using Bootstrap.

    If someone has a good idea of how to test these frameworks, I would love to hear your thoughts! To be honest, I already had the desire to test them and include the data in this post, but I wasn’t smart enough to be able to come up with a good performance benchmark test.

  • Steph

    A new html5 authoring companion for the MontageJS html5 framework, Montage Studio, just launched in beta here: http://www.montagestudio.com/

  • Ioannis

    It is a real treasure!

  • Connell Hunte

    For me Foundation versus bootstrap? Foundation wins hands down. Plugins and themes in my opinion does not make a good framework. Development speed is where Foundation pulls away from the rest of the pack. Gumby was my preference, but found it would give issues at time. Ivory is a great framework.

  • Can u give a link to convert PSD to Bootstrap tutorial?

  • Bootstrap has lot of resources and tools …..

  • Which one of them is the most versatile? Well I think it is Twitter Bootstrap, what do you say?

  • Raj

    Jacob, Great article and what a way to put all of them together, much appreciated. I am mainly a back-end guy, I am using JSF (Java Server Faces) 2 for my application development, I am trying to figure out which UI framework (for rich look & feel) can I use to easily integrate with JSF. I tried Primefaces (there are lot of Pros with that), but your list beats my choice in the Look & Feel.

    Please suggest if you can.
    Thanks
    Raj

  • You forgot Iconic, sculpt and many other html5 responsive frameworks.

  • That’s the great research on responsive frameworks, but it’s now much more difficult to choose one from these.

  • dangsonbk

    It seem unfair when use Tweeter follower to demonstrate how much people use those tools. Anyway, they are all handy and awesome.

  • Thomas Grauer

    I just released an open source responsive framework called HTML5 Spice. Please check it out. http://html5spice.com/index.php

  • adam

    Some of the good responsive websites @ http://responsivecss.net/

  • Zaheer Abbas

    Bootstrap is best from all

  • Ravikumar MS

    Worth info for RWD tools. I used bootstrap recently and it has more set of components and easy to use.

  • sebastian

    I did download Pure, but can`t see another file excelt css.

  • Mark Lexington

    What is this good for now? I’d prefer a comparison matrix like with wikis or linux distributions, because as a starter I can’t choose anymore after reading the article plus the comments…. 🙁

  • Akudo Silas

    I mainly use Twitter Bootstrap, JQuery, and Font Awesome, i find them easy to use and if you ever run into a problem their is an extremely large user community with lots of forums and tutorials to enable you tackle any challenge you may face when using them. they are awesome.

  • KeepUP

    Assolutamente da provare tutti!!

  • parthipan

    may i know what is Gumby frame work?

  • Oshaba Samson

    Materialize is one of the best css framework. I can’t find it on the list

  • amit chauhan

    what about ionic , materializecss , material design lite ?

  • sdfdsf

    n many situation , yes! but it depends on your framework actions. some frameworks set automatically attributes to some elements (like bootstrap version 2) , so it will make problem to use several frameworks with each other.

  • Hi. I use Bootstrap for almost every project that I made…… before I found HTML5 Kickstart and move along with it. 😀
    Anyway, thanks for sharing this! I really appreciate the recommendation and will try another framework mentioned in this article. 🙂