Tips on File Structure of Static Content
Published June 16th, 2015 by Geoffrey Rose
Over the last year I have modified how I organize my files to better handle all the “source” files and come with using css preprocessors and js minifiers. Also to better handle the use of front-end frameworks that are used on many projects, such as Foundation or Bootstrap.
I like to put all the static resources into on folder called “assets.” This way everything is contained in one folder. I primary use foundation when I am using a framework and for that the names of the folders reference that. If you are using Bootstrap or another framework rename these as you see fit. Also since I use foundation, my file structure uses scss. If you are using less rename the scss folders to less.
The File Structure
- [all of foundations js files]
- [things like jQuery, light-box, data-tables, etc]
- [outputted minified js files]
- [source js files]
- [lib original css files]
- [lib scss files]
- [your custom scss files]
- [all of foundations scss files]
- [font files]
Why to have the folder “foundation” in my css/js
What to compiled in styles.css
All your custom scss files and any scss files you are using from the framework are included in here. I also like to compile the lib scss files into this as well. To me there is no point in making an additional http request to load that css file in. Especially true when the css files are gzipped (which you should be) and cached, the few extra kb in size outweighs having the extra http request.
If the js library you are using doesn’t have a scss file just rename the css file to scss. This will allow you to compile it into your styles.css since all valid css is valid scss. I also will include the normalize (or css reset) into the main css file too. Make sure to have this at the very top of your complied css file to prevent it from over riding your styles.
I created a repo for download that has the file structure I have described.
Found an error or have a suggestion?.