With every new web site that I create, I use a very specific directory structure for the ui. This allows the root web directory to not become over saturated with folders that do not contain actual web content. My folder structure is as follows

• ui
• css
• images
• js

Essentially, I use one main folder to contain all user interface elements: cascading style sheets, images, and javascript. The css folder can contain numerous files depending on the complexity of the web site and interface. The images folders contains the images for the web site framework. This includes any images needed for the general design, icons, buttons, and any other design imagery. The images folder does not contain images as they relate to a particular page or article. Those images are handled differently depending on the complexity of the site. The js folder is used to hold all javascripts. I thought about separating them out into behaviors and other scripts, but in the end I decided not to. I don’t use a ton of javascript (yet) so I didn’t see the need for the separation.

If there are multiple designs for a project, I use the following structure:

• ui
• design 1
• css
• images
• js
• design 2
• css
• images
• js

In this case, I give design 1 and design 2 a name that refers to the design. If the design is a retro 50’s design, I use something like stylin50s. If it is an oceanscape sort of thing, I name it something like comotionontheocean. I have a little bit of fun with the names. It keeps me sane somehow.

This entry was posted on Wednesday, January 3rd, 2007 at 11:31 am and is filed under CSS, Javascript, PHP, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.