Skip to content
fernandoacorreia edited this page Feb 6, 2012 · 63 revisions

What is HTML5 Boilerplate?

HTML5 Boilerplate is a professional front-end template that helps you build fast, robust, adaptable, and future-proof websites. Spend more time developing and less time reinventing the wheel. It is the product of many years of iterative development and combined community knowledge.

The boilerplate ships with a number of features:

  • HTML, CSS, and JavaScript starting points
  • A custom build of Modernizr which includes:
  • Modernizr itself which detects HTML5 and CSS3 features and adds classes to the html tag to let you style accordingly. http://modernizr.com/docs/
  • Respond.js which is a polyfill that allows you to use media queries with browsers that do not support media queries such as IE6, 7, & 8 https://github.com/scottjehl/Respond.
  • Yepnope an asynchronous resource loader that you can use to load scripts, styles, and resources asynchronously and conditionally http://yepnopejs.com.
  • A build script
  • A default configuration for the apache web server - htaccess. Configuration files for other servers are available in our server-configs repo.

Help! My code with Boilerplate is not working!

  • Distill the core issue into a simple example hosted on JsFiddle.
  • Ask the community of experienced developers on StackOverflow for help, and make sure to tag your question with html5boilerplate.

No Seriously, it's Boilerplate's fault!

If that's the case, please submit an issue. Even better if you know the solution, as that would make it faster to fix (everyone wins!)

Can I integrate Twitter Bootstrap with HTML5 Boilerplate?

Yes. Read about how to integrate Twitter Bootstrap with HTML5 Boilerplate.

Can I integrate 960.gs with HTML5 Boilerplate?

Yes.

  • Include 960.css after the style.css of HTML5 Boilerplate.

  • Ignore 960's reset and text.

  • You'll have to tweak some headline and paragraph styles (like margins and padding), but you'll be better for it.

How should script.js and plugins.js be used? What should go in these files?

Script.js should hold your primary application script. It might make sense to store it in an object literal and execute it based on body classes.

Plugins.js is used for jQuery plugins and other 3rd party scripts. One approach is to put the jQuery plugins inside of the (function($){ ... })(jQuery); closure to make sure they're in the jQuery namespace safety blanket, especially if they were written by other developers. See also jQuery Plugin Authoring

Why is the URL for jQuery without "http"?

Read more about protocol-relative URLs

N.B. Using a protocol-relative URL for files that exist on a CDN is problematic when you try to view your local files directly in the browser. The browser will attempt to fetch the file from your local file system. We recommend that you use a local server to test your pages (or Dropbox). This can be done using Python by running python -m SimpleHTTPServer from your local directory, using Ruby by installing and runing asdf, and by installing any one of XAMPP, MAMP, or WAMP.

Why don't you use ajax.googleapis.com/ajax/libs/jquery/1/jquery.js to automatically load the latest version of jQuery from the Google CDN?

  1. The latest version of jQuery may not be compatible with the existing plugins/code on the site, version update should be a conscious decision
  2. The latest version has a very short max-age=3600 compares to the specific version of max-age=31536000, which means you won't get the benefits of long-term caching.

What if I want a different JavaScript Library to jQuery?

Remove the two lines of jQuery-related code from index.html and the little bit inside plugins.js.

Why is the analytics code at the bottom? Google recommends we put it in the head.

The advantage to placing it in the head is that you will track a user's pageview even if they leave the page before it has been fully loaded. Putting the code at the bottom keeps all the scripts together and reinforces that scripts at the bottom are the right move.

There could be some cases where very customized analytics is in place and you want that level of control and visibility. But that is not the 80% case. If you're an analytics power user, then I'm sure you can adjust the script as necessary.

What are print styles and why do you need them?

These styles are used when the page is printed. In fact all browsers (IE6+) can support the @media print {} syntax within a file. HTML5 Boilerplate ships with a set of styles that reduce complexity and make the printed page more obvious.

I get 404 errors and page not found errors, what is the cause?

Most probably, this is caused by the redirect script in .htaccess. Read more about proper usage of trailing slash redirects.

I want to drop support for IE6 so that my site can be more lightweight, what parts should I remove?

  • In the HTML, removing the conditional comments around the html tag should be sufficient.
  • In the CSS, you can remove any properties that with the _ IE6 hack.
  • As of Boilerplate 2.0 we already prompt IE6 users to install Chrome Frame for a better experience.

Help! IE does not seem to apply styles to :focus?!

It is a known issue for IE8 and below. Try using either :active or pseudo-focus script to fix it.

The phone numbers are looking twice as large and have a Skype highlight!

Some of your users might have installed the Skype browser extension, which detects phone numbers and lets them automatically dial them with a click. Disabling change of style is documented here.

What is profiling, and how do I use it, why do I want it?

Firebug and Chrome Dev tools offer profiling, but there is no easy way to profile IE6 and IE7. If you're focused on providing the most responsive experience possible (you should be!) then profiling should be part of your development workflow.

Do I need to upgrade my sites to a new version?

Nope. So far there have been no critical bugs within our code that we've fixed from version to version. There are some nice changes that reduce your stress, but updating your HTML or CSS to the new versions is probably more effort than it's worth.

However, the .htaccess and Build Script you probably didn't edit and therefore can be dropped into your existing sites without much trouble. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have. But remember to thoroughly test following any changes you make.

Has your question not been answered here? Please ask it in on StackOverflow.

Clone this wiki locally