When developing sites or projects, it helps to have an organized folder structure so that you can go back and find files easier, as well as have others easily understand how the website’s code works. We’ll also retain files in most of the commonly used folders so that every time you make a new site, you don’t have to rewrite practically identical code.
Folders
The first step is to figure out what folders we want to separate our code and media into. I find it best having a folder for CSS, a folder for JavaScript, and a folder for images.
Let’s start out with this:
- css
- js
- images
This isn’t bad for a folder structure, but if your site uses images for the layout and images for other things such as a gallery, it is also nice to separate content further like so:
- css
- js
- images
- layout
If you work with PHP and like to separate your PHP code over several files, you might also want to add an includes folder..
Files
Now that you have your folder setup figured out, let’s move on to the files. We’ll go over what we should put (and not put) in each folder.
css
Two files will go in the CSS folder, but you can always adjust this to your own needs. I always use a reset CSS stylesheet such as the YUI Reset CSS or Meyer Web’s reset, as well as a style.css, where all the CSS code goes.
Additionally, you may also want to add stylesheets for other media such as a print.css file.
Now we have this:
- css
- style.css
- reset.css
- js
- images
- layout
js
What you put in the JavaScript folder really depends on what you use the most. You may wish to put a JavaScript framework in it such as jQuery or YUI, or design enhancing scripts such as Cufon.js, or even something you made yourself.
images
The images folder will be left empty unless you tend to reuse certain graphics such as an AJAX spinner.
The index file
The index file (homepage) will vary based on what types of technologies you use and websites you make. For example, if you added jQuery to the JavaScript folder you’ll probably link to it in the index file.
The first thing to do is determine the ideal extension for the index file. If you work with PHP a lot make it index.php. If you just use static code you can name it index.html.
The next matter is to determine which doctype you’ll be using. You can find a list of doctypes here. We will be using XHTML 1.0 Strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <link href="./css/reset.css" rel="stylesheet" /> <link href="./css/style.css" rel="stylesheet" /> </head> <body> </body> </html>
Of course, yours will almost certainly vary a bit.
Here is the final folder architecture:
- index.php
- css
- style.css
- reset.css
- js
- images
- layout
And there you have it! A good start for your next site’s file structure. Got an even better idea? Leave a comment.
3 Comments
For me, I have the following Directory Structure:
Data
Includes
-Classes
-CSS
-Functions
-JS
-Smarty
Pages
-Logic
-Template
index.php
Another option would be to use folder
cssand include the img folder inside thecssfolder.css
-img
js
...
Benefit - you've got no problems with relative paths like
'.../images/sprites.gif'. Safes a lot of headaches in large projects.Great suggestion!
One Trackback
[...] Read the rest and get other html tips and tricks: Building a Site File Structure Template [...]