Posted By

lowko0 on 04/08/13


Tagged

basic html start page base quick skeleton structure baseline starter 5 boilerplate html5


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

3polars
icecreamboyy
sumoringer


HTML5 Starter Page (Based on Skeleton Boilerplate)


 / Published in: HTML
 

This is a HTML5 Starter Page based on Skeleton Boilerplate. It has been made with the latest standards in web development. I made it cleaner than the original one, fixed some mistakes and added extra iOS icon resolutions, normalize.css and Google Analytics support.

 

The css files used should still be the ones from Skeleton, I just changed the name to more readable ones. The equivalences are:

 

global.css = base.css (https://raw.github.com/dhgamache/Skeleton/master/stylesheets/base.css)

grid.css = skeleton.css (https://raw.github.com/dhgamache/Skeleton/master/stylesheets/skeleton.css)

layout.css (https://raw.github.com/dhgamache/Skeleton/master/stylesheets/layout.css)

 

Also here's a link for CSS Normalizer:

 

normalize.css (https://raw.github.com/necolas/normalize.css/master/normalize.css)

 

 

Use at your own will.

Cheers, Luiz.

  1. <!doctype html>
  2. <html lang="en">
  3. <meta charset="utf-8">
  4. <meta name="robots" content="index, follow">
  5.  
  6. <title>Untitled</title>
  7.  
  8. <meta name="author" content="">
  9. <meta name="description" content="">
  10.  
  11.  
  12. <!-- Script -->
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  14. <script src="script/main.js"></script>
  15.  
  16.  
  17. <!-- Style -->
  18. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  19. <link rel="stylesheet" href="style/normalize.css" type="text/css">
  20. <link rel="stylesheet" href="style/global.css" type="text/css">
  21. <link rel="stylesheet" href="style/grid.css" type="text/css">
  22. <link rel="stylesheet" href="style/layout.css" type="text/css">
  23. <link rel="shortcut icon" href="images/favicon.ico">
  24.  
  25.  
  26. <!-- iOS -->
  27. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ios/apple-touch-icon-144x144-precomposed.png">
  28. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ios/apple-touch-icon-114x114-precomposed.png">
  29. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ios/apple-touch-icon-72x72-precomposed.png">
  30. <link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/ios/apple-touch-icon-57x57-precomposed.png">
  31. <meta name="apple-mobile-web-app-capable" content="yes">
  32. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  33.  
  34.  
  35. <!--[if lt IE 9]>
  36. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  37. <![endif]-->
  38.  
  39.  
  40. <!-- Google Analytics -->
  41. var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  42. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  43. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  44. s.parentNode.insertBefore(g,s)}(document,'script'));
  45. </script>
  46. </head>
  47. <div class="container">
  48. <!-- CONTENT STARTS HERE -->
  49. </div>
  50. </body>
  51. </html>

Report this snippet  

You need to login to post a comment.