File structure


Folder/file name Description
dist Generated production files, like HTML, css, js, images and vendor files.
node_modules Directory where npm installs dependencies.
src This folder holds all template source files that are then processed (compiled/minified) to dist folder.
src/images Image assets folder. Organised into subfolders for ease of use.
src/js This folder contains the main theme.js file that is processed (compiled/minified) to dist/js/theme.min.js.
src/scss This folder contains all project sass files that are compiled and minified to styles in dist/css/ folder.
src/templates This folder contains all nunjuck files that are compiled into HTML in dist folder.
dist/docs This folder contains the documentation files. Also available online.
webpack.mix.js All the build commands for Webpack.
gulpfile.js All the build commands for Gulp.
package.json List of dependencies and npm information.
babel.config.json This file tells the Babel how we want our code to transpile.
paths.json Information for Webpack and Gulp config files in json format.
data.json Helper data (like menu) in json format.
.browserlistrc The config file to set up target browsers for Gulp and Webpack.
.gitignore Hides all unnecessary files from Git.
Note: If you do not use Front-End setup with Node.js and Webpack or Gulp and want to directly edit html/scss/js files, look in the dist folder