Project structure

Folder / File name	Description
Finder	Folder contains all template source and production files.
Finder / src	This folder holds all template source files like .pug, .scss, .js that are then processed (compiled / minified) to `dist` folder.
Finder / dist	Folder contains all template distribution files like .html, .css, .js that have been processed (compiled / minified) from `src` folder using Node.js and Gulp.
Finder / dist / vendor	This folder contains all vendor plugins' `.js / .css` files.
Finder / package.json	File contains meta data about your app or module. Most importantly, it includes the list of dependencies to install from npm when running `npm install`.
Finder / gulpfile.js	Configuration file for Gulp library. It contains all tasks you want to perform with Gulp. Learn more about it from Working with Gulp section or official Gulp documentation.
Finder / src / js	This folder contains main `theme.js` and `components` subfolder with all modules. `theme.js` is processed (compiled / minified) into 2 files: `dist/js/theme.js` and `dist/js/theme.min.js`. The latter is linked to all `.html` documents
Finder / src / scss	This folder contains all project `sass` files that are compiled and minified to styles in `dist/css/` folder.
Finder / src / templates	This folder contains all `pug` files that are compiled into HTML in `dist`, `dist/components` and `dist/docs` folders.

Note: if you do not use Pro Front-End setup with Node.js and Gulp and want directly edit html / css / js files you should be looking into dist folder.

Whether you work with Node.js and Gulp or not you can still take advantage of preprocessors for HTML and CSS.
In this case you might want to learn how to use Pug and Sass.