Home arrow HTML arrow Page 2 - HTML5 Boilerplate: Working with jQuery and Modernizr
HTML

HTML5 Boilerplate: Working with jQuery and Modernizr


This article concludes a two-part tutorial on the many benefits of using HTML5 Boilerplate. As you'll see, its “style.css” and “index.html” files are real time-savers, especially when you're building HTML5 websites that need to be rendered cohesively across most modern browsers.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
February 01, 2012
TABLE OF CONTENTS:
  1. · HTML5 Boilerplate: Working with jQuery and Modernizr
  2. · Exploring HTML5 Boilerplate's

print this article
SEARCH DEVARTICLES

HTML5 Boilerplate: Working with jQuery and Modernizr - Exploring HTML5 Boilerplate's
(Page 2 of 2 )

As I noted at the beginning, aside from its robust CSS template, the other workhorse of HTML5BP is unquestionably its “index.html” file. This file uses some handy techniques that allow you to work with jQuery, Modernizr and even Google Analytics in a clever way.

The best way to grasp the actual functionality of this file is by dissecting its most relevant portions. Please take a look at the following code excerpt. It shows the section of the file that deals with different versions of Internet Explorer, and with older browsers that don’t support JavaScript: 

(index.html) (excerpted)

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->    

As you can see above, this section of the “index.html” file conditionally assigns some CSS classes to its <html> element, which allows you to easily target a specific range of Internet Explorer versions (yes, IE6-8). In addition, you may have noticed the use of an extra class called “no-js.” If you’re wondering what the purpose is in doing this, the answer is simply to gracefully handle browsers that don’t interpret JavaScript.

But how will this class be removed when the file is requested by a browser that does understand scripting? Don’t worry about this; the removal will be handled neatly behind the scenes by Modernizr.

The fine details of this process will be discussed later. In the meantime, check the following code excerpt. It is responsible (among other things) for including the CSS file covered in the previous installment, and for optimizing the browser’s viewport, too. Check it out:      

(index.html) (excerpted)

<!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <!-- end CSS-->

Definitely, there’s not much that can be said about this fragment, as it speaks for itself. Therefore, we'll  move forward. Take a look at the code snippet below, which takes care of downloading Modernizr (remember that this library is included by default with HTML5BP).

Here’s how this file segment looks: 

(index.html) (excerpted)
 
<!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>

Since this portion of the file is responsible for including Modernizr, at this point it should be clear to you how the earlier “no-js” CSS class assigned to the <html> element will be removed when “index.html” is parsed by a browser supporting JavaScript. Thanks to its feature-sniffing abilities, the library will replace on the fly the class in question with one called “js.” It’s as simple as that.

And now that you've grasped how the above code excerpt does its thing, it’s time to take a close look at the last one that I plan to discuss in this tutorial. This segment, placed at the bottom of “index.html,” is tasked with downloading (when possible) jQuery from Google’s CDN, and for setting up the typical Google Analytics script.  But if, for some unknown reason, the download fails, then the library will be pulled in directly from the local web server:

(index.html) (excerpted)

<!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"></script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>
  <!-- end scripts-->

 
  <!-- Change UA-XXXXX-X to be your site's ID -->
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>

There you have it. While the section charged with creating the Google Analytics script is pretty easy to grasp, you should pay attention to the one that downloads jQuery from Google’s CDN, as its implementation is really interesting. As you can see, it first attempts to fetch the library by using the Google AJAX API; if the process is unsuccessful (which doesn’t spawns any jQuery object), then the local version of jQuery is retrieved and served to the client via a simple “document.write()” statement (you remember this oldie, right?).

And with this final example, I’m finishing this humble introduction to exploring the wealth of handy features that HTML5BP offers for free. Of course, there are many others that still remain uncovered, as it’s impossible to discuss all of them in a two-part tutorial. Nevertheless, if you’re interesting in learning how HTML5BP can help you to create efficient HTML5 websites painlessly, be sure to stop by the template’s docs section.    

Final Thoughts

Over the course of this two-part tutorial, you had the chance to examine some of the delights that HTML5 Boilerplate offers for free. Moreover, its “style.css” and “index.html” files are undoubtedly real time-savers, especially when it comes to building HTML5 websites that need to be rendered cohesively across most modern browsers.

As you just saw in the previous code excerpts, the template doesn’t do anything really “magic;” however, the set of default files that it provides right out the box are solid contenders that will let you use the features included with HTML5 more safely, and without getting unpleasant surprises. This is definitely a tool that you should keep close at hand most of the time.

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials