gistwebdev/gist:5552871

## gistfile1.html
<!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;"> &copy; </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>
	<!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>