HTML5 ★ Boilerplate

A rock-solid default for HTML5 awesome.

HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed.

Want to dive in?

Download Boilerplate v0.9.1 Updated Aug. 13th

Boilerplate documentedKeep the hints and links or Boilerplate "stripped"No comments, just the bizniss.

Follow updates on twitter ★ Contribute on Github ★ Comment right here

Why it is awesome

Cross-browser compatible (IE6, yeah we got that.)
HTML5 ready. Use the new tags with certainty.
Optimal caching and compression rules for grade-A performance
Best practice site configuration defaults
Mobile browser optimizations
Progressive enhancement graceful degradation … yeah yeah we got that
IE specific classes for maximum cross-browser control
Handy .no-js and .js classes to style based on capability
Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.

Why it is awesome-er

Javascript profiling…in IE6 and IE7? Sure, no problem.
Console.log nerfing so you won't break anyone by mistake.
Never go wrong with your doctype or markup!
An optimal print stylesheet, performance optimized
iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
IE6 pngfix baked in.
.clearfix, .visuallyhidden classes to style things wisely and accessibly.
.htaccess file that allows proper use of HTML5 features and faster page load
CDN hosted jQuery with local fallback failsafe.
Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)

Future Awesome (Coming Soon)

Build script to concatenate/minify your script & style and optimizes images.
Enable gzip technique (from Even Faster Websites) for all capable users.
~~Release with no explanatory comments, just the meat.~~ Boilerplate "stripped" is here!
~~SASS/HAML ports.~~ They're coming.

Walk through it with me, now

Make it even better!

Use rel="prefetch" for documents to pre-fetch.
Using border-radius with a border in Webkit? Try -webkit-background-clip to fix the bleed.
Write efficient CSS for optimum browser performance.
Kick off your page-specific javascript based on your markup.
Know your available browser CSS hacks.
Get your team hooked using the same front-end coding standards and best practices.
Use Microformats (via microdata) for optimum search results visibility.
You can use the body element as a wrapper, so you need not use a div#container.

Comments

Show 200+ comments