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:
<!DOCTYPE html>
<!--[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]-->
html
tag also has a class of no-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 class js
. If it is not removed, it signals that JavaScript is not enabled, and we may craft CSS rules for such cases using nested selectors.<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
normalize.css
and another to main.css
—as follows:<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. ... <![endif]-->
<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>
plugins.js
and main.js
, which are intended to hold the code for JavaScript plugins (in plugins.js
) and your custom code (in main.js
):<script src="js/plugins.js"></script> <script src="js/main.js"></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:
Once we've done the these things, we'll have everything in place to begin building our designs.