TekElephant/tekelephant.github.com
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Jayj HTML5 theme v2.1 - Readme</title>
<style type="text/css">
body{width:750px;margin:36px auto 60px auto;font:16px/30px Georgia,Times,'Times New Roman',serif}
a:link,a:visited{color:#2f6eb9;text-decoration:none}
a:hover,a:active{text-decoration:underline}
h1,h2,h3,h4,h5,h6{margin:40px 0 30px 0;color:#000;font-weight:bold;font-family:Arial,sans-serif}
h1{margin-top:80px;font-size:2.2em; border-bottom: 1px solid #e7e7e7; padding-bottom: 30px;}
h1 small { text-transform: uppercase; font-size: 16px; color: #ccc;}
h3 {font-weight: normal; border-bottom: 1px solid #e7e7e7; padding-bottom: 3px;}
.section h3 { margin-left: 15px; }
h4 { margin-bottom: 5px; }
code{color: #093;}
pre code{padding:0}
pre{background:#464646;border:2px solid #3e3e3e;border-right:none;border-left:none;border-radius:5px;color:#fff;font:14px/25px monospace,"Courier New",Courier;padding: 15px 25px;word-wrap:break-word;text-shadow:1px 1px 0px #3e3e3e;overflow:auto;margin-bottom:25px;}
ul{list-style:square}
blockquote{font-size:21px; line-height: 32px;}
ul.space li{margin-bottom:10px}
.section{ border-bottom: 1px solid #e7e7e7; }
.note {
color: #444;
font: 14px/25px Georgia, "Times New Roman", Times, serif;
padding: 25px;
margin: 0 0 25px 0;
border-radius: 5px;
}
.note {
background: #fffbbc;
/*border: 1px solid #E6DB55;*/
box-shadow: 0px 0px 10px #E6DB55;
}
#credits small {
float: right;
}
ol.alpha {list-style:upper-alpha;}
ol ol {
list-style: lower-roman;
}
ol ol ol {
list-style: lower-alpha;
}
img {
background: #f4f4f4;
padding: 10px;
}
.alignright {
float: right;
}
img.alignright {
margin: 0 -70px 0 60px;
}
table {
border-collapse: collapse;
border-spacing: 0;
font: 15px/2 sans-serif;
width: 100%;
margin-bottom: 20px;
}
table th,
table td {
border-top: 1px solid #ddd;
padding: 8px;
line-height: 18px;
text-align: left;
vertical-align: top;
}
table tbody tr:hover td,
table tbody tr:hover th {
background-color: #f5f5f5;
}
table th {
font-weight: bold;
}
table thead th {
vertical-align: bottom;
}
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
border-top: 0;
}
table tbody + tbody {
border-top: 2px solid #ddd;
}
/* tfoot */
tfoot td {
background: #f7f7f7;
color: #777;
font-size: 11px;
text-transform: uppercase;
box-shadow: inset 0 1px 1px 0 #eee;
}
tfoot th {
color: #444;
font-size: 12px;
text-transform: uppercase;
}
/* Table caption */
table caption {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Jayj HTML5 theme v2.1 <small>By <a href="http://jayj.dk">Jayj.dk</a></small></h1>
<blockquote>
<p>Thanks for downloading my free HTML5 and CSS3 theme!</p>
</blockquote>
<p><strong>You are free to use this theme for any purpose</strong> - both private and commercial. You're allowed to remove the credit link in the footer, but please, please leave it there. It allows me continuing creating free themes. </p>
<p class="note"><a href="https://github.com/jayj/Jayj-HTML5">Check out the source code on Github</a>. You can get the latest development version and the up-to-date wiki</p>
<h4>Other versions of the theme</h4>
<p>The theme is available as both WordPress and Blogger theme as well</p>
<ul>
<li>Download <a href="http://www.longren.org/wordpress/html5press/">WordPress version</a> by Tyler Longren (currently v2.0)</li>
<li>Download <a href="http://www.bloggerbits.com/2010/09/css3-theme-free-blogger-template/">Blogger version</a> by Rethnaraj Rambabu (old version of the theme)</li>
</ul>
<h2>Features</h2>
<ul>
<li>Uses HTML5 and CSS3</li>
<li>Uses the CSS preprocessor <a href="http://lesscss.org/">LESS</a></li>
<li>Awesome design with a <span style="color: #f71570;">hot pink</span> color! (can easily be changed)</li>
<li><strong>Fully working Ajax PHP contact form</strong></li>
<li><a href="http://www.modernizr.com/">Modernizr</a> for enabling of HTML5 elements & feature detects</li>
<li>Uses the fonts <a href="http://goo.gl/QufgJ">Open Sans</a> and <a href="http://goo.gl/QufgJ">Merriweather</a>, both loaded from Google Fonts</li>
<li>Uses a 12-col grid system, known from Twitter Bootstrap</li>
<li>The theme supports Google Prettify but it is not included in the download. <a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a></li>
<li>Friendly IE6 & IE7 warning; user is recommended to update or install Google Chrome Frame</li>
<li>Free to use! (: – It's released under <a href="http://www.opensource.org/licenses/bsd-license.php">New BSD License</a>. The license is included in license.txt</li>
</ul>
<h2>License</h2>
<p>The theme is licensed under the <a href="http://www.opensource.org/licenses/bsd-license.php">New BSD License</a></p>
<h2>How to use LESS</h2>
<p>Version 2.1 uses the CSS preprocessor <a href="http://lesscss.org/">LESS</a>. <em>What is LESS?</em> you might ask. According to the official website, LESS is a "dynamic stylesheet language". LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.</p>
<p>In more simple terms, LESS allows you to write CSS in a smarter way by combining functions, mixins, operations and more.</p>
<h3>Read more about LESS</h3>
<ul>
<li><a href="http://lesscss.org/">Official site</a>
<li><a href="http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive">LESS tutorial by Jonathan Verrecchia</a>
<li><a href="http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/">Using the LESS CSS Preprocessor for Smarter Style Sheets</a>
</ul>
<h3>Using LESS in this theme</h3>
<p>If you want to change the colors and/or fonts in this theme you can either edit style.css or edit the <code>variables.less</code> file. The advantage of that is you don't have to change the colors every single place, you can just change the variable and LESS will take care of it for you. Also, it will make it so much easier to update in the future!</p>
<p>In the <code>variables.less</code> file, I use a two-tier system, with both functional and descriptive variables. In the top I define colors like black, different shades of gray, blue, red and so on.</p>
<p>When I use those colors in the functional variables like <code>@primaryColor</code>, <code>@bodyBackground</code> and <code>@blockquoteBorder. </code>
<h4>Mixins.less</h4>
<p>The <code>mixins.less</code> file contains the mixins used in <code>style.less</code>. A mixin is basically a group of CSS properties grouped into one, which can then be inserted into various other LESS selectors. You can think of it like a variable, with several different properties.</p>
An example is the gradient mixin. Instead of writing all the different version over and over again, you can use:
<pre>
#gradient > .vertical(@start, @end, @fallback);
// This
#gradient > .vertical(@red, @blue, @black); // These variables are defined in variables.less
// Will be converted to this
background-color: #000000;
background-image: -moz-linear-gradient(top, #e9322d, #049cdb 100%);
background-image: -ms-linear-gradient(top, #e9322d, #049cdb 100%);
background-image: -webkit-linear-gradient(top, #e9322d, #049cdb 100%);
background-image: -o-linear-gradient(top, #e9322d, #049cdb 100%);
background-image: linear-gradient(top, #e9322d, #049cdb 100%);
</pre>
<h3>LESS compilers</h3>
<ul>
<li><a href="http://incident57.com/less/Less.app">Less.app/Codekit</a> (Mac OS X only)
<li><a href="http://wearekiss.com/simpless">SimpLESS</a> (Windows, Linux, Mac OS X)
<li><a href="http://livereload.com/">LiveReload</a> (Mac OS X, Windows)
<li><a href="http://winless.org/">WinLESS</a> (Windows)
<li><a href="http://leafo.net/lessphp/">lessphp</a> (PHP)
</ul>
<h2>Credits</h2>
<ul>
<li><a href="http://www.google.com/webfonts/specimen/Open+Sans">Open Sans font</a> by Steve Matteson (Apache License, version 2.0)</li>
<li><a href="http://www.google.com/webfonts/specimen/Merriweather">Merriweather font</a> by Eben Sorkin (SIL Open Font License, 1.1)</li>
<li><a href="http://modernizr.com">Modernizr</a> (MIT & BSD license)</li>
<li><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></li>
<li><a href="http://necolas.github.com/normalize.css/">normalize.css</a></li>
<li><a href="http://twitter.github.com/bootstrap/">Bootstrap, from Twitter</a> (Apache License v2.0)</li>
<li>Tyler Longren for WordPress version</li>
<li>Rethnaraj Rambabu for Blogger version</li>
<li><strong>You!</strong> For being awesome</li>
</ul>
<h2>Help</h2>
Learn more about HTML5 and CSS3:
<ul>
<li><a href="http://html5doctor.com/">HTML5 Doctor</a></li>
<li><a href="http://www.css3.info/">CSS3.info</a></li>
<li><a href="http://html5rocks.com">HTML5 Rocks</a></li>
<li><a href="http://caniuse.com/">When can I use...</a></li>
<li><a href="http://html5please.com/">HTML5 Please</a></li>
</ul>
Please use this link if you want to share this theme: <br />
<a href="http://jayj.dk/2009/a-free-html5-and-css3-theme/">http://jayj.dk/2009/a-free-html5-and-css3-theme/</a>
<hr />
<p>Visit my blog on <a href="http://jayj.dk">Jayj.dk</a> to contact me or <a href="http://twitter.com/jayjdk">follow me on Twitter</a></p></div>
</body>
</html>