Now that the head of our document contains most of the important bits we come to the Modernizr library loading. I've coded this as though it is in the root of the site folder for now. Of course we haven't actually downloaded it yet so what better time than now to do that. I'm going to go to www.modernizr.com and download the full, uncompressed development version in its full glory, which will include more than 40 of the library's feature tests, as well as nicely documented code. Again, save this to the same folder that holds the HTML file we just made. The following screenshot gives us a peek of the website where we can download Modernizr:
There are a couple of other options available to you if you wanted to load this from a CDN instead of downloading it. While this isn't recommended for production environments, it is perfectly suitable for development. The detraction from using this for production is that the development version is probably much heavier than you need. I would recommend figuring out the features you need once your site is built, and then doing your own customized and minified build for your production websites, more on that later in the book. Where the CDN could come in handy would be if you had a series of development sites and didn't want to have to fuss with a download of the library for each site. I would advise that you do a custom build for production sites each time, and use only what you need. This is a very lightweight library but any overhead you can cut away is always going to help the overall performance of your page. This is especially important for blocking scripts. The following links are to some publicly available CDNs in case you're interested:
- From the Microsoft Modernizr CDN, we can visit:
http://www.asp.net/ajaxlibrary/cdn.ashx#Modernizr_Releases_on_the_CDN_7
- From the CDNjs CDN, we can visit:
The rest of the code is pretty standard HTML and doesn't really vary at all from HTML4 so I won't go into further detail on it. Go ahead and include it in your page to finish the HTML document. We now have a fully framed setup. Let's go ahead and preview it in the browser and see what we have so far. The following screen will appear:
We have the basic skeleton of an HTML5 page now. Let's sprinkle in a couple more important bits to make it more of a page. First off, we'll need a stylesheet so I'm going to make a style.css file and include that into the page header. Also, lets give this page some batteries with some jQuery compliments of the Google CDN, and then an empty script file that will be created in the same root as the rest of the site files and included in the page after jQuery. I'm going to name the empty JavaScript file script.js.
I won't go into detail on how to link a stylesheet since you can probably already do that with your eyes closed, so just before the ending body tag place the following code. We'll place this code snippet at the end of the script so the DOM tree won't be blocked by it:
<!-- jQuery from the CDN --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- A page for all of our js --> <script src="script.js"></script>
That's a pretty good start. Let's take a moment to recap. Modernizr is loaded into the head of the document along with jQuery being loaded at the end of the document to prevent DOM blocking. After the jQuery library include in the footer of the page we also call include from script.js, which will hold all of the custom JavaScript documents. This means that now is a good time to create that file in the same folder as all the other scripts. So at this point we have an index.html file to hold our code, a style.css file to contain all the paint, or styling for the page, the Modernizr library included in the header, an include of the jQuery library via the Google CDN, and a script.js file to place all of the JavaScript pages. These options can be seen in the following screenshot:
Now we have a really great blend of JavaScript, CSS, and HTML for us to get up and running. jQuery will help us do a lot of the JavaScript heavy lifting and save us even more cross browser JavaScript headaches, and Modernizr will do all the shimming and feature detection for us. Now that everything is connected, we can move on to the foundation code for our project. First we will verify the connectivity of the js file, add in the navigation, create five section frames that will have smooth jQuery animation-driven transitions, and then we'll style the whole thing and add in some custom fonts.
Let's make sure everything's included correctly before moving ahead. In the script.js file, I'm going to add in a quick statement to be logged into the console. I like to do this to ensure that everything is hooked together before proceeding any further. As simple as this is, it is useful because it helps in any debugging later on when we can rule out that a script isn't properly linked in the HTML document.
In script.js add the following code snippet:
<script>
//check that Modernizr is loading by printing out version.
console.log("Modernizr is present and version is: ",Modernizr._version);
//check that jQuery is loading by printing out version.
console.log("jQuery is present and version is: ",jQuery.fn.jquery);
</script>