Every time you start up a site, you gen­er­ally use the same (or sim­i­lar) process.  Cre­ate your index, cre­ate and link this stylesheet, and that javascript..  I decided to make it a bit eas­ier on myself and cre­ate a tem­plate.  Not every­thing in the tem­plate will be needed for every site, but it’s a lot eas­ier to delete a line or two than type out 800 characters.

I’ve cre­ated two tem­plates.  One for if you are sim­ply work­ing with (X)HTML, and the other if you are using PHP.  I’ve sep­a­rated the two because I believe that if you are using PHP (in a sim­ple fash­ion) there are many struc­tural things that make updat­ing your site so much eas­ier (i.e. mak­ing sec­tions that stay the same through­out the site an “include”).

These ZIPs include a small file struc­ture.  I will do my best to go through and explain everything.

index.html/index.php

The index is where all of the files are linked together.  This should be your base tem­plate for every page.  I tend to rename it “tem­plate”, leave it in the site root, and then dupli­cate it every time I need a new page.

It uses a strict (X)HTML doc­type, imports the Google hosted jQuery library and a local javascript file, links up the CSS, has con­di­tional state­ments for Inter­net Explorer ver­sions 6 and 7, as well starts off with a very robust doc­u­ment structure.

Javascript

jQuery

I use the jQuery library in almost every project I do.  Even if I’m not going to use jQuery from the start, with a min­i­mized file size of 4k, it’s easy to add some Javascript to a site if it’s already loaded.  I also decided to stop copy­ing the jQuery lib file into every project I do, but link to the file hosted by Google Code.  There are many rea­sons why to, and not to do this, but ulti­mately it came down to one thing: it’s easy.  The pros and cons can keep bat­tling each other all day, but they really are going to even out.

global.js

Because I use the jQuery library so often, I added this global Javascript file.  I tend to use JS for things like nav­i­ga­tion drop-down ani­ma­tions, and other things that are glob­ally located around the site.  So, it only made sense to have a global Javascript file.

CSS

screen.css

The core of my skillset is mostly in CSS.  With that, I don’t know what I would do if we still had to write inline styles (prob­a­bly pur­sue my life long dream of Wife Car­ry­ing).  The rea­son the file is named “screen.css” is because it sim­pli­fies the nam­ing con­ven­tion I gen­er­ally use.  Some times (and this is only when I’m SUPER bored) I do cre­ate a hand­held and print stylesheet.  In this file (screen.css) it imports another CSS file, reset.css

reset.css

Cour­tesy of Eric Mey­ers, this reset stylesheet removes most, if not all, browser default stylings.  It places every­thing on the same level as to not run into any weird kinks later down the road that seem con­fus­ing.  I can’t tell you how many times I’ve won­dered “Why is that two points larger than it should?!”

Con­di­tional Statements

Con­di­tional state­ments, con­di­tional state­ments, con­di­tional state­ments… what are we to do?  The very fact that Microsoft cre­ated an “out” just for them some­one irri­tates me.  These lit­tle bug­gers let you hide tags from any other browser that isn’t in it’s “con­di­tion”.  If you don’t know what I’m talk­ing about then have a look at Microsoft’s Devel­oper Net­work.

Doc­u­ment Structure

I’m pretty sure I’m not the only one to have this doc­u­ment struc­ture, but I don’t recall copy­ing it else­where.  After look­ing at as many lines of code as I have, things start to become a bit hazy.  Either way, let me explain the best way to use this structure.

#wrap

I gen­er­ally use the #wrap for some sort of back­ground image applique.  It works best when you have a repeat­ing back­ground image on the body, but need some sort of “top­per” (if that makes any sense..).  It’s just a div that fills the entire hor­i­zon­tal space, and as much space as your con­tent takes up vertically.

.con­tainer

I used to use the #wrap to hor­i­zon­tally cen­ter my con­tent.  I did this until I met .con­tainer.  What .con­tainer allows you to do is have a sec­tion (i.e. #brand­ing) that spans the entire width of the doc­u­ment, but “con­tains” the con­tent into a fixed (or even fluid) width that is smaller than the doc­u­ment.  Exam­ple: your design has a black stripe behind the brand­ing that goes all the way across the doc­u­ment, left to right.  But the con­tent only spans about 600px.  You set the global .con­tainer width to 600px, and you can cen­ter it using some mar­gin tech­niques.  Bam!  As well, if the con­tent width ranges from sec­tion to sec­tion, just use the “cas­cade”, and call on the .con­tainer by it’s par­ent div id (i.e. #brand­ing .container).

Sec­tions (#brand­ing, #con­tent, #site_info)

Although I’ve been using CSS for quite some time, it was brought to my atten­tion not to long ago how far we should take seman­tic cod­ing.  I’ve real­ized that id’s like #header and #right_col don’t have much value if you are restyling a doc­u­ment with no side­bar, or the “header” is now at the bot­tom of the page..  These sec­tions that I’ve put in the doc­u­ment are not the “be all” of struc­ture.  In fact, in many of my projects they don’t work at all.  But keep in mind when you are cod­ing a doc­u­ment, “What con­tent is going to be within this block of code?” and name it accord­ingly.  BTW, if you are unsure of what #site_info is for, I gen­er­ally put copy­right, “footer” type things there.

I hope this can ben­e­fit some­body, as it has helped stream­line my process by a lot.  Thanks!