HTML5 CSS3 starting template
Monday, December 7th, 2009
*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 [size : 718.25 kB]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
- 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.
- Supersleight, as mentioned above for IE6 PNG transparency (http://24ways.org/2007/supersleight-transparent-png-in-ie6)
- init.js, for declaring and initiating all of your JavaScript
- 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!
Want to read more articles like this? Subscribe to our RSS feed.
Previous post ⇒
The Randomiser Interview #1 – Jacob Gube
⇐ Next Post
The Randomiser Interview #2 – Grace Smith
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Follow me on twitter - @dsparks83
Question: Why have all the different CSS files. Thats several requests that if combined into one or two CSS files would make your site load faster. I strive to have two CSS files. The main and the IE style sheet that gets loaded with conditionals.
Just a thought.
Good point Rob, apart from the separate print and screen style-sheets there’s no need for the additional files. (I try not to have a separate IE style-sheet apart from the universal IE6 stylesheet I call from Google code.)
The separate CSS files are merely a personal preference for development and when a site goes live I would consider combining them and possibly also compressing them (assuming I remember!)
But that is part of the reason why I haven’t packed this basic template with stuff, it won’t suit everyone’s needs and you should feel free to play with it as you wish.
Thanks for the comment.
I also prefer different CSS files for layout, design etc when developing a site.
To solve the “request-problem” i use a minify script ( http://code.google.com/p/minify/) for my CSS and JS files.
How do you guys handle this?
thanks for this one…had my own script for this until now…I’ll try the google one…it’s maybe better =)
I changed the name of the folder from Starter to csshtml and uploaded it. But I get this error.
500 Server Error
A misconfiguration on the server caused a hiccup. Check the server logs, fix the problem, then try again.
URL: http://kennethbsmith.com/clients/webdev/csshtml/
Is it something in the .htaccess file? Me?
Hi Ken
My first check would be in the htaccess file, the php include path is set there and needs to be set to the folder that the site is in.
Hi.
Thank you for this. It’s my first time making a website from scratch, and I was hoping you can help me step-by-step…how do I open the htaccess file? The only 3 files I can see in the main folder are x.gif, index.php and Thumbs.db.
Also, if I want to see how this looks after I change some stuff, how do I go about this? Do I load this into safari?
Thank you very much in advance.
Wow throwing yourself in at the deep end! If you are completely new to coding I think this is probably a bit of an advanced place to start and I’d advise getting some experience and basic tips from tutorials such as this net tuts one
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/
To answer you questions however you can open the .htaccess in a text editor, if you can’t see it then you most likely have hidden files and folders set to not display. This can be changed in the folder options.
To actually use the template you need to upload it to a PHP enabled web server and access it through there. To set up a local development environment I’d use something such as Xampp from apache friends - http://www.apachefriends.org/en/xampp.html
Checking out the link you gave. Thank you so much for the tip and for the really fast reply.
Thanks a lot for sharing this information and providing useful links, I will share this blog entry to my friends as their resource. Great stuffs!
website design münchen´s last blog ..XT Commerce Abonnement Modul
Thanks. Good job! Write more. It seems like I become regular visitor
Thanks. trying out now!
Hey thanks for the download link, Dave! I’ve been putting together my own HTML5 / CSS3 code library now for the last couple of days and it’s really coming together. I can still use a lot of inspiration though.
You mind if I download your template and combine it with my library? That would be great. Thanks!
Certainly, please just make sure you keep any credits to the site in.
thnx a lot for this , m trying out html5 n this will certainly help
Thanks for the HTML5 starter kit. Looking forward to trying it out.