I like doing things in an organised fashion, and I'm sure most of you do to. I write my CSS, HTML and jQuery in a certain way which I don't change, unless I decide I've found a more efficient way of doing it. For example, I include the CSS reset in every single thing I work on and I would feel as if something was missing if I didn't, however I have no problem editing the reset if I think it would be more efficient.
I used to follow the following procedure to set up a the basics for creating a website:
- Create the HTML file
- Create the folders for the "js", "css" and "images" folder.
- Copy a reset.css and create a blank style.css
- Get the latest jQuery from another project or from jquery.com
- Get the jQuery plugins I'm going to be using and edit them accordingly (Such as changing the file path of the images in the CSS)
- Link to the external files in the HTML file
- Make sure they are linking through properly and make sure the jQuery plugins are working correctly
As you can see, this becomes quite a problem if you have to do this fairly often. What I have done to solve this problem (And I'm sure most people do something like this) is create a website template that contains everything I need. Everything is set up:
- The HTML is ready
- The CSS is linked and functional
- The jQuery and it's plugins are linked and functional
And that is all you need. It saves me loads of time.
My default-template
I have the following linked to my default template:
- A link to my favicon.ico
- jQuery
- Default stylesheet - With a reset attached
- IE6 only stylesheet
- IE only stylesheet
I include these .css and .js files because I use them so often. I use the jQuery PNG fix often because people still want support for IE6 on their web page. Including it inside the IE6 conditional statement forces it to load in IE6 alone, which is perfect.
I use Fancybox because it is so awesome, easy to implement and 99% of the time clients love it.
I recommend creating one of these if you haven't already, and to make it easier, I have included my default-template as a download. Modify it to suit your needs and you will end up saving a lot of time.