10 Best Responsive HTML5 Frameworks

Trevin is the Sr. Director of Business Development at WebFX. He has worked on over 450 marketing campaigns and has been building websites for over 20 years. His work has been featured by Search Engine Land, USA Today, Fast Company and Inc.

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/ResourcesDescription
Bootswatchopen source, free Twitter Bootstrap themes
Built With Bootstrapshowcase of websites and apps that use Bootstrap
Bootstrap Browser Compatibilitytable showing what browsers Bootstrap supports
Building Twitter Bootstraphow Bootstrap was built
WP-Bootstrapan open source WordPress starter theme built on top of the Bootstrap framework
Font Awesomeicon 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/ResourcesDescription
Foundation: HTML TemplatesHTML layout design patterns you can readily use
Foundation Icons Fontsuseful set of UI icons
Foundation: Omnigraffle Stencilsa 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/ResourcesDescription
Skeleton WordPress ThemeWordPress starter theme written using Skeleton
Skeleton Examples & Extensionsshowcase 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/ResourcesDescription
HTML5 Boilerplate ShowcaseTumblr blog featuring websites and apps that use HTML5 Boilerplate
Mobile Boilerplateoffshoot of HTML5 Boilerplate specifically for mobile apps
Sites Using HTML5 Boilerplatelist 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/ResourcesDescription
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/ResourcesDescription
Apps Made with Montagegallery and showcase of live apps that leverage Montage
Mopopen 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 Guides (sproutcore.com)
  • Build mobile applications with SproutCore (ibm.com)

SproutCore Tools and Resources

Tools/ResourcesDescription
SproutCore Showcasedemos 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/ResourcesDescription
OOP cheat sheethelpful 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/ResourcesDescription
EaselJS demosa showcase of the capabilities of one of CreateJS’s JS libraries
CreateJS CDN Librariesa 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/ResourcesDescription
Frameless Gridgrid system concept, a collection of resources, and a good starting point for designers and developers using the Less Framework
Less Griduseful grid overlay to help you develop your layouts
Less Guides 4Guides for popular Adobe software to help you mock up your layouts
Official docs of Less Framework

Comparison Table

LicenseSize (MB)*CDNContr-ibutorsTwitterFounderRepoStart Date
Twitter BootstrapApache License v2.03.15cdnjs BootstrapCDN235@twbootstrap 69,923 followersMark Otto, jacob (fat)GitHubAug 2011
FoundationMIT License2.20None237@foundationzurb 11,326 followersZURBGitHubSep 2011
SkeletonMIT License0.03jsDelivr14@dhg 6,676 followersDave GamacheGitHubMay 2011
HTML5 BoilerplateMultiple open source licenses.09None157@h5bp 28,221 followersPaul IrishGitHubApr 2010
HTML KickStartMIT License0.30jsDelivr11@htmlkickstart 308 followersJoshua GatckeGitHubFeb 2013
MontageBSD License0.89None24@montagejs 83 followersMultipleGitHubJul 2012
SproutCoreMIT License10.7None126@SproutCore 2,999 followersStrobe Inc.GitHub2010
ZebraLGPL6.82None4@sandtube 0 followersAndrei VishneuskiGitHubNov 2012
CreateJSUnknownVarious sizesCreateJS CDN Libraries14@CreateJS 2,972 followersMultipleGitHubMar 2012
Less FrameworkMIT License0.007 MBNone2@lessframework 1,461 followersJoni KorpiGitHubJun 2011

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

For digital marketing advice on the regular, subscribe to the email that more than 190,000 other marketers trust:

Revenue Weekly. Sign Up Today

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.

WebFX Careers

Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.

We’re Hiring! View 30+ job openings!