This is a bit old - you may or may not notice the date on this post but it's over a year old. That doesn't mean it's not useful but we all know how fast things chance on the web so there's a chance that techniques and technologies described here could be a little dated.

HTML5 CSS3 starting template

*Now updated with jquery 1.4.2 and removed supersleight as usage of IE6 only stylesheet removes most of the need for it*


Merry Christmas Twitters and RSS subscribers and all those who have found their way here via some other route.

Having started to get into using HTML5 and CSS3 in quite a big way recently I’ve put together a base package that I’ve been using to start projects off. (I’ll hopefully have some of them finished for you to see in the new year).

I was thinking to myself what better way to encourage people to start using all this new stuff than sharing the package with everyone. Now it’s not up to much but it will give you a basis to customize and start from for HTML5 and CSS3.

There’s a good chance my coding may not even be to your liking but that doesn’t matter, I’m making this available so you can download it and change it into your own starting point.

You can download it right here.

[download id=”8″]

What’s in the package?

Well it honestly isn’t a lot but once you’ve unwrapped your little present what are you faced with? Four folders and 3 files.

The 3 files in the main folder are

The first of the folders is the CSS folder, in here you have your CSS files

  • layout.css is the main CSS file
  • print.css is a basic print stylesheet
  • reset.css, a standard reset stylesheet
  • text_replace.css, if you fancy doing some old image style text replacements
  • typography.css for all your type styles

The next folder is an images folder, erm, to stick all your images in, then we have an includes folder which has in it

  • head.php and footer.php which are reusable scripts for site header and footer. Incidentally JavaScript is called in the head but you can move it to the footer if you want to for better loading.
  • menu.php for the main site navigation
  • funcs.php which includes some basic PHP functions but I encourage you to add your own

The PHP include path is set in the .htaccess file so be sure to make sure it is set correctly so that the files can be included with no problems.

Lastly we have the scripts folder with some nice JavaScript.

The best thing to do is go is unpack it and have a good poke around and then change it to suit your own personal work flow and your needs.

Hope it comes in handy!