The Best of the Best Boilerplates / Bootstraps

Boilerplates, bootstraps or whatever you want to call them have become a valuable resource for any web developer. Not only do they provide great knowledge into the best practices to use, they also save us vast amounts of time.

Back in the day, there was great pleasure in coding something up from scratch. In this day and age, I think most people are more than happy to start with a base, whatever that base might be. All of the resources listed below can be used in any way that suits you.

You could quickly prototype a concept with Twitter Bootstrap to persuade a client to go for a responsive design. You could develop your first jQuery plugin from the jQuery Boilerplate which will give you a solid understanding of how a plugin should be structured, or you could dig into the documentation of the HTML5 Boilerplate to learn more about a particular piece of code you are not familiar with.

When it comes to using such resources, there are no hard and fast rules on how you should use them (or use them at all), but the intention of all the people that are involved in creating these wonderful projects is to help others develop better code, pass on their knowledge and to save you time.

If you haven’t experimented with using such resources, I would highly recommend you take the time to check them out and adapt your developing workflow. You might be amazed….

Also, 99% of the projects are open sourced and are hosted on Github. So if you feel like you can improve them, be sure to get involved.


HTML/CSS/JavaScript

HTML5-Boilerplate

HTML5 Boilerplate is the professional frontend developers’ base HTML/CSS/JS template for a fast, robust and future-safe site.

After more than four years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain XHR and Flash. A starter Apache .htaccess config file hooks you up with caching rules and preps your site to serve HTML5 video, use @font-face, and drop your site’s filesize by half with robust gzipping.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

URL: html5boilerplate.com
Github: github.com/h5bp/html5-boilerplate


Twitter Bootstrap

Twitter Bootstrap provides simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. In other words, it’s a front-end toolkit for faster, more beautiful web development. It’s created and maintained by Mark Otto and Jacob Thornton at Twitter.

URL: twitter.github.com/bootstrap/
GitHub: github.com/twitter/bootstrap


Foundation

Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time.

URL: foundation.zurb.com/
Github: github.com/zurb/foundation


CSS

Normalize

Normalize.css – a modern, HTML5-ready alternative to CSS resets. It is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.

URL: necolas.github.com/normalize.css/
Github: https://github.com/necolas/normalize.css


Blueprint CSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

URL: blueprintcss.org/
Github: github.com/joshuaclayton/blueprint-css


Compass

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.

URL: compass-style.org/
Github: github.com/chriseppstein/compass


Mobile

Mobile Boilerplate

Mobile Boilerplate is a professional front-end template that helps you build fast and robust mobile web applications. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile. You get an offline caching setup for free, fast button clicks, a media query polyfill, and many common mobile WebKit optimizations waiting for you. Use Mobile Boilerplate to start your mobile webapp quickly and immediately benefit from community best practices.

URL: html5boilerplate.com/mobile
Github: github.com/h5bp/mobile-boilerplate


Email

HTML Email Boilerplate

The HTML Email Boilerplate has lots of great code examples as a guideline for formatting your HTML email. You can create your own template based on the snippets or just pick and choose the ones that fix your specific rendering issue(s). It will help you avoid some of the major rendering problems with the most common email clients.

URL: htmlemailboilerplate.com/


WordPress

_s theme

A starter theme called _s (or underscores) developed by the Automatic team. A theme designed for hacking. Turn it into the most awesome, WordPress theme out there.

Github: github.com/Automattic/_s


Bones

Bones is designed to make the life of developers easier. It’s built using HTML5 & has a strong semantic foundation. It users some of the HTML5 Boilerplate’s recommended markup and setup. Developed by Eddie Machado who is updating it on regular basis and is always up for people contributing.

URL: themble.com/bones/
Github: github.com/eddiemachado/bones


Toolbox

A semantic, HTML5, canvas for CSS artists and an ultra-minimal set of super-clean templates for your own WordPress theme development.

URL: wordpress.org/extend/themes/toolbox


WordPress Plugin Boilerplate

The WordPress Plugin Boilerplate is an organized, maintainable boilerplate for building plugins using WordPress best practices.

Github: github.com/tommcfarlin/WordPress-Plugin-Boilerplate


JQuery

jQuery Boilerplate

A boilerplate for jump-starting jQuery plugins development. This project won’t seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template.

URL: jqueryboilerplate.com/
Github: github.com/zenorocha/jquery-boilerplate/


jQuery plugin patterns

Addy Osmani’s collection of various plugin patterns. Some patterns may work better for structuring solutions to a particular problem or component than others. Some developers may wish to use the widget factory. Some may not. Some might like to take advantage of nested namespacing patterns. Some might want to use custom events or pub/sub to communicate from plugins to the rest of their app. Some may prefer using extend patterns and so on.

Addy’s project doesn’t seek to provide solutions to every possible pattern, but it attempts to cover the popular patterns developers often use in the wild.

Github: github.com/addyosmani/jquery-plugin-patterns

<hr


Backbone

Backbone

This boilerplate will help you organise your application in a logical filesystem, develop your Models/Collections/Views/Routers inside modules, and build knowing you have efficient code that will not bottleneck your users.

Github: github.com/tbranyen/backbone-boilerplate


No developer wants to be spinning their wheels, or operating on mundane tasks when they could instead be creating rich and compelling experiences.

Smart developers work with smart tools, effective workflows, and wise strategies for development.

– Paul Irish

The above list is a selection of my personal favourites that I have used in some way or another during the last couple of years. No doubt this will change over time as new ones get released or projects become inactive.

If you use a resource that you find valuable, be sure to share it below.

9 Comments

  1. Great article, great resources, Thx

  2. Thanks for article. Now I diving into Bootstrap. It’s very interesting.

  3. Nice collection.. Thanks

  4. Thanks dude for this post, Bootstrap is a cool thing and a very interesting :)
    Excellent article, cheers.

  5. Great article, thanks man. I am a Twitter Bootstrap man myself.

  6. I should probably add Kickstart as well from http://www.99lime.com/elements/ . Almost similar to Bootstrap.

  7. I’ve found http://www.builtwithhtml5boilerplate.com useful for boilerplate examples and http://www.builtwithbootstrap.com good for bootstrap. These are usually my go to foundations as there is so much support out there for them,

This post currently has 9 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

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

Current ye@r *