-
Notifications
You must be signed in to change notification settings - Fork 0
FAQs
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.
- 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.
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.cssafter thestyle.cssof 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.
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
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?
- The latest version of jQuery may not be compatible with the existing plugins/code on the site, version update should be a conscious decision
- The latest version has a very short
max-age=3600compares to the specific version ofmax-age=31536000, which means you won't get the benefits of long-term caching.
Remove the two lines of jQuery-related code from index.html and the little bit inside plugins.js.
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.
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.
Most probably, this is caused by the redirect script in .htaccess. Read more about proper usage of trailing slash redirects.
- In the HTML, removing the conditional comments around the
htmltag 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.
It is a known issue for IE8 and below. Try using either :active or pseudo-focus script to fix it.
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.
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.
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 the H5BP Google Group