Permalink
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">
<head>
<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">
// http://paulirish.com/2009/avoiding-the-fouc-v3/ && http://remysharp.com/2009/01/07/html5-enabling-script
// 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');
</script>
</head>
<!--[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>
<div id="body">
<h3>Want to dive in?</h3>
<p class="bptext">Download Boilerplate v0.9.1 <small><a href="http://github.com/paulirish/html5-boilerplate#readme">Updated Aug. 13th</a></small></p>
<p class="dwn">
<span><a href="http://github.com/paulirish/html5-boilerplate/zipball/v0.9.1">Boilerplate documented</a> <small>Keep the hints and links</small></span>
<i>or</i>
<span><a href="http://github.com/paulirish/html5-boilerplate/zipball/v0.9.1stripped">Boilerplate "stripped"</a> <small>No comments, just the bizniss.</small></span>
</p>
<p><i>
<a href="http://twitter.com/boiler_plate">Follow updates on twitter</a>
&#x2605;
<a href="http://github.com/paulirish/html5-boilerplate">Contribute on Github</a>
&#x2605;
<a href="#disqus_thread">Comment right here</a>
</i></p>
<h3>Why it is awesome</h3>
<ul>
<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>
</ul>
<h3>Why it is awesome-er</h3>
<ul>
<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>
</ul>
<h4>Future Awesome <em>(Coming Soon)</em></h4>
<ul>
<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="http://github.com/paulirish/html5-boilerplate/issues/#issue/43">They're coming.</a>
</ul>
<h3 id="thesource">Walk through it with me, now</h3>
<h3>Get the lowdown in 40 minutes, flat!</h3>
<embed src="http://blip.tv/play/gcMVgffAOgI%2Em4v" type="application/x-shockwave-flash" width="480" height="330" allowscriptaccess="always" allowfullscreen="true"></embed>
<div class="recos">
<h3>Make it even better!</h3>
<ul>
<li>Use <code>rel="prefetch"</code> for <a href="http://www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist/#link_prefetch">documents to pre-fetch</a>.</li>
<li>Using border-radius with a border in Webkit? Try <a href="http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed">-webkit-background-clip</a> to fix the bleed.</li>
<li>Write <a href="http://css-tricks.com/efficiently-rendering-css/">efficient CSS</a> for optimum browser performance.</li>
<li>Kick off your page-specific javascript <a href="http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/">based on your markup</a>.</li>
<li>Know your available <a href="http://paulirish.com/2009/browser-specific-css-hacks/">browser CSS hacks</a>.</li>
<li>Get your team hooked using the same <a href="http://molecularvoices.molecular.com/standards/">front-end coding standards and best practices.</a></li>
<li>Use <a href="http://microformats.org/wiki/Main_Page">Microformats</a> (via <a href="http://microformats.org/wiki/microdata">microdata</a>) for optimum search results <a href="http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html">visibility</a>.</li>
<li>You can use the <a href="http://camendesign.com/code/developpeurs_sans_frontieres">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="http://camendesign.com/design/">by Kroc Camen</a>.</li> -->
</ul>
</div>
</div>
<div id="footer">
<p><em class="focus">Brought to you by</em> <a href="http://paulirish.com"><img width="50" height="50" src="assets/paul-irish.png"> Paul Irish <i>Google Chrome, jQuery</i></a> <a href="http://nimbupani.com"><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>
<ul>
<li><a href="http://www.phpied.com">Stoyan Stefanov</a></li>
<li><a href="http://mathiasbynens.be/">Mathias Bynens</a></li>
<li><a href="http://meyerweb.com/">Eric Meyer</a></li>
<li><a href="http://richclarkdesign.com/">Richard Clark</a></li>
<li><a href="http://www.aestheticallyloyal.com/">Anthony Kolber</a></li>
<li><a href="http://www.splintered.co.uk/">Patrick H Lauke</a></li>
<li><a href="http://timvandamme.com">Tim Van Damme</a></li>
<li><a href="http://farukat.es/">Faruk Ateş</a></li>
<li><a href="http://remysharp.com/">Remy Sharp</a></li>
<li><a href="http://www.dillerdesign.com/">Drew Diller</a></li>
<li><a href="http://blog.amodernfable.com/">Adam McIntyre</a></li>
<li><a href="http://tjkdesign.com/">Thierry Koblentz</a></li>
<li><a href="http://miketaylr.com">Mike Taylor</a></li>
<li><a href="http://iecss.com">Jonathan Neal</a></li>
<li><a href="http://camendesign.com">Kroc Camen</a></li>
<li><a href="http://fontsquirrel.com">Ethan Dunham</a></li>
<li><a href="http://code.flickr.com/blog/">Flickr</a></li>
<li><a href="http://www.viget.com/inspire/">Viget</a></li>
<li><a href="http://stevesouders.com/">Steve Souders</a></li>
<li><a href="http://zeldman.com">Jeffery Zeldman</a></li>
<li><a href="http://stuffandnonsense.co.uk/blog">Andy Clarke</a>
<li><a href="http://na.isobar.com">Isobar Interface Development team</a></li>
</ul>
</div>
<div class="disqus-wrapper">
<div id="disqus_thread">
<h3>Comments</h3>
</div>
<a href="#dsq-content">Show 300+ comments</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://github.com/cowboy/javascript-linkify/raw/master/ba-linkify.min.js"></script>
<script type="text/javascript" src="js/syntax.js?apache"></script>
<script >
var pages = [
'http://github.com/paulirish/frontend-pro-template/raw/master/index.html',
'http://github.com/paulirish/frontend-pro-template/blob/master/css/style.css',
'http://github.com/paulirish/frontend-pro-template/blob/master/js/script.js'
];
var local = [
'./template/index.html',
'./template/css/style.css',
'./template/css/handheld.css',
'./template/js/script.js',
'./template/js/plugins.js',
'./template/crossdomain.xml',
'./template/robots.txt?.xml',
'./template/htaccess.txt?.xml',
];
function mycallback(data,status,xhr,filename){
//console.log(arguments);
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();
elem.insertAfter(point);
$('<h4>').text(filename.replace('?.xml','').replace('htaccess.txt','.htaccess')).insertAfter(point);
var x = SyntaxHighlighter.highlight(undefined, elem[0]);
if (mycallback.countdown === undefined) mycallback.countdown = local.length;
mycallback.countdown--;
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');
$('code.comments').each(function(){
$(this).html( linkify( this.innerHTML ) );
})
}
}
$.each(local,function(k,path){
$.ajax({
method: 'GET',
dataType : 'text',
cache : false,
success : function(data,status,xhr){
mycallback(data,status,xhr,
path.split('/').slice(-1)[0])
},
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 this.live('click', function (e) {
var elm = $(this).attr('href');
if(!$(elm).is(':visible')) {
$('a[href=#dsq-content]').trigger('click');
}
$('html,body').animate({'scrollTop': $(elm).offset().top-40+'px'}); // 40px buffer to top.
e.preventDefault();
});
};
var dsqlength = jQuery('ul#dsq-comments').length + 1;
jQuery('a[href=#disqus_thread]').smoothScrollTo();
jQuery('a[href=#dsq-content]').toggle(
function () {
jQuery(this).text('Hide Comments');
jQuery('#disqus_thread').show();
},
function () {
jQuery(this).text('Show 200+ Comments');
jQuery('#disqus_thread').hide();
}
);
</script>
<script type="text/javascript">
var disqus_developer = ( /file/.test(location.protocol) || /(localhost|dropbox)/.test(location.host) ) ? 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 = 'http://boilerplate.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=boilerplate">comments powered by Disqus.</a></noscript>
<script>
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 = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>