HTML5 Boilerplate: The web's most popular front-end template

<!DOCTYPE html> <html lang="en-us"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://html5boilerplate.com/","20121216123917","https://web.archive.org/","web","/_static/", "1355661557"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"> <title>HTML5 Boilerplate: The web's most popular front-end template</title> <meta name="description" content="HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. Spend more time developing and less time reinventing the wheel."> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://web.archive.org/web/20121216123917cs_/http://fonts.googleapis.com/css?family=Open+Sans:400,700"> <link rel="stylesheet" href="/web/20121216123917cs_/http://html5boilerplate.com/css/main-7b3fecba68527e3c683b5ffed5a0c131.min.css"> <script src="/web/20121216123917js_/http://html5boilerplate.com/js/html5.js"></script> </head> <body> <div class="container"> <header class="site-header cf" role="banner"> <div class="site-logo"> HTML5 <span class="star">★</span> Boilerplate </div> <ul class="site-nav inline-block-list"> <li><a href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/html5-boilerplate" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label="Source code">Source code</a></li> <li><a href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/html5-boilerplate/blob/v4.0.2/doc/TOC.md" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label="Docs">Docs</a></li> <li><a href="https://web.archive.org/web/20121216123917/http://h5bp.github.com/" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label="Other projects">Other projects</a></li> </ul> </header> <div class="site-promo"> <h1>The web’s most popular front-end template</h1> <p class="description">HTML5 Boilerplate helps you build <strong>fast</strong>, <strong>robust</strong>, and <strong>adaptable</strong> web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.</p> <div class="cta-option"> <a class="btn-download" href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/html5-boilerplate/zipball/v4.0.2" data-ga-category="Download" data-ga-action="Download - top" data-ga-label="v4.0.2"> <strong>Download</strong> <span class="version">v4.0.2</span> </a> <a class="last-update" href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/html5-boilerplate/blob/v4.0.2/CHANGELOG.md"> See the CHANGELOG </a> </div> <div class="cta-option"> <a class="btn-download btn-download-alt" href="https://web.archive.org/web/20121216123917/http://initializr.com/" data-ga-category="Outbound links" data-ga-action="Get custom build" data-ga-label="v4.0.2"> Get a custom build </a> </div> </div> </div> <div class="site-content"> <div class="container"> <h2>Save time. Create with confidence.</h2> <div class="grid"> <div class="grid-cell"> <h3><span class="star">★</span> Analytics, icons, and more</h3> <p>A lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icons; and docs covering dozens of extra tips and tricks.</p> </div> <div class="grid-cell"> <h3><span class="star">★</span> Normalize.css and helpers</h3> <p>Includes <a href="https://web.archive.org/web/20121216123917/http://necolas.github.com/normalize.css/">Normalize.css</a> v1.0.x — a modern, HTML5-ready alternative to CSS resets — and further base styles, helpers, media queries, and print styles.</p> </div> <div class="grid-cell"> <h3><span class="star">★</span> jQuery and Modernizr</h3> <p>Get the latest minified versions of two best-of-breed libraries: <a href="https://web.archive.org/web/20121216123917/http://jquery.org/">jQuery</a> (via Google’s CDN, with local fallback) and the <a href="https://web.archive.org/web/20121216123917/http://modernizr.com/">Modernizr</a> feature detection library.</p> </div> <div class="grid-cell"> <h3><span class="star">★</span> High performance</h3> <p>Apache settings to help you deliver excellent site performance. We independently maintain <a href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/server-configs">other server configs</a>, a <a href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/node-build-script">node build script</a>, and an <a href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/ant-build-script">ant build script</a>.</p> </div> </div> <div class="flex-embed"> <iframe width="720" height="540" src="https://web.archive.org/web/20121216123917if_/http://www.youtube.com/embed/WkLO-q2wC80?theme=light" frameborder="0" allowfullscreen></iframe> </div> <h2>Who uses HTML5 Boilerplate?</h2> <p class="in-the-wild"> <a href="https://web.archive.org/web/20121216123917/http://www.projectrebrief.com/">Google</a>, <a href="https://web.archive.org/web/20121216123917/http://www.microsoft.com/surface/">Microsoft</a>, <a href="https://web.archive.org/web/20121216123917/http://data.nasa.gov/">NASA</a>, <a href="https://web.archive.org/web/20121216123917/http://www.nikeskateboarding.com/">Nike</a>, <a href="https://web.archive.org/web/20121216123917/http://www.barackobama.com/">Barack Obama</a>, <a href="https://web.archive.org/web/20121216123917/http://a-class.mercedes-benz.com/">Mercedes-Benz</a>, <a href="https://web.archive.org/web/20121216123917/http://www.itv.com/news/">ITV News</a>, <a href="https://web.archive.org/web/20121216123917/http://www.astuteclass.com/">BAE Systems</a>, <a href="https://web.archive.org/web/20121216123917/http://creativecommons.org/">Creative Commons</a>, <a href="https://web.archive.org/web/20121216123917/http://auspost.com.au/">Australia Post</a>, <a href="https://web.archive.org/web/20121216123917/http://www.ew.com/">Entertainment Weekly</a>, <a href="https://web.archive.org/web/20121216123917/http://www.racinggreen.co.uk/">Racing Green</a>, and many more. </p> <div class="cta-option"> <a class="btn-download" href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/html5-boilerplate/zipball/v4.0.2" data-ga-category="Download" data-ga-action="Download - bottom" data-ga-label="v4.0.2"> <strong>Download</strong> <span class="version">v4.0.2</span> </a> </div> </div> </div> <aside class="aside"> <div class="container"> <ul class="inline-block-list"> <li><a href="https://web.archive.org/web/20121216123917/https://github.com/h5bp/html5-boilerplate/issues" data-ga-category="Outbound links" data-ga-action="Footer click" data-ga-label="Report issues"> <img class="icon" src="https://web.archive.org/web/20121216123917im_/http://www.google.com/s2/favicons?domain=github.com" alt=""> Report issues </a></li> <li><a href="https://web.archive.org/web/20121216123917/http://stackoverflow.com/questions/tagged/html5boilerplate" data-ga-category="Outbound links" data-ga-action="Footer click" data-ga-label="Help on Stack Overflow"> <img class="icon" src="https://web.archive.org/web/20121216123917im_/http://www.google.com/s2/favicons?domain=stackoverflow.com" alt=""> Help on Stack Overflow </a></li> <li><a href="https://web.archive.org/web/20121216123917/http://html5boilerplate.tumblr.com/" data-ga-category="Outbound links" data-ga-action="Footer click" data-ga-label="View the showcase"> <img class="icon" src="https://web.archive.org/web/20121216123917im_/http://24.media.tumblr.com/avatar_c11b98176b89_16.png" alt=""> View the showcase </a></li> </ul> </div> </aside> <footer class="site-footer" role="contentinfo"> <div class="container"> <p> <a class="twitter-share-button" href="https://web.archive.org/web/20121216123917/https://twitter.com/share" data-count="none" data-lang="en" data-via="h5bp" data-size="large" data-text="HTML5 Boilerplate: The rock-solid professional front-end template" data-url="https://web.archive.org/web/20121216123917/http://html5boilerplate.com/">Tweet</a>   <a class="twitter-follow-button" href="https://web.archive.org/web/20121216123917/https://twitter.com/h5bp" data-show-count="false" data-lang="en" data-size="large">Follow @h5bp</a> </p> A project from <a href="https://web.archive.org/web/20121216123917/https://github.com/h5bp">H5BP</a> currently maintained by <a href="https://web.archive.org/web/20121216123917/http://nicolasgallagher.com/">Nicolas Gallagher</a>, <a href="https://web.archive.org/web/20121216123917/http://drublic.de/">Hans Christian Reinl</a>, <a href="https://web.archive.org/web/20121216123917/https://twitter.com/alrra">C茫t茫lin Mari艧</a>, <a href="https://web.archive.org/web/20121216123917/http://mathiasbynens.be/">Mathias Bynens</a>, <a href="https://web.archive.org/web/20121216123917/http://paulirish.com/">Paul Irish</a>, and <a href="https://web.archive.org/web/20121216123917/http://nimbupani.com/">Divya Manian</a>. </div> </footer> <script src="//web.archive.org/web/20121216123917js_/http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="/web/20121216123917js_/http://html5boilerplate.com/js/main-9de0d49ba1724977535a24551e4d9085.min.js"></script> <script> // Twitter widgets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://web.archive.org/web/20121216123917/http://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs'); // Google Analytics var _gaq=[['_setAccount','UA-17904194-1'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//web.archive.org/web/20121216123917/http://ssl':'//web.archive.org/web/20121216123917/http://www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> </body> </html>

CINXE.COM

HTML5 Boilerplate: The web's most popular front-end template