Documentation

Using Preprocessors (Pug & Sass)

Sass (Syntactically Awesome Style Sheets): Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass gives you the power of variables, mixins, functions, etc.
Pug (former Jade): Pug is a high performance Node.js Templating Engine. Just like SASS, Pug is a prepocessor and, as such it helps you accomplishing tasks like wrapping away repetitive work by providing features not available in plain HTML like variables, includes, mixins, functions, etc.

Compiling Sass and Pug

Again, if you are not using Node.js and Grunt setup, don't like command line interface there is another way to work with preprocessors. There is a popular software (GUI) for compiling Sass and Pug called "Prepross". Visit it's website at https://prepros.io/. Basic version is completely free and available for Mac and Windows.

Sass files structure

Folder / File name	Description
base folder	Folder contains `_scaffolding.scss` and `_utilities.scss` files. Most basic styles and commonly used classes. More about utility classes learn in Utility Classes section.
helpers folder	As name stands this folder holds helper Sass files namely: `_variables.scss`, `_mixins.scss`, `_placeholders.scss`.
layout folder	Main structural components of the template: `_footer.scss`, `_grid.scss`, `_header.scss`, `_page-title.scss`, `_section.scss`, `_offcanvas-menu.scss`.
modules folder	Template modules: `_account.scss`, `_blog.scss`, `_shop.scss`.
components folder	All components used accross the template. Learn more about available components in Components section.
styles.scss	Main Sass file that imports all other files and is compiled to `styles.min.css`.