Blogs

An Introduction to HTML5 Boilerplate

Kerry Butters
Share

Even for the most skilled of designer veterans, getting started with a new standard can be a daunting affair, even when a language is designed to make coding easier, such as HTML5. Saying that, a thorough knowledge of HTML 4.01 is something that can be built upon, it’s just a case of knowing which tags are in and which are out.

HTML5 Boilerplate helps designers to get started with the new standard by offering a professional front-end template that allows you to create a fast, robust and adaptable site with a set of HTML5-ready features and elements.

It was created by Paul Irish and Divya Manian and is an open source project that is perfect for creating cross-browser sites that work with older browsers, while being HTML5 ready.

It can be downloaded from the HTML5 Boilerplate website in its full form, or a stripped down version that doesn’t include all of the explanatory documentation. The lighter version is recommended for those who have worked with it before and can be used once you’re familiar with the template. For those of you that are confident you can work with it fully, there’s also a customizable option that allows you to choose the elements you need.

What’s in the box?

Core features to be found in HTML5 Boilerplate include all of the necessary elements that you will need to begin, as well as supporting documentation:

  • HTML
  • CSS
  • JavaScript
  • .htaccess (Apache web server configuration)
  • Crossdomain.xml
  • Miscellaneous (ignore file, gitignore and so on)

Modernizr is also included in order to allow you to style the new HTML5 elements in IE and helps with detecting HTML5 or CSS3 features in all browsers, including earlier versions of IE (before v9).

Let’s look first at the HTML, which at its core is comprised of a number of IE conditional comments for relevant IE-specific classes and CSS for older versions of IE. These allow for a certain number of benefits to the designer using the conditional classes technique, such as easier integration with CMSs like WordPress and Drupal.

It also fixes a lot of the CSS for older versions of IE, as well as IE classes that apply to the tag. This validates as HTML5 and the no-js class allows you to add custom styles when JavaScript is enabled or disabled in the end-user browser. The HTML also includes the same elements as Modernizr and Dojo, as well as options for Google Frame, Google CDN for jQuery, and Google Analytics Tracking Code in the content area.

You can also use HTML5 Boilerplate with Initializr (get the demo page here), which generates templates based on Boilerplate that allow you to choose the elements you want and those you don’t. With this, you also have the option of using a responsive template from the outset, rather than starting with a blank page.

Getting started

Once you’ve downloaded HTML5 Boilerplate, it’s time to set up the basic structure of the site, add content, style and functionality and start testing! The basic structure will look something like the below in the first instance: 

.
├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .htaccess
├── 404.html
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
└── [apple-touch-icons]

So, let’s look at how these can be used, starting with CSS, the directory which should contain all of your site’s CSS files. Note that this directory already includes some CSS to help you get started, as well as the normalize CSS.

The starting CSS includes:

  • HTML5 Boilerplate defaults
  • Common helpers
  • Placeholder media queries
  • Print styles

This doesn’t rely on conditional classnames, conditional style sheets or Modernizr and can be used ‘out of the box’, whatever your development preferences.

Common helpers

The .ir class can be added to elements that you’re applying image-replacement to. When replacing content with an image, it’s necessary to set a specific width and height element so that the image appears.

.ir {
background-image: url(http://yoursite.com/images/logo.jpg);
background-size: 100% auto;
width:450px;
height:450px
}

To detail snippets for all of the CSS classes would involve an awful lot of text, so we’ll look at the most relevant. However, bear in mind that the following classes exist:

  • .hidden (add to any elements you want to hide)
  • .visuallyhidden (hides text from browsers but makes available to screen readers)
  • .invisible (add to any element to hide without affecting layout)
  • .clearfix (adding ensures that any floated children are contained within an element)
  • Paged media styles (only supported in a few browsers)

Media Queries

One of the beautiful things about HTML5 Boilerplate is that it makes it a simple matter to get started with ‘Mobile First’ and RWD sites. However, not everyone would agree that using media queries is the best approach, as discussed by Jason Grigsby in 2010.

In HTML5 Boilerplate, placeholders are included to help build mobile styles for different resolutions and screen sizes. The documentation recommends that you adapt media queries based on the site content, rather than “mirroring the fixed dimensions of specific devices”.

While I believe that the ‘mobile first’ approach is a sensible one these days, not everyone will want to take that approach and if you are one of them, then you can just edit or remove the placeholder media queries. For mobile apps, you may want to take a look at Mobile Boilerplate.

Print styles

These strip away all of the background colors and change fonts to dark gray with no shadow in order to help end-users save on printer ink. They are also designed to reduce the number of pages in order to reduce paper usage, a handy little selling point for those clients that are interested in the environment!

print styles

Other directories

The JS directory also includes some initial code to help you get going as well as being the place where you will want to store all of the site’s JS files, libraries and plugins. The .htaccess directory contains the default server configuration for Apache servers; if you want to use a different set up, then you can find them here.

There is also a very basic 404 page that you can adjust to suit, as well as the obligatory index.html file that contains the bare bones necessary to get you started on building all of your pages.

Icons

Boilerplate also provides a ‘starter set’ of favicon and apple touch icons that you can replace with your own. The apple touch icons also work with numerous browsers and devices, according to Boilerplate developer Paul Irish, who also helpfully provides a walkthrough of the code.

A quick web search will show that it’s quite difficult to find anyone that doesn’t have a good word to say about HTML5 Boilerplate and that it has generated a good few articles on the best snippets to use.

There’s no doubt that the template makes it easier to begin coding in HTML5 and what’s more, newer elements are simple to work with and can make for a great-looking site.

Example website

1.21 Jiggawatts

A quick peek at the code tells you all you need to know at 1.21 Jiggawatts, not only do the snippets give it away, but the site designer has also given credit where it’s due in the source code.

Other sites include: Barack Obama, Mercedes Benz and NASA, to name but a few. For a complete showcase, have a look at HTML5 Boilerplate, an online showcase.

Further resources

Rob Larson’s IBM article gives some tips for rearranging the folder structure and also includes the “Mark of the Web” snippet for those that test templates in IE when running Windows using the file protocol.

To suppress the security nag boxes when working in this way, insert the following just after the doctype declaration as below:

< !doctype html>
< !—saved from url=(0014) about:internet -->

A WordPress theme by Sam Sherlock that combines Boilerplate with the Thematic framework can be found here and it’s also a simple matter to add 960.gs for those that are fans of the CSS framework.

HTML5 Boilerplate is an excellent resource for kick-starting any new project that requires cross browser functionality. There are that many devices on the market now that it can be difficult to know where to start and HTML5 Boilerplate gives you all of the skeleton code that you will need for mobile, tablet and desktop.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about Accessibility? Why not ask it on our forums?