Development is time consuming and a large portion of a developers time is focused on common tasks rather than building new and unique experiences. As developers we don’t want to waste time on mundane tasks but instead we want to focus on getting the new and interesting stuff right, because honestly, we all love to build something that is cool. The tools we use for frontend development have changed, grown or evolved significantly over the past three years with both the rise of command line tools such as Yeoman, Grunt, and Bower and the growing number of applications such as CodeKit and Hammer.
I am going to be breaking down different areas of frontend tooling into several posts, starting with this post which will cover the boilerplates available to us.
A boilerplate is a template built to provide everything you need to get started, by choosing the correct boilerplate at the start of the project it is possible to save significant amounts of time writing the same code you use on every site. Also if you use the same boilerplate for multiple websites you not only have a consistent base for all your projects you also will learn more about what parts of the boilerplate you use and what you don’t so you can optimise it further.
HTML5 Boilerplate bills itself as a lean, mobile friendly HTML template for getting started on your HTML5 project. It is shaped by the community to encompass best practices with decisions being made through discussions on the projects GitHub issues board.
Advantages of using HTML5 Boilerplate
- Includes latest minified versions of jQuery and Modernizr
- Includes normalize.css
- Includes standard helper classes (including image replacement, clearfix and visually hidden)
- Includes Chrome Frame for IE6
- Includes classes for targetting specific versions of IE in your main CSS document
Disadvantages of using HTML5 Boilerplate
- Includes a lot of features you may not need (so you will need to remove these when you are optimising your site)
Mobile boilerplate is based upon the good work done by the HTML5 Boilerplate team but is more optimised for mobile website development. It aims to allow you to create rich and modern mobile web app that perform well.
Advantages of Mobile Boilerplate
- Optimised specifically for mobile devices – no desktop bloat
- Includes Zepto as an alternative, lightweight alternative to jQuery
- Includes apache settings to enable you to deliver excellent site performance, (other server configs are avaliable independently)
- Includes IE Mobile conditional comment/classes
Disadvantages of Mobile Boilerplate
- Optimised specifically for mobile devices – doesnt have all the optimisations you might need for desktop
- Including Zepto excludes legacy browsers from your site
The responsive boilerplate aims to be a lightweight, micro-framework which includes its own grid system to enable rapid development of responsive websites.
Advantages of Responsive Boilerplate
- Includes a friendly message for your users to update their browsers if they are on an old version
- Provides a minimialistic grid system with 12 columns
- Bundled with PSD template for designers
- Bundled with Sublime Text 2
- Includes HeadJS for script loading
Disadvantages of Responsive Boilerplate
- Does not include Desktop IE conditional comments/classes
- Does not include Mobile IE conditional comments/classes
Email boilerplate is aimed at enabling developers to develop emails faster and with less cross email client testing issues.
Advantages of Email Boilerplate
- Includes the XHTML 1.o Strict doctype
- Includes optimum CSS for displaying images in an email
- Includes a background table and your email table ready for you to get started
- Included Email CSS reset to fix general issues with Outlook, Hotmail and Gmail
- Fixes standard paragraph spacing in Yahoo
Disadvantages of Email Boilerplate
- Includes fixes for issues you may not have which can bloat the code
When it comes to choosing a boilerplate it is important to remember that one size does not fit all, when working with any boilerplate you should ensure that before your code goes live you have removed anything your site does not need. For most sites html5 boilerplate will be perfect however if you are looking at a responsive site you may find that responsive boilerplate is more suitable. Its like shoes, there isn’t one size that fits all.