Organizing projects

Directory Structure

I've found that it's good to organize different types of site-specific assets into their own directories. Note that, for the purposes of this document, the term "vendor" refers to any asset or collection of assets from a third party, such as a CSS framework or JavaScript library.

• css (or style) is where all of the CSS files live.
  • Vendor-specific stylesheets live in css/vendor/{vendor-name} (e.g, Bootstrap goes into css/vendor/bootstrap/bootstrap.css). Singular vendor stylesheets don't necessarily need to be nested in vendor-specific directories, but it usually helps.
  • style-specific images (such as background image sprites, patterns, etc.) go into css/images.
• images contains all of your non-style images, such as photos (basically, anything that you would normally reference via an <img> tag).
• js is where all the scripts live.
  • js/vendor/{vendor-name} contains vendor-specific scripts, such as ModestMaps, d3 or jQuery. These tend to be source control checkouts, so they'll often contain both "raw" and "minified" versions of the same script, the former of which can be useful for debugging early on in the project.
  • Site-specific scripts (anything non-vendor, in other words) can be namespaced either by directory or filename prefix: js/vma/paparazzi.js or js/vma.paparazzi.js.