Find file
Fetching contributors…
Cannot retrieve contributors at this time
287 lines (237 sloc) 13.9 KB
<!doctype html>
<html lang="en" class="no-js">
<meta http-equiv="X-UA-Compatible" content="IE=8;chrome=1" >
<meta charset="utf-8">
<title>HTML5 Boilerplate - A rock-solid default for HTML5 awesome.</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;" >
<link rel="shortcut icon" href="favicon.png" >
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" >
<link type="text/css" rel="stylesheet" media="screen" href="css/shCore.css" >
<!-- JavaScript at the bottom -->
<script type="text/javascript">
// &&
// alternatively using Moderizr does both of these.
(function(B,C){B[C]=B[C].replace(/\bno-js\b/,'js');if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})(document.documentElement,'className');
<!--[if lt IE 7 ]> <body class="ie6 "> <![endif]-->
<!--[if IE 7 ]> <body class="ie7 "> <![endif]-->
<!--[if IE 8 ]> <body class="ie8 "> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
<div id="container">
<b class="border-a"></b>
<b class="border-b"></b>
<b class="border-c"></b>
<b class="border-d"></b>
<div id="header">
<h1>HTML5 <i>&#x2605;</i> Boilerplate</h1>
<h2>A rock-solid default for HTML5 awesome.</h2>
<p>HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.</p>
<p>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.</p>
<p>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.</p>
<div id="body">
<h3>Want to dive in?</h3>
<p class="bptext">Download Boilerplate v0.9.1 <small><a href="">Updated Aug. 13th</a></small></p>
<p class="dwn">
<span><a href="">Boilerplate documented</a> <small>Keep the hints and links</small></span>
<span><a href="">Boilerplate "stripped"</a> <small>No comments, just the bizniss.</small></span>
<a href="">Follow updates on twitter</a>
<a href="">Contribute on Github</a>
<a href="#disqus_thread">Comment right here</a>
<h3>Why it is awesome</h3>
<li>Cross-browser compatible (IE6, yeah we got that.)
<li>HTML5 ready. Use the new tags with certainty.
<li>Optimal caching and compression rules for grade-A performance</li>
<li>Best practice site configuration defaults</li>
<li>Mobile browser optimizations</li>
<li>Progressive enhancement graceful degradation &hellip; yeah yeah we got that</li>
<li>IE specific classes for maximum cross-browser control</li>
<li>Handy .no-js and .js classes to style based on capability
<li>Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.</li>
<h3>Why it is awesome-er</h3>
<li>Javascript profiling&hellip;in IE6 and IE7? Sure, no problem.</li>
<li>Console.log nerfing so you won't break anyone by mistake.</li>
<li>Never go wrong with your doctype or markup!</li>
<li>An optimal print stylesheet, performance optimized</li>
<li>iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.</li>
<li>IE6 pngfix baked in.</li>
<li>.clearfix, .visuallyhidden classes to style things wisely and accessibly.
<li>.htaccess file that allows proper use of HTML5 features and faster page load</li>
<li>CDN hosted jQuery with local fallback failsafe.</li>
<li>Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)</li>
<h4>Future Awesome <em>(Coming Soon)</em></h4>
<li>Build script to concatenate/minify your script &amp; style and optimizes images.</li>
<li>Enable gzip technique (from Even Faster Websites) for <strong>all</strong> capable users.</li>
<li><s>Release with no explanatory comments, just the meat.</s> Boilerplate "stripped" is here!
<li><s>SASS/HAML ports.</s> <a href="">They're coming.</a>
<h3 id="thesource">Walk through it with me, now</h3>
<h3>Get the lowdown in 40 minutes, flat!</h3>
<embed src="" type="application/x-shockwave-flash" width="480" height="330" allowscriptaccess="always" allowfullscreen="true"></embed>
<div class="recos">
<h3>Make it even better!</h3>
<li>Use <code>rel="prefetch"</code> for <a href="">documents to pre-fetch</a>.</li>
<li>Using border-radius with a border in Webkit? Try <a href="">-webkit-background-clip</a> to fix the bleed.</li>
<li>Write <a href="">efficient CSS</a> for optimum browser performance.</li>
<li>Kick off your page-specific javascript <a href="">based on your markup</a>.</li>
<li>Know your available <a href="">browser CSS hacks</a>.</li>
<li>Get your team hooked using the same <a href="">front-end coding standards and best practices.</a></li>
<li>Use <a href="">Microformats</a> (via <a href="">microdata</a>) for optimum search results <a href="">visibility</a>.</li>
<li>You can use the <a href="">body element as a wrapper</a>, so you need not use a div#container.</li>
<!-- <li> Consider some more opinionated styles by default, <a href="">by Kroc Camen</a>.</li> -->
<div id="footer">
<p><em class="focus">Brought to you by</em> <a href=""><img width="50" height="50" src="assets/paul-irish.png"> Paul Irish <i>Google Chrome, jQuery</i></a> <a href=""><img width="50" height="50" src="assets/divya-manian.png">Divya Manian <i>Open Web Vigilante</i></a></p>
<p>It would not have been possible without the efforts of these superheroes:</p>
<li><a href="">Stoyan Stefanov</a></li>
<li><a href="">Mathias Bynens</a></li>
<li><a href="">Eric Meyer</a></li>
<li><a href="">Richard Clark</a></li>
<li><a href="">Anthony Kolber</a></li>
<li><a href="">Patrick H Lauke</a></li>
<li><a href="">Tim Van Damme</a></li>
<li><a href="">Faruk Ateş</a></li>
<li><a href="">Remy Sharp</a></li>
<li><a href="">Drew Diller</a></li>
<li><a href="">Adam McIntyre</a></li>
<li><a href="">Thierry Koblentz</a></li>
<li><a href="">Mike Taylor</a></li>
<li><a href="">Jonathan Neal</a></li>
<li><a href="">Kroc Camen</a></li>
<li><a href="">Ethan Dunham</a></li>
<li><a href="">Flickr</a></li>
<li><a href="">Viget</a></li>
<li><a href="">Steve Souders</a></li>
<li><a href="">Jeffery Zeldman</a></li>
<li><a href="">Andy Clarke</a>
<li><a href="">Isobar Interface Development team</a></li>
<div class="disqus-wrapper">
<div id="disqus_thread">
<a href="#dsq-content">Show 300+ comments</a>
<script src=""></script>
<script src=""></script>
<script type="text/javascript" src="js/syntax.js?apache"></script>
<script >
var pages = [
var local = [
function mycallback(data,status,xhr,filename){
data = data.replace(/</g,'&lt;');
var fileext = filename.replace('htaccess.txt?.xml','htaccess.apache').split('.').slice(-1)[0];
var elem = $('<textarea>').addClass('brush:'+fileext).html(data).css('visibility','hidden');
var point = $('#thesource').nextAll('textarea, .syntaxhighlighter').andSelf().last();
var x = SyntaxHighlighter.highlight(undefined, elem[0]);
if (mycallback.countdown === undefined) mycallback.countdown = local.length;
if (mycallback.countdown === 0){
// not sure why the movile viewport block doesnt get commented but.. it doesnt
var viewport = $('code.plain:contains(Mobile Viewport Fix)').closest('div.line');
viewport.nextAll().slice(0,5).add(viewport).find('.plain').toggleClass('plain comments');
$(this).html( linkify( this.innerHTML ) );
method: 'GET',
dataType : 'text',
cache : false,
success : function(data,status,xhr){
url : path
SyntaxHighlighter.config.tagName = 'textarea';
SyntaxHighlighter.defaults['wrap-lines'] = true; // maybe change this
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['tab-size'] = 4;
// smooth scrolling to in-page anchors.
$.fn.smoothScrollTo = function(){
return'click', function (e) {
var elm = $(this).attr('href');
if(!$(elm).is(':visible')) {
$('html,body').animate({'scrollTop': $(elm).offset().top-40+'px'}); // 40px buffer to top.
var dsqlength = jQuery('ul#dsq-comments').length + 1;
function () {
jQuery(this).text('Hide Comments');
function () {
jQuery(this).text('Show 200+ Comments');
<script type="text/javascript">
var disqus_developer = ( /file/.test(location.protocol) || /(localhost|dropbox)/.test( ) ? undefined : 1;
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
var _gaq = [['_setAccount', 'UA-17904194-1'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = '//';
s.parentNode.insertBefore(g, s);
})(document, 'script');