FAQs

wtf is this thing?

• boilerplate ships with a default configuration for the apache web server. It's documented in .htaccess. Configuration files for web.config, nginx.conf, node.js, and lighthttpd are available in our server-configs repo.
• 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.

Note that by default we have a '//' in front of the jQuery library that is linked to Google's CDN: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

More information about this at http://paulirish.com/2010/the-protocol-relative-url/

This also means that if you access your file from your folders, the page will take forever to load or 404 on the jQuery as it will attempt to fetch jquery.min.js from file://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js. We recommend you use a handy local server to test your pages - either dropbox or if you have python installed run python -m SimpleHTTPServer.

Help! My code with Boilerplate is not working!

• Breathe in and out
• Join our mailing list
• Upload your code to JsFiddle
• Write a mail to the mailing list explaining what you expect to happen, and what actually happens. Do not forget the link to your fiddle from the previous step! Voilá!

No Seriously, it's Boilerplate's fault!

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

Why is the URL for jQuery without "http"?

• Read more about protocol-relative URLs

Can I integrate 960.gs with HTML5 Boilerplate?

• But of course! Here are some details on integrating 960.gs with HTML5 Boilerplate.

If I don't want to support IE6 and I don't want my sites to be IE6 compatible so I can make them lighter, what parts should I remove?

• The conditional comments around the html tag and the conditional include of support for transparent pngs at the bottom should be sufficient in the HTML.
• In the CSS, just remove all selectors that start with .ie6.
• There are a few style properties that start with _ for the ie6 hack. You can kill those too, if you're feeling daring.
• a list-style-image:none style that only is necessary for IE6 and IE7 is in the nav ul styles. (issue #263)
• If you've given up on IE6 users, you should prompt for chromeframe install so other people get the benefit of upgraded users.

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 it at the following wiki page: proper usage of trailing slash redirects

I can't get EmulateIE8 mode to work in IE9 Beta

The use of conditional comments on the HTML tag seem to trigger IE9 Beta to only render on IE9 Standards mode. If you want to use EmulateIE8 mode, use the conditional comments on the body tag. more in issue 125

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 users' 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 are an analytics power user than I'm sure you can adjust the script as necessary.

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 I use for jQuery plugins and other 3rd party scripts myself. I 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 more amateur developers. See also jQuery Plugin Authoring

What if I want a different JavaScript Library?

Remove the two lines of jQuery stuff from the index.html and the little bit inside plugins.js. I think you can handle that. :)

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. Boilerplate ships with a set of styles that reduce complexity and make the printed page more obvious.

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.

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.

Have you considered head.js?

We have been looking into it. You can keep your eyes peeled on this issue for updates.

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. The YUI profiling script that is integrated can identify parts of your code that take an extra long time to run. If you're focused on providing the most responsive experience possible (you should be!) then profiling should be part of your development workflow.

Why don't we use "ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" so the newest version is automatically loaded?

Because:
a. the latest version of jQuery may not be compatible with the existing plugins/code on the site, version update should be a conscious decision
b. the latest version has a very short max-age=3600 compares to the specific version of max-age=31536000

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 stuff 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 with little hassle and likely a significant reward. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have.

Your questions

edit this page and ask your own questions below and they will be answered.

Is this thing HTML4 / XHTML compatible?

Why sure it is. The markup is a bit more friendly to validation in HTML4, but with enough tweaks you can make it validate fine in either. An important thing to point out is that the browser doesn't really care which doctype you have (just as long as you have one). It won't render a page differently just because you switch it from the html5 doctype to XHTML. So it's only for declaring your relationship with the validator.

Is there a Less.js version of the css?

Less.js is a superset of css, meaning there is no need for a special version. Here is what you do:

• rename the styles.css to styles.less
• change the linking in your index.html from rel="stylesheet" to rel="stylesheet/less"
• link the less.js after the style-files.

Is anything in the .htaccess conflicting with a wordpress theme, or can I just update my .htaccess with boiler plate goodness?

Theoretically none, but we have not investigated this. There are Wordpress themes already available that work with H5BP extensively, you can use them as a reference when you create yours.

Is there a way to integrate this with Zend Framework and still use the build script?

Not sure. We do recommend you try and report back any issues! We can take it from there on.

Why is the doctype used as "doctype" and not "DOCTYPE"?

Because you can also use DoCTypE or DocTYPE or DOCtype or DOctYPe We also like code that does not yell at you.

Can I integrate jQuery Mobile with HTML5 Boilerplate?

Yes of course. We see no reason for conflict.