Created
January 12, 2012 22:17
-
-
Save brianyang/1603480 to your computer and use it in GitHub Desktop.
html5 boilerplate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
< !doctype html > | |
<!-- | |
paulirish.com / 2008 / conditional - stylesheets - vs - css - hacks - answer - neither / --> | |
<!-- | |
[ | |
if lt IE 7] > < html class = "no-js lt-ie9 lt-ie8 lt-ie7" | |
lang = "en" > < ![endif] --> | |
<!-- | |
[ | |
if IE 7] > < html class = "no-js lt-ie9 lt-ie8" | |
lang = "en" > < ![endif] --> | |
<!-- | |
[ | |
if IE 8] > < html class = "no-js lt-ie9" | |
lang = "en" > < ![endif] --> | |
<!-- | |
Consider adding a manifest.appcache: h5bp.com / d / Offline --> | |
<!-- | |
[ | |
if gt IE 8] > <!-- | |
> < html class = "no-js" | |
lang = "en" > <!-- | |
< ![endif] --> | |
< head > < meta charset = "utf-8" > | |
<!-- | |
Use the.htaccess and remove these lines to avoid edge | |
case issues. | |
More info: | |
h5bp.com / b / 378 --> | |
< meta http - equiv = "X-UA-Compatible" | |
content = "IE=edge,chrome=1" > < title > < /title> | |
<meta name="description" content=""> | |
<!-- Mobile viewport optimized: h5bp.com/viewport-- > < meta name = "viewport" | |
content = "width=device-width,initial-scale=1" > | |
<!-- | |
Place favicon.ico and apple - touch - icon.png in the root directory: mathiasbynens.be / notes / touch - icons --> | |
< link rel = "stylesheet" | |
href = "css/style.css" > | |
<!-- | |
More ideas | |
for your < head > here: h5bp.com / d / head - Tips --> | |
<!-- | |
All JavaScript at the bottom, | |
except this Modernizr build incl.Respond.js | |
Respond is a polyfill | |
for min / max - width media queries.Modernizr enables HTML5 elements & feature detects; | |
for optimal performance, | |
create your own custom Modernizr build: www.modernizr.com / download / --> | |
< script src = "js/libs/modernizr-2.0.6.min.js" > < /script> | |
</head > < body > < header > < /header> | |
<div role="main"> | |
</div > < footer > < /footer> | |
<!-- JavaScript at the bottom for fast page loading --> | |
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> | |
<script src="/ / ajax.googleapis.com / ajax / libs / jquery / 1.7.1 / jquery.min.js "></script> | |
<script>window.jQuery || document.write('<script src=" | |
js / libs / jquery - 1.7.1.min.js "><\/script>')</script> | |
<!-- scripts concatenated and minified via build script --> | |
<script defer src=" | |
js / plugins.js "></script> | |
<script defer src=" | |
js / script.js "></script> | |
<!-- end scripts --> | |
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID. | |
mathiasbynens.be/notes/async-analytics-snippet --> | |
<script> | |
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; | |
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; | |
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; | |
s.parentNode.insertBefore(g,s)}(document,'script')); | |
</script> | |
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6. | |
chromium.org/developers/how-tos/chrome-frame-getting-started --> | |
<!--[if lt IE 7 ]> | |
<script defer src=" //ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script> | |
< script defer > window.attachEvent('onload', function () { | |
CFInstall.check({ | |
mode: 'overlay' | |
}) | |
}) < /script> | |
<![endif]--> | |
</body > < /html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment