Created
February 9, 2012 14:46
-
-
Save amereservant/1780446 to your computer and use it in GitHub Desktop.
HTML5 Template
This file contains 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> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <title></title> | |
| <meta name="description" content="" /> | |
| <meta name="author" content="" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <!-- | |
| <script src="js/libs/modernizr-2.0.min.js"></script> | |
| <script src="js/libs/respond.min.js"></script> | |
| --> | |
| </head> | |
| <body> | |
| <div id="header-container"> | |
| <header class="wrapper"> | |
| <h1 id="title">Your title</h1> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Some</a></li> | |
| <li><a href="#">navigation</a></li> | |
| <li><a href="#">links</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| </div> | |
| <div id="main" class="wrapper"> | |
| <aside> | |
| <h3>Something aside</h3> | |
| </aside> | |
| <article> | |
| <header> | |
| <h2>Your article heading</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra. Pellentesque auctor neque quis nisl lacinia id rutrum lacus venenatis.</p> | |
| </header> | |
| <h3>A smaller heading</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra. Pellentesque auctor neque quis nisl lacinia id rutrum lacus venenatis.</p> | |
| <h3>A smaller heading</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra. Pellentesque auctor neque quis nisl lacinia id rutrum lacus venenatis.</p> | |
| <footer> | |
| <h3>About the author</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p> | |
| </footer> | |
| </article> | |
| </div> | |
| <div id="footer-container"> | |
| <footer class="wrapper"> | |
| <h3>A nice footer</h3> | |
| </footer> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script> | |
| <script src="js/script.js"></script> | |
| <script> | |
| var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID | |
| (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1; | |
| g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; | |
| s.parentNode.insertBefore(g,s)}(document,'script')); | |
| </script> | |
| <!--[if lt IE 7 ]> | |
| <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script> | |
| <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script> | |
| <![endif]--> | |
| </body> | |
| </html> |
This file contains 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
| /* Reset and set defaults | |
| -------------------------------------------------------------------------------*/ | |
| html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent } | |
| article, aside, figure, footer, header, hgroup, nav, section { display:block } | |
| img, object, embed { max-width:100% } | |
| /* force a vertical scrollbar to prevent a jumpy page */ | |
| html { overflow-y:scroll } | |
| h1, h2, h3, h4, h5, h6 { display:block } | |
| /* we use a lot of ULs that aren't bulleted. | |
| don't forget to restore the bullets within content. */ | |
| ul { list-style:none } | |
| blockquote, q { quotes:none } | |
| blockquote:before, blockquote:after, q:before, q:after { content:''; content:none } | |
| a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent } | |
| del { text-decoration:line-through } | |
| abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help } | |
| /* tables still need cellspacing="0" in the markup */ | |
| table { border-collapse:collapse; border-spacing:0 } | |
| th { font-weight:bold; vertical-align:bottom } | |
| td { font-weight:normal; vertical-align:top } | |
| hr { display:block; height:1px; border:0; border-top:1px solid #CCC; margin:1em 0; padding:0 } | |
| input, select { vertical-align:middle } | |
| pre { white-space:pre; /* CSS2 */ white-space:pre-wrap; /* CSS 2.1 */ white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap:break-word; /* IE */ } | |
| input[type="radio"] { vertical-align:text-bottom } | |
| input[type="checkbox"] { vertical-align:bottom; *vertical-align:baseline } | |
| .ie6 input { vertical-align:text-bottom } | |
| select, input, textarea { font:99% sans-serif } | |
| table { font-size: inherit; font: 100% } | |
| /* Accessible focus treatment | |
| people.opera.com/patrickl/experiments/keyboard/test */ | |
| a:hover, a:active { outline:none } | |
| small { font-size:85% } | |
| strong, th { font-weight:bold } | |
| td, td img { vertical-align:top } | |
| /* Make sure sup and sub don't screw with your line-heights | |
| gist.github.com/413930 */ | |
| sub, sup { font-size:75%; line-height:0; position:relative } | |
| sup { top:-0.5em } | |
| sub { bottom:-0.25em } | |
| /* standardize any monospaced elements */ | |
| pre, code, kbd, samp { font-family:monospace, sans-serif } | |
| /* hand cursor on clickable elements */ | |
| .clickable, label, input[type=button], input[type=submit], button { cursor:pointer } | |
| /* Webkit browsers add a 2px margin outside the chrome of form elements */ | |
| button, input, select, textarea { margin:0 } | |
| /* make buttons play nice in IE */ | |
| button { width:auto; overflow:visible } | |
| /* scale images in IE7 more attractively */ | |
| .ie7 img { -ms-interpolation-mode:bicubic } | |
| /* prevent BG image flicker upon hover */ | |
| .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} | |
| /* let's clear some floats */ | |
| .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 } | |
| .clearfix:before, .clearfix:after { content:"\0020"; display:block; height:0; overflow:hidden; width:0 } | |
| .clearfix:after { clear:both } | |
| .clearfix { zoom:1 } | |
| .floatleft { float:left } | |
| .floatright { float:right } | |
| /* Ok, this is where the fun starts. | |
| -------------------------------------------------------------------------------*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment