HTML5, CSS3 Tip – Boilerplates

As you have seen in our introductory posts on HTML5, you will want to start with some sort of boilerplate. Boilerplates help you remember all of the items you need to be successful.

HTML5Boilerplate helps you start your project with a lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks.

Includes Normalize.css v1 — a modern, HTML5-ready alternative to CSS resets — and further base styles, helpers, media queries, and print styles.

Get the latest minified versions of two best-of-breed libraries: jQuery (via Google’s CDN, with local fallback) and the Modernizr feature detection library.

And it puts all the stuff you need into the right place. Thing you need: like cross-domain-policy.xml, a favicon, that dreaded 404-page, and that code that asks your users to get a modern browser.

License

HTML5 Boilerplate is licensed under the MIT open source license.

Getting Started

Choose one of the following options:

Download the latest stable release from html5boilerplate.com or a custom build from Initializr or
Clone the git repo — git clone https://github.com/h5bp/html5-boilerplate.git – and checkout the tagged release you’d like to use.

Boilerplate Features

And the features keep coming.

HTML5 ready. Use the new elements with confidence.
Cross-browser compatible (Chrome, Firefox, IE8+, Opera, Safari).
Designed with progressive enhancement in mind.
Includes Normalize.css for CSS normalizations and common bug fixes.
The latest jQuery via CDN, with a local fallback.
The latest Modernizr build for feature detection.
Placeholder CSS Media Queries.
Useful CSS helpers.
Default print CSS, performance optimized.
Protection against any stray console.log causing JavaScript errors in older browsers.
An optimized Google Analytics snippet.
Apache server caching, compression, and other configuration defaults for Grade-A performance.
Cross-domain Ajax and Flash.
“Delete-key friendly.” Easy to strip out parts you don’t need.
Extensive inline and accompanying documentation.

HTML5 Boilerplate v4 provides legacy browser support (IE 6+, Firefox 3.6+, Safari 4+), but is no longer actively developed.

In addition, it provides the right place and guidance for using a single apple-touch-icon.

Using Initializer

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It will build you a Boilerplate that is closer to your own needs. It generates for you a clean customizable template with just what you need to start.

Initializr kick-starts the development of your new projects. It generates templates based on HTML5 Boilerplate by allowing you to choose which parts you want or don’t want. A responsive template has also been added to start from a basic design instead of a blank page.

You can select Bootstrap 3, get HTML5 Polyfills, jQuery, and turn on and off those other features.