Folder Structure

How folders are organized.

Root folder

The root folder contains the node_modules, public folder, src folder, Git informations, the postcss.config.js and the Webpack configs.

Folder Structure 01 Root


Public folder

The public folder contains all the code which will later be publicly available.

Folder Structure 02 Public

Sample index.html for testing.

Folder Structure 03 Assets

Assets folder.

Folder Structure 04 CSS

CSS: Contains your compiled, minified (and purged) app.css.

Folder Structure 05 Fonts

Fonts: All fonts used in your _settings.scss.

Folder Structure 06 Images

Images: All images used in your app.js as well as all the favicons and icons.

Folder Structure 07 JS

JS: Contains your minified app.js.

Source folder

The source folder contains all the "working" code which will later be used for compilation via Webpack.

Folder Structure 08 SRC

Overview of all folders.

Folder Structure 09 Fonts

Fonts: May contain fonts for testing and trying out. Define your final fonts in your _settings.scss.

Folder Structure 10 Images

Images: May contain collected images for testing and trying out. To define them for layout usage, set them up in your app.js. In the images folder you can also build your own icon set in the icons directory.

Folder Structure 11 JS

JS: This folder contains one of the most important files: app.js.

SCSS folder

The scss folder contains the heart of the project. The folder has been split into several parts following the ITCSS file organisation principle.

Folder Structure 12 SCSS


Folder Structure 13

1-settings: Contains the _settings.scss. This file handles nearly everything.

Folder Structure 14

2-tools: Directory for mixins and functions. No code is generated here.

Folder Structure 15

3-generic: Reset and/or normalize styles, box-sizing definition etc. First layer to actually generate CSS.

Folder Structure 16

4-elements: Styling for bare HTML elements like headlines, buttons and links, as well as custom hover and focus effects.

Folder Structure 17

5-components: Specific UI components, blocks and third-party styles.

Folder Structure 18

6-templates: Code for specific templates or pages, e.g. custom front page.

Folder Structure 19

7-utilities: Low-level utility classes dynamically generated based on your preferences in _settings.scss.

Folder Structure 20

8-trumps: Styles overwriting all, e.g. debugging styles, separate print styles.

Folder Structure 21 App

app.scss: Everything comes together here. All subfolders are defined in this file.