Jayj HTML5 theme v2.1 By Jayj.dk

Thanks for downloading my free HTML5 and CSS3 theme!

You are free to use this theme for any purpose - 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.

Check out the source code on Github. You can get the latest development version and the up-to-date wiki

Other versions of the theme

The theme is available as both WordPress and Blogger theme as well

Features

License

The theme is licensed under the New BSD License

How to use LESS

Version 2.1 uses the CSS preprocessor LESS. What is LESS? 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.

In more simple terms, LESS allows you to write CSS in a smarter way by combining functions, mixins, operations and more.

Read more about LESS

Using LESS in this theme

If you want to change the colors and/or fonts in this theme you can either edit style.css or edit the variables.less 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!

In the variables.less 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.

When I use those colors in the functional variables like @primaryColor, @bodyBackground and @blockquoteBorder.

Mixins.less

The mixins.less file contains the mixins used in style.less. 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.

An example is the gradient mixin. Instead of writing all the different version over and over again, you can use: 
#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%);

LESS compilers

Credits

Help

Learn more about HTML5 and CSS3: Please use this link if you want to share this theme:
http://jayj.dk/2009/a-free-html5-and-css3-theme/

Visit my blog on Jayj.dk to contact me or follow me on Twitter