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.

Boilerplates

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

Boilerplate Summary

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.

Are you looking for your next role? I work as an Lead Engineer at RVU where we are currently looking for Full Stack software engineers based in our London office. Find out more

Please enable JavaScript to view the comments powered by Disqus.