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

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

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

---

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

---

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

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

---

JQuery

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/

---

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

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.

[cm_email_form title=”Get the newsletter!” subtitle=”A once a week email with just pure awesome links to the best news and articles about web design.”]