Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

What's the right directory structure for multisite/single-host scenario?

BOWER_COMPONENTS
bower.json
CSS
IMG
index.html
JS
package.json
SCSS
WEBSITE-1
--- index.html
--- JS
--- IMG
--- CSS
--- SCSS
WEBSITE-2
--- index.html
--- JS
--- IMG
--- CSS
--- SCSS


This is my current directory structure. I have a parent website in the root folder and many child websites on sub-directories. The idea is to use a framework (like Bootstrap or Foundation - I'm using Foundation) create my layout of many commonly used website sections on the parent website and apply them onto the child. This would make all my websites very easy to maintain and update. The catch is that I have to lightly style (colors, fonts, bg-imgages...) the child separately. This would not be hard using only css, but using a framework with pre-processing means that I can't override variables afterwards. In other words, I can't change the blue color to red on everything at once. I have to declare each selector that I want to change the color again on the child css for it to work, rendering the use of a framework a big pain.

Is there a better way? Or should I just give up and copy the whole framework into the subfolders. One copy for each child website.

Note: The websites I make are really simple static one-pagers, but taking care of hundreds of them is a huge drag.