Setting up the HTML template file
From your new project folder, open index.html in your editor. This sample markup file came with H5BP and contains several best practices and recommendations within it. We'll build on this basis and integrate it with our Bootstrap workflow. First, let's take a moment to note what's in it.
Scanning down through the file, you'll notice several interesting features. These are clearly explained in the H5BP documentation. You may easily get there from http://h5bp.com, but let me briefly run through a few of the features here. You'll see them in the following order:
The HTML5 doctype:
<!DOCTYPE html>
Conditional comments for Internet Explorer, which enable developers to compose fixes for older IE browsers using appropriate nested selectors:
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> <!--[if IE 8]><html class="no-js lt-ie9"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
The
htmltag also has a class ofno-js. If a browser's JavaScript is enabled, this class will be removed by the Modernizr script (referenced in the preceding part of this chapter) and replaced with the classjs. If it is not removed, it signals that JavaScript is not enabled, and we may craft CSS rules for such cases using nested selectors.You'll see meta tags for the following things:
Specifying the character set as follows:
<meta charset="utf-8">
Instructing an IE browser to use the most updated version of its rendering engine, or to use Google's Chrome Frame if it is installed as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The description tag for providing a description of the site is as follows:
<meta name="description" content="">
A mobile-friendly viewport meta tag will be as follows:
<meta name="viewport" content="width=device-width">
In place of links to a favicon or touch icon, you'll find a comment recommending that we simply place the icons in the site's root directory, where they will automatically be found by the users' browsers and devices.
You'll see two stylesheet links—one to
normalize.cssand another tomain.css—as follows:<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">
Then, you will see a script tag loading the Modernizr script. This needs to be loaded here in order for the HTML5 shiv it contains to equip IE8 so that it recognizes the HTML5 sectioning elements.
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
Then there is an IE conditional comment, with a message recommending the users of older IE browsers to upgrade to a more modern browser.
<!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. ... <![endif]-->
A single paragraph of content text.
A link to Google's hosted version of jQuery, followed by a link to a local fallback copy of jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>Links to
plugins.jsandmain.js, which are intended to hold the code for JavaScript plugins (inplugins.js) and your custom code (inmain.js):<script src="js/plugins.js"></script> <script src="js/main.js"></script>
The Google Analytics script:
<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>
If you wish to know more about the reason and purpose for any of these elements, I would encourage you to take some time to read through the H5BP HTML documentation (see https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md), where these lines are clearly explained with references.
For our purposes, we will perform the following operations on the elements of this template:
We'll give our site a title. We'll update the legacy IE conditional comment for users of old browsers.
We'll compile Bootstrap's CSS from the LESS files. We'll add some basic page content.
We'll integrate Bootstrap's JavaScript plugins and ensure that the responsive navbar works as it should.
Once we've done the these things, we'll have everything in place to begin building our designs.
