Transform your website with HTML5 Boilerplate

Ryan Boudreaux introduces a tool that will help you convert your website to HTML5. The template includes HTML, CSS, JavaScript, and more files to help you move ahead.

Have you been waiting to convert your website to HTML5 but figured you didn’t have the resources or the tools to get it done within a reasonable time and/or budget? The HTML5 Boilerplate might be the tool you need to get your website transformed into the next chapter of the hypertext markup language narrative. This post will review the features, options, source code, and examples of the HTML5 Boilerplate in use today. Probably the single most beneficial factor in making a decision to use the HTML5 Boilerplate is its built-in IE conditional comments that resolve specific IE legacy issues.

(Credit: Original “Boiler Plate” background image above by arbyreed, Attribution Creative Common License)

What is the HTML5 Boilerplate?

The HTML5 Boilerplate is a professional front-end template that aids web developers in constructing fast, adaptable, and robust websites or web applications utilizing a set of HTML5-ready features and elements. The latest stable source code release is available from the HTML5 Boilerplate as a compressed 97KB zip file, and at this writing is listed as v4.0.1. You can also obtain a custom build from Initializr, where you are free to generate your own new project using the HTML5 Boilerplate template. Or, you can clone the github repo, where you can check out the tagged release you would like to use for your project.

The core

The core of the HTML5 Boilerplate includes the HTML, CSS, JavaScript, .htaccess, crossdomain.xml, and miscellaneous items such as an ignore file, .gitignore, which is primarily used to avoid certain project-level files and directories from being kept under source control.

HTML

The HTML is comprised of a series of IE conditional comments, which apply to relevant IE-specific classes to the <html> tag, and fixes much of the CSS for legacy versions of IE. And when you use the conditional classes technique, the benefits include:

Avoids a file-blocking issue which has been resolved
Integration is easier with CMS’s like WordPress or Drupal which use the body class more heavily
Validates as HTML5
Uses the same elements as Modernizr and Dojo
Improves clarity of code in multi-developer teams
The no-js class allows you to explicitly add custom styles when JavaScript is disabled or enabled in users browsers
Uses the HTML5 specification for order of meta tags and <title>, including a X-UA-Compatible meta tag for the latest IE versions, and it also includes a “viewport” meta tag for mobile devices
Uses a custom build of Modernizr
The main content area is fairly empty with options for Google Frame, Google CDN for jQuery, and Google Analytics Tracking Code

The index.html file and associated resource scripts and stylesheets are shown in Figure B, displayed in Google Chrome Version 22.0.1229.94 m with the Inspect element tool open to Resources split view. Looking under the hood, we can view the HTML5 code which creates the boilerplate template.

Figure B

And the extracted code snippet of the HTML is displayed below:

<!DOCTYPE html>

&lt;!--[if lt IE 7]>      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"> &lt;![endif]-->

&lt;!--[if IE 7]>         &lt;html class="no-js lt-ie9 lt-ie8"> &lt;![endif]-->

&lt;!--[if IE 8]>         &lt;html class="no-js lt-ie9"> &lt;![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>

        &lt;meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title></title>

        <meta name="description" content="">

        &lt;meta name="viewport" content="width=device-width">

        &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        &lt;link rel="stylesheet" href="css/normalize.css">

        &lt;link rel="stylesheet" href="css/main.css">

        &lt;script src="js/vendor/modernizr-2.6.2.min.js"></script>

    </head>

    <body>

        &lt;!--[if lt IE 7]>

            &lt;p class="chromeframe">You are using an &lt;strong>outdated&lt;/strong> browser. Please &lt;a href="http://browsehappy.com/">upgrade your browser&lt;/a> or &lt;a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame&lt;/a> to improve your experience.&lt;/p>

        <![endif]-->

        <!-- Add your site or application content here -->

        <p>Hello world! This is HTML5 Boilerplate.</p>

        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        &lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.8.2.min.js">&lt;\/script>')&lt;/script>

        <script src="js/plugins.js"></script>

        &lt;script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->

        <script>

            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];

            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];

            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';

            s.parentNode.insertBefore(g,s)}(document,'script'));

        </script>

    </body>

</html>

CSS

The starting CSS includes linking to the normalize.css and then the main.css files. Other benefits include:

Useful HTML5 Boilerplate defaults including Display Block, Base, Links, Typography, Lists, Embedded Content, Figures, Forms, and Tables
Includes common helpers such as Image Replacement , hidden, and Clear Fix, which contains floats
Media Queries and Print styles for paged media

This starting CSS does not rely on the presence of conditional class names, conditional style sheets, or Modernizr. It is ready to use whatever your development preferences happen to be.

A portion of the main.css code snippet is displayed below:

/*

 * HTML5 Boilerplate

 * What follows is the result of much research on cross-browser styling.

 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

 * Kroc Camen, and the H5BP dev community and team.

*/

/* ==========================================================================

   Base styles: opinionated defaults

   ========================================================================== */

html,

button,

input,

select,

textarea {

    color: #222;

body {

    font-size: 1em;

    line-height: 1.4;

/*

 * Remove text-shadow in selection highlight: h5bp.com/i

 * These selection declarations have to be separate.

 * Customize the background color to match your design.

*/

::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

::selection {

    background: #b3d4fc;

    text-shadow: none;

/*

 * A better looking default horizontal rule

*/

hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

JavaScript

The JavaScript includes calls to two local files, the main.js, and the plugins.js, and calls to two vendor files which include the jquery-1.8.2.min.js and modernizr-2.6.2.min.js files.

main.js – Can be used to contain or reference your site/app JavaScript code. For larger projects, you can make use of a JavaScript module loader, like Require.js, to load any other scripts you need to run.
plugins.js – can be used to contain all your plugins, such as jQuery plugins and other 3rd party scripts.
vendor – contains 3^rd party vendor scripts such as the jQuery and Modernizr libraries

.htaccess

This is the configuration file that allows for the Apache web server configuration. The HTML5 Boilerplate includes a number of best practice server rules for making web pages fast and secure; these rules can be applied in the included .htaccess file. Individual configuration procedures are provided for Windows IIS server or for a Linux Apache web server, as well as using MAMP Pro on a Mac. Along with security, performance, Gzip components, Cache busting, and trailing slash redirects, the configuration file provides many options.

crossdomain.xml

This XML document policy file grants web clients such as Adobe Flash Player and Adobe Reader permission to handle data across multiple domains.

Examples of websites that utilize the HTML5 Boilerplate

Many high profile websites currently utilize the HTML5 Boilerplate in one fashion or another, including ProjectRe:Brief by Google (Figure C), Microsoft Surface, Data.NASA.gov (Figure D), Barack Obama, Mercedes-Benz A Class, and Racing Green casual and formal wear (Figure E).

Figure C

Figure D

Figure E

The HTML5 Boilerplate might just be the tool you need to get your website converted to the paradigm of markup language.

With so many agile project management software tools available, it can be overwhelming to find the best fit for you. We've compiled a list of 10 tools you can use to take advantage of agile within your organization.

PURPOSE This Media disposal policy from TechRepublic Premium provides specific instructions for ensuring organization data is properly protected when disposing of old storage media. From the policy: POLICY DETAILS When disposing of damaged, unusable, obsolete, off-lease, decommissioned, old, or end-of-service-life equipment and media, the organization requires that the guidelines outlined herein be followed: Hard drives, ...

Transform your website with HTML5 Boilerplate