*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 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!
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.
HTML5 and CSS3 are wonderful.
Just say good by to IE.
Awesome! thanks
Incredible information pertaining to upload files for having myself get started. I will keep this particular website link and revisit it.
Valuable information. Thanks a lot!
This is a very useful post, I was looking for this info. Just so you know I located your web site when I was browsing for blogs like mine, so please check out my site sometime and leave me a comment to let me know what you think.
good job!I will learn from you!
Great stuff! I will share this valuable content with friends and colleagues! Thanks
-“~ I am very thankful to this topic because it really gives up to date information .*:
best coding i’ve ever seen that to with php and html5 even though the latter one is still under construction.
thank you dave for download link for me to practice it.
Thanks again:)
Best coding i’ve ever seen that too with php and html5, even though the latter one is still under construction. Thank you Dave for download link for me to practice it. Thanks again:)
I like the helpful information you provide in your articles. I’ll bookmark your blog and check again here frequently. I am quite certain I’ll learn plenty of new stuff right here! Good luck for the next!
html 5 and css3 is really giving some space for great creativity..
What is up, awesome web site. I really like your style and design. I ended cosmetic classes and also set up my own personal website. Thanks for the great post!
hmm exceptional ahaha merely put as i favor the following distinct
Thanks a lot for this post,you saved my time.I am looking for something like that.
I have uploaded the folder to htdoc (C:\xampp\htdocs\starter) but when I open the index page (http://localhost/starter/index.php) I can only see:
Welcome to KamikazeMusic
Article 1
Can you please help me out.
Just on .htaccess file, this is what I have in my file:
ErrorDocument 404 /errors/404.php
#php_value include_path “.:/var/www/vhosts/kamikazemusic.com/httpdocs/”
php_value include_path “C://xampp/htdocs/starter”
Hi, the template is working fine then – that’s all you should see on the homepage.
Was there something else you were expecting?
Hi, the template is working fine then – that’s all you should see on the homepage.
Was there something else you were expecting?
i got the same message dave, it only displays the content in index page, but does not display the header, menus and footer. I set up the local environment similarl as new to php mentioned above
Hello, Neat post. There is a problem together with your web site in internet explorer, could check this? IE still is the marketplace chief and a good component of other people will miss your magnificent writing due to this problem.
My brother suggested I might like this blog. He used to be totally right. This put up truly made my day. You can not consider simply how much time I had spent for this information! Thanks!
@pnuts – again there shouldn’t be much on the homepage. Have you got the includes set correct? Check in the htaccess
Awfully beneficial thanks, I reckon your followers would certainly want a great deal more posts like that maintain the great effort.Particularly beneficial thanks, I do believe your current followers would likely want more blog posts like that continue the excellent hard work.
My coder is trying to convince me to move to .
net from PHP. I have always disliked the idea because of the costs.
But he’s tryiong none the less. I’ve been using WordPress on various websites for about a year and am worried about switching
to another platform. I have heard very good things about blogengine.
net. Is there a way I can import all my wordpress content into it?
Any help would be greatly appreciated!
number e pattern, que compara o input com uma expressão regular arbitrária.