Web Folder Structure

[aoeui]

hi there tech folks :]

what is your favourite way to organise your data, web, folder structure?
here is mine for example (basic version)

css

cssnormalize.css

cssprint.css

cssstyle.css

docs

docsdoc

docspdf

docsppt

docstxt

docsxls

download

img

imgbg

imgicon

imgicon16x16

imgicon32x32

imglogo

imgpage

imgpageerror

imgpageerror403

imgpageerror404

imgpageindex

imgpagekontakt

js

php

phpcore

phplayout

phpplugins

pic

picpage

plugins

pluginsjquery-tabs

pluginsnivo-slider

swf

xml

index.html

contact.html

favicon.png

.htaccess

img
all pictures that create core of the web, how it looks

pic
all photos in galleries, products, … to keep them separate from core data images

[jamygolden]

My basic structure is something like:

css/style.css

/* Assuming I have lots of images */

img/header/

img/sidebar/

img/footer/

js/mylibs/

js/plugins.js

js/scripts.js

index.php

I like and use HTML5 Boilerplate so I just basically keep that structure.

[sliver37]

css/

images/

product-images/

js/

fonts/

style.css

This is the folder structure I use 99% of the time, the base structure at least, before any combining/compressing.

[TheDoc]

css/

images/

js/

fonts/

index.html

style.css

[furrball1383]

if I may ask doc, why is style.css out of the css folder?

[jamygolden]

@furrball1383 I’m not 100% sure why @TheDoc does that, but I would imagine it’s because the paths to files wouldn’t have to begin with a ‘../’.

For example:

#header{background: url(../images/header.jpg) no-repeat left top;}

Also, WordPress does it that way :p

[Rob MacKay]

I would guess Doc holds a few more details in the style.css – for example in WordPress you have a style.css that holds theme information – can also use @import to pull in other style sheets (I would do that too)

[jamygolden]

I’ve actually stopped using multiple stylesheets. I always tell myself I will merge them eventually and I mostly don’t, so I force myself to use 1 lol.

What I want to know is why everyone (including myself) name it “style.css”. Why not “css.css”… or something else? Anything else just feels wrong to me though.

@Robskiwarrior I feel sorry for someone who joins the forum and names him/herself “import”.

[TheDoc]

I like my main stylesheet to be in the root (and, as others have eluded to, it’s how WordPress does it, and nearly all of my sites are integrated with WP).

@jamy_za – multiple stylesheets are important! Here are some that get put in my css folder:

• ie.css
• mobile.css
• high-contrast.css
• print.css

[sliver37]

@jamy_za How do you manage with just a single sheet? :O

I’ve heard bad things about @import, breaking parallel downloading etc. I have avoided using it (i’m sure performance hit wouldn’t be noticeable, just my OCD kicking in).

[jamygolden]

@silver37 I mentally break my stylesheet down into sections.

1 – Reset
2 – Typography (Broken down into sub-sections)
3 – Layout (Broken down into sub-sections)
4 – IE
5 – Mobile / Other media queries
6 – Print

I use CTRL/CMD + F a lot :p

[Rob MacKay]

haha @jamy_za yea. @import person I am sorry hehe

There is a performance hit with @import, but it is marginal – is better, but it is a personal choice thing and as long as you don’t have 50 style sheets importing you really wont notice. I normally have 3 at the most, a reset, fonts and layout.

[TheDoc]

Having them all in the root just gets a little messy – most people like it for organization purposes.

[OniLinkCR]

Odd. I DETEST having the CSS inside the root. Man, we are weird eh.

[joshuanhibbert]

/css
/css/fonts
/js
/js/libs
/images
/images/gallery
.htaccess
301.html
404.html
apple-touch-icon.png
favicon.ico
index.html
sitemap.xml

Like @jamy_za I have a single stylesheet ordered like so:

/* Base styles */

/* Typography */
– Fonts
– Styles

/* Layout */
– header
+ navigation
– content
– footer

/* Extra styles */

/* Animation */

/* Media Queries */

[Author]

Posts