Last active
December 17, 2015 04:48
HTML: Template Skeleton
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> | |
<html class="no-js" lang="en"><!-- the "no-js" class is for Modernizr. --> | |
<head id="www-sitename-com" data-template-set="html5-skeleton"> | |
<meta charset="UTF-8"> | |
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame --> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>HTML5-SKELETON Template</title> | |
<meta name="author" content="Your Name Here"> | |
<meta name="keywords" content="Your keywords here"> | |
<meta name="description" content="Your page description here"> | |
<!-- Google will often use this as its description of your page/site. Make it good. --> | |
<meta name="google-site-verification" content=""> | |
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters --> | |
<!-- Dublin Core Metadata : http://dublincore.org/ --> | |
<meta name="DC.title" content="Project Name"> | |
<meta name="DC.subject" content="What you're about."> | |
<meta name="DC.creator" content="Who made this site."> | |
<!-- Mobile Viewport Fix | |
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag | |
device-width : Occupy full width of the screen in its current orientation | |
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height | |
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width--> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> | |
<!-- This is the traditional favicon. | |
- size: 16x16 or 32x32 | |
- transparency is OK | |
- see wikipedia for info on browser support: http://mky.be/favicon/ --> | |
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"> | |
<!-- The is the icon for iOS's Web Clip. | |
- size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one) | |
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png | |
- Transparency is not recommended (iOS will put a black BG behind the icon) --> | |
<!-- Using local fonts? make sure to read up http://www.red-team-design.com/google-font-api-and-typekit-solutions-vs-font-face --> | |
<!-- Google Web fonts example: load from Google server. You can use directly in your css --> | |
<link href='http://fonts.googleapis.com/css?family=Donegal+One' rel='stylesheet' type='text/css'> | |
<!-- CSS: screen, mobile & print are all in the same file --> | |
<link rel="stylesheet" href="css/style.css" type="text/css"> | |
<!-- all our JS is at the bottom of the page, except for Modernizr. --> | |
<script type="text/javascript" src="js/modernizr.custom-2.6.2.min.js"></script> | |
<!-- Asynchronous google analytics; this is the official snippet. | |
Replace UA-XXXXXX-XX with your site's ID and uncomment to enable. --> | |
<script type="text/javascript"> | |
var _gaq = _gaq || []; | |
_gaq.push(['_setAccount', 'UA-31122385-3']); | |
_gaq.push(['_trackPageview']); | |
(function() { | |
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
})(); | |
</script> | |
</head> | |
<body> | |
<div class="wrapper"><!-- not needed? up to you: http://camendesign.com/code/developpeurs_sans_frontieres --> | |
<header> | |
<img src="img/html5_skeleton.png" alt="HTML5-SKELETON logo" class="img_title inline"> | |
<h1 class="inline">HTML5-SKELETON Template</h1> | |
<img src="img/html5_skeleton.png" alt="HTML5-SKELETON logo" class="img_title inline"> | |
<nav> | |
<ul> | |
<li><a href="">Nav Link 1</a></li> | |
<li><a href="">Nav Link 2</a></li> | |
<li><a href="">Nav Link 3</a></li> | |
</ul> | |
</nav> | |
</header> | |
<div class="wrapper_content"> | |
<article> | |
<h1>Article Header</h1> | |
<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p> | |
<h2>Article Subhead</h2> | |
<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p> | |
</article> | |
<aside> | |
<h2>Sidebar Content</h2> | |
<nav> | |
<ul> | |
<li><a href="">Nav Link 1</a></li> | |
<li><a href="">Nav Link 2</a></li> | |
<li><a href="">Nav Link 3</a></li> | |
</ul> | |
</nav> | |
</aside> | |
</div> | |
<footer class="clearfix"> | |
<p><small>HTML5 SKELETON. Designed by <a href="http://smorcuend.es">smorcuend</a> <span style="-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); display: inline-block;"> © </span> <span id="copyright_year"></span> - All rights reversed.</small></p> | |
</footer> | |
<!--Fork me on Github --> | |
<a href="https://github.com/smorcuend/HTML5-SKELETON"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> | |
</div><!--wrapper --> | |
<!-- here comes the javascript --> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script> | |
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script> | |
<!-- this is where we put our custom functions --> | |
<script type="text/javascript" src="js/functions.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment