Skip to content

Instantly share code, notes, and snippets.

@cloudbring

cloudbring/gist:306279

Created February 17, 2010 04:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cloudbring/306279 to your computer and use it in GitHub Desktop.
Save cloudbring/306279 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Bilal Cinarli" />
<title>HTML5 Starter Kit</title>
<meta name="keywords" content="html, html5, starter kit" />
<meta name="description" content="HTML5 starter kit for wordpress themes and any other web pages" />
<link rel="bookmark shortcut icon" href="images/favicon.png" />
<link type="text/css" rel="stylesheet" href="css/global.css" />
<link type="text/css" rel="stylesheet" href="css/styles.html5.css" />
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="css/styles.ie6.css" />
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="/">HTML5 Starter Kit</a></h1>
<h2>A starting point to your psd to html process</h2>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about" title="About the Author">About</a></li>
<li><a href="#blog" title="Read more articles on Woorkup.com">Blog</a></li>
<li><a href="#contact" title="Say Hello">Contact</a></li>
</ul>
</nav>
<form id="search" action="">
<label for="s">Search</label>
<input type="text" name="s" id="s" />
<button type="submit">Search</button>
</form>
</header><!-- /header -->
<section id="main">
<div>
<article>
<div class="header">
<h1>About HTML5 Starter Kit</h1>
<p class="info">
<span class="author">Author: <a href="#">Bilal Çınarlı</a></span> | <span class="date">January 8th, 2010</span> | <span class="categories"><a href="#">Documentation</a>, <a href="#">Tutorials</a></span> | <span class="comments"><a href="#comments">123 Comments</a></span>
</p>
</div>
<p>HTML5 Starter kit is a basic starting point for your psd to html process. It contains most of common elements that are present in every web page. You can use this as a base for your website or wordpress theme.</p>
<h2>Properties</h2>
<ol>
<li>It has all starting needs with a global reset (not a really reset perhaps), layout definitions and text definitions with most used heading (h1 to h3), ordered and unordered lists, paragraph and link styles</li>
<li>HTML layout consist of a header section, navigation, main column, sidebar and footer</li>
<li>You can changed the easily change or move the part such as seach box, navigation by copying and pasting to them to another section like from header to sidebar.</li>
<li>It has a favicon definition by default. Just prepare a 16x16px or 32x32px sized png image named as favicon.png and put it into images directory</li>
<li>I did not provide any images, since this document should be the layout template for your work</li>
<li>By default both jQuery and MooTools javascript frameworks are added at the very end of the page from google jsapi. Just delete the definition line which framework you're not going to be use. Also if you want to use local files for these frameworks, you should remove google jsapi line and add &lt;script type="text/javascript" src="scripts/your_local_js_framework_file.js"&gt;&lt;/script&gt;</li>
<li>If you want you can use HTML4 version of this kit which is also present in the <a href="html_starter_kit.rar">rar file</a> named as index.html.
</li>
</ol>
</article>
<article>
<header>
<h1>Article Title</h1>
<p class="info">
<span class="author">Author: <a href="#">Bilal Çınarlı</a></span> | <span class="date">January 8th, 2010</span> | <span class="categories"><a href="#">Documentation</a>, <a href="#">Tutorials</a></span> | <span class="comments"><a href="#comments">123 Comments</a></span>
</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec dolor tellus, quis mattis velit. Donec nisi libero, facilisis ut ornare vitae, vestibulum at dui. Mauris eu nunc velit. In erat tortor, interdum vel ultricies sed, tincidunt sit amet neque. Quisque eu nisi sed felis porta sodales a non nunc. Nunc nec nisi sit amet nisi hendrerit vulputate. In tincidunt volutpat nisl ut sodales. Donec mollis, turpis vitae cursus imperdiet, lacus velit pulvinar felis, et posuere turpis nibh vitae risus. Sed quam sem, suscipit vel dapibus et, dictum id nunc. Fusce eleifend ligula a elit euismod ultricies sit amet posuere mi. Vestibulum nunc turpis, imperdiet vel condimentum at, faucibus a sapien. Sed ullamcorper purus id dolor aliquam non accumsan neque elementum. Etiam quis tellus eget lectus tristique fermentum. In eget feugiat ipsum. Curabitur tincidunt varius aliquet.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur mauris at elit tempus hendrerit. Mauris sed augue odio. Aenean tincidunt massa nec tortor luctus mollis. Praesent non lectus turpis, a faucibus lacus. Suspendisse potenti. Suspendisse nec rhoncus orci. Vivamus sed consectetur dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante sem, vulputate id elementum et, tristique at sem. </p>
</article>
<article>
<header>
<h1>Another Article Title</h1>
<p class="info">
<span class="author">Author: <a href="#">Bilal Çınarlı</a></span> | <span class="date">January 8th, 2010</span> | <span class="categories"><a href="#">Documentation</a>, <a href="#">Tutorials</a></span> | <span class="comments"><a href="#comments">123 Comments</a></span>
</p>
<header>
<p>Vestibulum aliquet turpis eu leo ultricies mattis commodo lorem accumsan. Aliquam sagittis diam ac magna suscipit sollicitudin. Suspendisse sapien felis, auctor laoreet interdum ut, bibendum id diam. In hac habitasse platea dictumst. Nunc venenatis felis eget erat mattis vitae consequat enim ornare. Maecenas libero dui, pretium at ornare a, posuere eget ante. Fusce faucibus mauris a sapien lacinia id vehicula ligula blandit. Proin nisi ante, congue id consequat at, adipiscing vel nisi. Nam at velit quis tellus placerat suscipit. Ut imperdiet, mauris quis auctor lobortis, lectus odio mollis purus, quis consequat nunc nisl scelerisque felis. Cras lacinia, libero non posuere commodo, turpis ante scelerisque risus, quis dignissim ligula mauris eu tortor. Cras et sem sed felis laoreet consectetur non sit amet augue. Etiam ultricies, diam vel vehicula ullamcorper, nibh lorem luctus magna, eget mattis arcu augue nec enim. Nullam sed nulla sapien. Proin eget libero ac libero tempor congue. </p>
<h2>Article Subtitle (h2)</h2>
<p>Vestibulum blandit adipiscing arcu quis condimentum. Cras felis est, euismod non posuere in, ultricies eu dui. Nam sit amet nisi nunc. Aenean quam ligula, adipiscing in vehicula eu, feugiat et quam. Vestibulum pellentesque tortor nec ante tristique suscipit. Praesent vel lorem vitae sapien dictum bibendum. Vivamus ullamcorper aliquet varius. Curabitur ac odio a purus mattis dapibus in id est. Donec gravida consectetur sem. Nulla facilisi. Pellentesque id urna quis neque rhoncus varius ut feugiat nibh. Maecenas non ligula sit amet urna tempor venenatis. Sed consequat augue quis dolor congue faucibus. Phasellus pulvinar tellus eu metus dignissim in adipiscing leo bibendum. Nullam ut neque vel ipsum bibendum ultricies. Morbi tempor rutrum mauris, sit amet porta sem viverra sed. Ut viverra iaculis odio, vitae varius ante mollis in. Vivamus ut est risus.</p>
<h3>Article Subtitle (h3)</h3>
<ul>
<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
<li>Vivamus ornare luctus felis vitae facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Phasellus ut justo sit amet felis aliquet placerat. Sed quam odio, consectetur ut faucibus eu, ullamcorper non diam. </li>
<li>Suspendisse enim augue, pellentesque et porttitor et, molestie fringilla ligula.</li>
</ul>
</article>
</div>
</section><!-- /main section -->
<aside>
<h3>Categories</h3>
<ul>
<li><a href="#">Category #1</a></li>
<li><a href="#">Category #2</a></li>
<li><a href="#">Category #3</a></li>
<li><a href="#">Category #4</a></li>
<li><a href="#">Category #5</a></li>
</ul>
<h3>Downloads</h3>
<ul>
<li><a href="http://bcinarli.com/works/html_starter_kit/html_starter_kit.rar">Both HTML4 and HTML5 versions</a> (rar file, 10.5 kb)</li>
<li><a href="http://bcinarli.com/works/html_starter_kit/">HTML4 version</a> (rar file, 6.35 kb)</li>
<li><a href="http://bcinarli.com/works/html_starter_kit/">HTML5 version</a> (rar file, 6.10 kb)</li>
</ul>
</aside><!-- /aside -->
<div id="push"></div>
</div><!-- /wrapper -->
<footer>
<p id="copyright">&copy; 2010 - Bilal Çınarlı</p>
</footer><!-- /footer -->
<!-- javascript frameworks, just delete which is not going to be use, if you want the use a local file for the framework, delete both google jsapi line and google.load lines. -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("mootools", "1.2.4");
</script>
<!-- page scripts you can define your javascript codes in the scripts/scripts.js file -->
<script type="text/javascript" src="scripts/scripts.js"></script>
<!-- analytics codes, just copy and past your google analytics codes here, or past them into the scripts/analytics.js -->
<script type="text/javascript" src="scripts/analytics.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment