HTML5 Boilerplate is 2.0!

HTML5 Boilerplate is 2.0!

WEDNESDAY, AUG 10TH, 2011

Happy Birthday!

H5BP is a year old! We launched on August 10th, 2010 and now we've got a plethora of new, exciting changes that comprise our 2.0 release. We've also added Mathias Bynensand Nicolas Gallagher, two very talented frontend researchers and developers, to the core development team. The highlights of 2.0 are below, followed by a more comprehensive changelog.

NORMALIZE.CSS

We are now using normalize.css developed by Nicolas Gallagher along with Jonathan Neal instead of the traditional CSS Reset stylesheet.

normalize.css retains useful browser defaults and includes several common fixes to improve cross-browser (desktop and mobile) styling consistency.

Lots of research has gone into normalize, verifying what are the default user agent styles provided by each browser. We can very specifically change only the ones we need to instead of the bulldozer approach.

Why this is great news:

• Who likes being so damn redundant and declaring: em, i { font-style: italic; }
• By using normalization instead of a reset + building up default styles, we use less styles and save bytes
• Less noise in your dev tools: when debugging, you don't have to trawl through every reset selector to reach the actual style that is causing the issue.
• More details on the project page

BUILD SCRIPT++: Faster, @import inlining, appcache generation

If 15 seconds was too long to wait before, you'll be happy with the changes. Via a new "intermediate" folder, we cut down build time by 80% or more.

If you use @imports in your CSS to author in multiple files, the build script will inline all these together. This way, you have a maintainable authoring experience, and still a highly performant production version.

Making an app that works offline is a badge of honor. Now with a flick of a config switch, the H5BP build script can autogenerate your cache manifest file with all the right info and wire it up. It'll also keep the manifest revved as you deploy new changes.

PROMPT CHROME FRAME FOR IE6

• With the latest release of Chrome frame which does not require admin access to be installed, we felt it was a good time to prompt IE 6 users to install Chrome Frame.

RESPOND.JS

• Added respond.js as part of a shift to a responsive approach. You can now use media queries anywhere and get full IE6-8 support.

PNGFIX & HANDHELD REMOVED

• We removed handheld.css as we do not think it was useful among the diverse feature phones
• We feel tools like imagealpha and pngquant, and techniques like using 8-bit PNGsare more useful than using stopgap fixes like belatedpng.

Changelog

2.0 also gets a lot of major updates Here are all 299 commits since last release, brought to you by over 49 contributors.

Should you upgrade existing sites? Short answer: nah, you're good. (Though dropping in the new build script and .htaccess would be cool)

index.html

• Use minified jQuery by default (now 1.6.2)
• Add respond.js as part of shift to ‘mobile first’ approach.
• Updated to Modernizr 2.0 Complete, Production minified (incl yepnope & respond).
• Prompt IE 6 users to install Chrome Frame
• Removing touch icon link tags and retaining only the comment.
• Encourage people to send the X-UA-Compatible HTTP header instead of leaving it in the HTML, to avoid edge case issues.
• Remove the cache-busting query parameters from the HTML.
• Simplify the conditional comment containing code for IE 9+ and modern browsers
• Simpler escape for .
• Encourage people to use a custom Modernizr build containing only the features they need for that particular project.
• Added maximum touch-icon support.
• Add a link to optional tags that could be added to the element.
• Standardize the use of single and double quotes.
• Added Site Speed tracking for Google Analytics
• Google Analytics now retrieved with Modernizr.load() for byte brevity and optimal speed

style­.css

• Major: Now using css normalization instead of css reset + building up default styles.
• Add ‘oldie’ class to conditional classnames.
• Add img { max-width: 100%; } to print styles to prevent images from getting cut off.
• Update clearfix to use ‘micro’ clearfix
• Add placeholder CSS MQs for mobile-first approach
• Tweaking our hot pink ::selection. It is now #fe57a1, which is …
  Festal (adj): pertaining to or befitting a feast, festival, holiday, or gala occasion.
• Use black for links when printing
• added vertical-align: middle to fix borders on image containers.
• Add and {cursor:pointer} to element.
• Switch to outline:0 for accessible focus treatment. Avoids Opera bug when combined with transitions. Also saves bytes.
• Set {overflow:auto} for