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 Boilerplate
HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-safe site.
- HTML Email Boilerplate
This 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 Boilerplate
Mobile 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 Bootstrap
Simple 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 Boilerplate
Zend Framework (ZF) Boilerplate is an all-in-one platform for development of enterprise grade PHP applications based on the Zend Framework.
CSS
- GetSkeleton
Skeleton 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 Boilerplate
Quick snippet for CSS Media Query setup.
- Boilerplate for Responsive Mobile
YAMP is a small set of tools and best practices that allow web designers to build responsive websites faster.
jQuery
- jQuery Boilerplate
This 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 Boilerplate
A boilerplate for jump-starting jQuery plugins development.
- Essential jQuery Plugin Patterns
A 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 officialjQuery plugin authoring guide offers a great starting point for getting into writing plugins and widgets, but let's take it further.
WordPress
- WordPress Widget Boilerplate
An organized, maintainable boilerplate for building WordPress widgets.
- Root Theme
Roots is a starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter.
- Bones
Bones is a boilerplate for WordPress theme development. It contains classic (fixed grid) and responsive layout to choose from.
- Starkers Theme
Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.
- TwentyTen Five HTML5 Base Theme
Bringing HTML5 to WordPress, you can use this TwentyTen Five WordPress template to build your won HTML themes.
About the Author
Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.