16 Useful Boilerplates to Start Your Project Quickly

Written by Kevin Liew on 05 Mar 2012
127,926 Views • Web Development

Introduction

Boilerplate is a set of code that can be reused in many ways with little or no alteration. However, the boilerplates we are talking about here usually can be used as a base, a solid foundation for your projects. Additional benefit, it's also a good place to learn tips and tricks about coding too!

Boilerplate is extremely useful because it usually comprise of best coding practices, and also contain heaps of tips and tricks which otherwise would take years of times to learn. Take HTML Email Boilerplate as an example, building an eDM isn't easy, it requires one to go back to HTML 1.0, no more div, span or high level CSS settings such as float, position etc, what you need is table for layout, inline CSS for simple styling. To make building an eDM even worse, email clients have strict restriction and they don't behave the same, as if you're working with more than one legacy browsers that all render the page differently! With the Email boilerplate, it contains CSS settings HTML structure and even some tips and tricks to help and guide you how to avoid redering inconsistencies issues.

With no further a do, I have collected 16 boilerplates for different web technologies, platforms - HTML, CSS, jQuery, WordPress and etc. They enforce best practices and constant updates and I pretty sure it will be a really good foundation for your projects.

HTML & Miscelaneous

  • HTML5 BoilerplateHTML5 BoilerplateHTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-safe site.
  • HTML Email BoilerplateHTML Email BoilerplateThis website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc. This is a good stuff, I use it in my work and it contains a lot of tips and tricks which save you heaps of times to fix it yourself.
  • HTML5 Mobile BoilerplateHTML5 Mobile BoilerplateMobile 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.
  • Twitter BootstrapTwitter BootstrapSimple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. Not really a boilerplate, but it has a lot of reusable component for fast prototyping or development.
  • Zend Framework BoilerplateZend Framework BoilerplateZend Framework (ZF) Boilerplate is an all-in-one platform for development of enterprise grade PHP applications based on the Zend Framework.

CSS

  • GetSkeletonGetSkeletonSkeleton 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. Skeleton is built on three core principles: Responsive Grid Down to Mobile, Fast to Start and Style Agnostic.
  • CSS Media Queries BoilerplateCSS Media Queries BoilerplateQuick snippet for CSS Media Query setup.
  • Boilerplate for Responsive MobileBoilerplate for Responsive MobileYAMP is a small set of tools and best practices that allow web designers to build responsive websites faster.

jQuery

  • jQuery BoilerplatejQuery BoilerplateThis project won't seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template for beginners and above.
  • Stefan Gabos jQuery Plugin BoilerplateStefan Gabos jQuery Plugin BoilerplateA boilerplate for jump-starting jQuery plugins development.
  • Essential jQuery Plugin PatternsEssential jQuery  Plugin PatternsA javascript pattern for jQuery plugin development. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide offers a great starting point for getting into writing plugins and widgets, but let’s take it further.

WordPress

  • WordPress Widget BoilerplateWordPress Widget BoilerplateAn organized, maintainable boilerplate for building WordPress widgets.
  • Root ThemeRoot ThemeRoots is a starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter.
  • BonesBonesBones is a boilerplate for WordPress theme development. It contains classic (fixed grid) and responsive layout to choose from.
  • Starkers ThemeStarkers ThemeStarkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.
  • TwentyTen Five HTML5 Base ThemeTwentyTen Five HTML5 Base ThemeBringing HTML5 to WordPress, you can use this TwentyTen Five WordPress template to build your won HTML themes.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

4 comments
Sten Hougaard 12 years ago
Well, thank you! Getting started based on common patterns will make you avoid most common problems. Why waste time doing the errors which other people have allready solved? Thats why I will book this page right away! :-)
Reply
doug 12 years ago
Thank you for this great post; I will be using at least 5 of these to study for some projects coming up.
Reply
Rob Admin 11 years ago
That jQuery plugin boilerplate on this list is weak, it's pretty old, there are better ones out there like http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate and
http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate
Reply
Leigh@boiler repair 10 years ago
As a regular user of boiler all the above boiler plats are really useful for us . I am already use most of the above boiler plats and I am really satisfy with that. Thanks to the admin for sharing those above thoughts with us.

http://www.london-boiler-repair.co.uk/
Reply