Tips on File Structure of Static Content

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.

Introduction


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


  • assets
    • img
    • pdf
    • js
      • foundation
        • [all of foundations js files]
      • lib
        • [things like jQuery, light-box, data-tables, etc]
      • scripts
        • [outputted minified js files]
        • src
          • [source js files]
    • css
      • styles.css
      • lib-original
        • [lib original css files]
      • scss
        • lib
          • [lib scss files]
        • custom
          • [your custom scss files]
        • foundation
          • [all of foundations scss files]
    • font
      • font-name
        • [font files]

Why to have the folder “foundation” in my css/js


I find it works best to have a folder with just the frameworks files in it for simplicity. For instance, in the scss folder by having all the frameworks scss files in their own folder, it allows you to have them all the files even though more times then not you will only be using a handful of them. This helps down the road when you are adding a new feature and want to use some of the frameworks styling, you can added it to your main scss file that imports everything together. Another benefit of this is all your custom styles are completely separated and not intermixed in with the frameworks files. This will help later if you need to update the framework or if someone inherits the project at a later date. Same thing goes for the javascript functionality many frameworks include. Just have all the files in their own folder and when you need one it will be easy to find.

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.

Download Link


I created a repo for download that has the file structure I have described.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.