*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.HTML 5 / CSS3 starter package (10109)
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 site index file
- a .htaccess file
- x.gif which is used for supersleight, an IE6 PNG transparency plugin (http://24ways.org/2007/supersleight-transparent-png-in-ie6)
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
- 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.
- Supersleight, as mentioned above for IE6 PNG transparency (http://24ways.org/2007/supersleight-transparent-png-in-ie6)
- a copy of jquery (1.3.2) (http://jquery.com/)
- Modernizr for your CSS3 and HTML5 needs (http://www.modernizr.com/)
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!