Web-Developer's Project Template Directory

Question

IMPORTANT: The accepted answer was accepted post-bounty, not necessarily because I felt it was the best answer.

---

I find myself doing things over and over when starting new projects. I create a folder, with sub-folders and then copy over some standard items like a css reset file, famfamfam icons, jquery, etc.

This got me thinking what the ideal starting template would be. The reason I'm asking is that I'm going through once again and am wondering what I should include in my template so that I don't have to go back in the future and do this all over again with every new site I start.

What I currently have follows:

Project Template Folder

• index.html -- XHTML 1.0 Strict Doctype. Meta Tags. CSS/js Files Referenced.
• css/
  • default.css -- Empty. Reserved for user-styles.
  • 960/ -- 960 Grid System for CSS Layouts.
    • 960.css
    • reset.css
    • text.css
• js/
  • default.js -- Empty. Reserved for user-scripts.
  • jQuery/ -- Light-Weight Javascript Framework
    • jquery-1.3.1.min.js
• img/
  • famfamfam/ -- Excellent collection of png icons
    • icons/
      • accept.png
      • add.png
      • ...etc

Answer 1

I have a similar structure and naming convention but for CSS, I use BluePrint which I find is more extensible. Also prefer jQuery having recently switched from prototype. In addition I have a common.js file that is an extension with custom functions for jQuery.

A /db/ folder with .sql files containing schema definitions. A /lib/ folder for common middle-tier libraries.

I will also have a /src/ folder which will sometimes have raw files such as Photoshop templates, readme's, todo lists etc.

Answer 2

If you have a lot of projects with a lot of static content in common (e.g. jquery, css framework, etc) make yourself a media server to serve all these. Then, instead of creating a bunch of folder structure from a "template" all you do is include the right files in your project's html. If you really want a template, your template becomes one html file instead of a directory structure.

This also gives you an easy way to update the static media for your sites (e.g. moving to the next version of 960). you only have to do it in one place. Of course, you still have to make sure that your updates don't break existing sites! :)

You can make the scheme a bit more complicated if certain projects have overlapping needs but are different from others. Just have a directory at the top level of the server for each setup and to each setup corresponds one html "template". The main idea is to have to deal with only one copy of everything that is common.

You can certainly do this on a small VM (e.g. linode) for $20/mo or a virtual web-server on your current web server. You don't really need a server, for that matter, you just need a folder. However, I think you can have some significant performance gains by having a dedicated media servers. I'd recommend using a fine-tuned apache or nginx for this purpose.

As for site-specific static files, it is also a good idea that they live on the media server and the directory structure would probably be exactly what you have, but they would/should be empty directories.