It's a common practice for web development shops to create a standard set of files that team members use to kick-off the web development process, including a common file structure, basic naming conventions, and standard libraries. Doing so makes getting a project up and running much easier. It can also steer developers toward internal coding standards and enforce standard file organization. HTML5 Boilerplate is that concept perfected for the leading edge of web development.

Combining a number of enhancements needed to work with HTML5 with many other best practices, HTML5 Boilerplate offers a rock-solid foundation for your projects with only a minimal up-front investment. This article outlines a practical approach to starting a project with HTML5 Boilerplate and illustrates some ways you can tweak it to fit an existing framework and coding style.

The pieces of HTML5

At the heart of HTML5 Boilerplate are the pieces that aid in developing HTML5 sites and applications right now. Those pieces include:

• Modernizr, a small utility library that allows you to style the new HTML5 elements in Windows® Internet Explorer® and aids in HTML5/CSS3 feature detection in all browsers. If you're developing in HTML5 and you're supporting Internet Explorer browser versions earlier than version 9, this (or an alternative that I explain shortly) is the one piece of the project you absolutely need.
• A starter CSS file that builds upon the HTML5 Doctor Reset with a number of intelligent defaults and enhancements.
• Built-in HTML5 syntax throughout and new semantic elements in place as a skeleton for your document.

Beyond the core HTML5-related features, several outstanding best practices are implemented in the project. Here's a partial list of what you can find:

• A strong focus on front-end performance throughout the project, with proper structure (CSS at the top, JavaScript code at the bottom), an asynchronous implementation of Google Analytics, and a number of performance-based enhancements provided in the project's Apache ANT build script.
• Several cross-browser aids, including Internet Explorer version-specific classes on the HTML element and an automatic PNG fix for Internet Explorer version 6.
• Sample .htaccess and web.config files to help get your server set up to take advantage of HTML5 features and web fonts and to speed up your site with a smart caching policy.
• CSS enhancements that stretch well beyond the typical reset. The style sheet rebuilds elements with smartly chosen and occasionally clever defaults. It also adds in several convenient helper classes. The common .clearfix class is one you'll be familiar with, but others like .hidden and .visuallyhidden are also included and are quite useful. Skeleton print styles, paged media styles, and media queries for responsive web design are also included.

It might seem like a lot, but the above list is just a sample of what comes with the project. Even for someone who tracks these things, it's an impressive collection. So impressive, in fact, that the project calls out the fact that it is "Delete key friendly." The idea is that it's a robust collection and not everyone is going to need every feature included by default on every project.

All of which leads to a core lesson on working with HTML5 Boilerplate: Because HTML5 Boilerplate is meant to be used as a foundation, manipulating the files at project initiation isn't just possible, it's what you should be doing. With that in mind, let's walk through starting an HTML5 Boilerplate project and using that Delete key to get it customized.

Back to top

Using Boilerplate

As you read through the sections that follow, remember that the purpose of this walk-through isn't to dictate how you should set up your own projects: It's to illustrate how you can and should approach it, with the intention of making the foundation work for your particular project and development style.

Getting the code

The easiest way to get the code is simply to download it from the project website (see Resources). For the purposes of this article, I assume that you've done just that, grabbing the "stripped" version.

Alternatively, if you're comfortable with git, you can clone the project, and then use one of two approaches to get a clean copy of the project to work with:

• If you've got access to a UNIX® shell, you can navigate to the project's build directory and run the supplied createproject.sh file, which generates a clean directory in the HTML5 Boilerplate root folder.
• If you can't run the shell script because you're on a Windows machine or want more flexibility in terms of placing the output files, you can check out the stripped branch, and then export an archive. Typically, you do this using a tool like Smart Git or TortoiseGit, but you can also do it from the command line as follows:
  
  

  git checkout -b stripped origin/stripped git archive stripped --format=zip --output=/path/to/your/files.zip

  
  

Whatever way you arrive at it, move over to your freshly minted copy and dive in with the customizations.

Back to top

Customizations

The first edit I typically make depends on how heavily I plan to use advanced HTML5, CSS3, or other emerging technologies. If you're creating a content site or blog and simply want to "future-proof" the site with new, semantic markup, replace the external Modernizr script with the tiny html5shiv snippet. The html5shiv code does just the part that gets CSS to work with the new semantic elements in older versions of Internet Explorer. Modernizr is fast, but if you're not going to leverage the tests Modernizr exposes, save your users a few milliseconds by going to the simplified option.

A section I automatically delete is the profiling section at the bottom. If you don't use it, get rid of it immediately. Depending on the needs of your current project, you might also delete the PNGFix solution included for Internet Explorer 6.

Outside of the HTML document itself, you can immediately delete several files and folders in the project root either because you don't need them (the test folder, web.config, crossdomain.xml, nginx.conf) or have your own versions (robots.txt, .htaccess).

One small addition

If you develop templates and test them in Internet Explorer on a computer running Windows using the file protocol, you're undoubtedly familiar with the endless security dialog boxes that pop up whenever you attempt to run anything even remotely interactive. To get around that, you simply need to insert the "Mark of the Web" directly after the doctype declaration. This simple snippet puts Internet Explorer into the Internet zone and suppresses the annoying security dialog box.

<!doctype html>
<!-- saved from url=(0014)about:internet --> 

As a note, this code is also stripped out by the project's build script, so it's not carried over into the production environment.

Folder structure

This one isn't a typical customization, but it really illustrates the fact that HTML5 Boilerplate is a foundation—nothing more. If something isn't to your liking, change it. You're the one who has to live with your project moving forward.

Whenever I'm kicking off a project, I first adjust the folder structure. There's nothing wrong with the existing structure: I just prefer to keep all static assets (scripts, flash elements, images, style sheets) in a top-level directory called _assets. Doing so keeps a cleaner root directory and pushes those often-referenced elements right at the top of the directory tree in file windows. In addition to the consolidation, I add two child directories of the CSS folder for Web fonts and CSS images, respectively. Having worked on enough sites that use images as content, I like to keep content images separate from interface images. That calls for two folders.

I also simplify the hierarchical structure of the js folder by deleting the libs, mylibs, and profiling directories and moving their contents into a single, flattened js directory. The finished product is illustrated in Figure 1.

At this point, I just make sure the paths in the HTML document match the new reality, and I'm done with my adjustments. I make some additional tweaks to the build script, which the next section covers, but for the most part, I'm ready to start my new project.

Back to top

The build script

When you're ready to package your site for delivery either as a static site or as a build kit for later integration with a CMS or other platform, it's time to visit the /build directory. HTML5 Boilerplate, for now, has an ANT build script that includes several useful tasks for packing up content.

Note: If you want to integrate other build systems into your project and you're a master of Rake, Apache Maven, or other build systems, head over to github, fork the project, and pitch in.

What it does

Using ANT, a Java™-based build tool, the build script performs the following tasks:

• Combines and minifies JavaScript with the YUI compressor
• Combines and minifies CSS
• Optimizes JPG and PNG files with jpegtran and optipng
• Removes development-only code
• Configures HTML minification using htmlcompressor
• Revs file names for intelligent caching (specifically, cache busting for updated files)

There are four tasks you should pay attention to:

• build. Performs minor HTML optimizations, minifies inline scripts and styles, concatenates and minifies external JavaScript code and CSS, and processes images
• buildkit. Retains HTML whitespace for readability later in the production process, minifies inline scripts and styles, concatenates and minifies external JavaScript code and CSS, and processes images
• minify. Performs full HTML minification, minifies inline scripts and styles, concatenates and minifies external JavaScript code and CSS, and processes images
• text. Performs full HTML minification, JavaScript code minification, and concatenation and CSS minification; no image optimizations are performed

If you're running the default boilerplate, then the above tasks should work as long as you have Java technology installed and ANT in your path.

If, like me, you've made some tweaks to your folder structure, then you'll have to make some customizations to the build script. You make most of these changes in a file called build.properties, but you might have to tweak a line or two in the build script itself.

The changes in build.properties (shown in Listing 1) are all directory based. Variables are updated to point the build script to the new location of the JavaScript code, CSS, and images.

	
#build properties is where you override default configuration elements.
#in my case I just need to set some new folder references.
# Custom Build options ---------------------------------
# Project structure -----------------------------
# Directory names
dir.assets   = _assets
dir.js  = ${dir.assets}/js
# Main JS script folder (Will be concatenated and minified)
dir.js.main  = ${dir.js}
dir.css  = ${dir.assets}css
dir.images  = ${dir.build}/images
dir.cssimages  =${dir.css}/images

For my environment, I need to fix one line in build.xml to reference my second image directory. Listing 2 illustrates the simple change. You'll see operating system-level branching here, so the following example assumes a Windows environment. There are also branches for Linux® and Mac OS X, where similar changes would need to be made.

	
<target name="imagesjpg" depends="copy">
<echo message="Clean up those jpgs..."/>
[snip...]
<apply executable="tools/jpegtran.exe" osfamily="windows">
<fileset dir="./${dir.publish}/${dir.images}/" includes="*.jpg"/>
<!-- Adding in my css/images directory -->
<fileset dir="./${dir.publish}/${dir.cssimages}/" includes="*.jpg"/>
[snip...]
</target>

With those changes in place, you've got a fully functional project tweaked just to your liking, ready to build optimized code.

Back to top

Conclusion

As you can see, there's a very low barrier to entry with the HTML5 Boilerplate project, and there's plenty of room for experimentation. Take the project for a spin yourself. Discover the great things it brings to the table, and don't be afraid to make it your own if there's something missing or something you don't need.

Resources

Learn

• Track HTML5 Boilerplate on Github.
  
  
• Check out the HTML5 Boilerplate documentation.
  
  
• Follow HTML5 Boilerplate on Twitter.
  
  
• Follow developerWorks on Twitter.
  
  
• To learn more about HTML5, see the W3C's specification.
  
  
• Discover what's new in CSS3.
  
  
• The Web development zone specializes in articles covering various web-based solutions.
  
  
• Stay current with developerWorks' technical events and webcasts.
  
  
• developerWorks on-demand demos: Watch demos ranging from product installation and setup for beginners to advanced functionality for experienced developers.
  
  

Get products and technologies

• Download the HTML5 Boilerplate code from the project website.
  
  
• Learn more about html5shim, an HTML5 Internet Explorer-enabling script.
  
  
• Download IBM product evaluation versions or explore the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
  
  

Discuss

• Create your developerWorks profile today and set up a watchlist on HTML5. Get connected and stay connected with developerWorks community.
  
  
• Find other developerWorks members interested in web development.
  
  
• Share what you know: Join one of our developerWorks groups focused on web topics.
  
  
• Roland Barcia talks about Web 2.0 and middleware in his blog.
  
  
• Follow developerWorks' members' shared bookmarks on web topics.
  
  
• Get answers quickly: Visit the Web 2.0 Apps forum.
  
  
• Get answers quickly: Visit the Ajax forum.
  
  

About the author

Rob Larsen has more than 11 years of experience building and designing websites and web applications. Currently, he's an interface architect at Isobar, working with HTML5, CSS3, and other emerging technologies for some of the world's largest brands. Rob writes about the web and web technologies at his blog, HTML + CSS + JavaScript, and you can reach him at rob@htmlcssjavascript.com.

Rate this article

Comments

Back to top

Table of contents

• The pieces of HTML5
• Using Boilerplate
• Customizations
• The build script
• Conclusion
• Resources
• About the author
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

Dig deeper into Web development on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers