Directory structure

HTML folder

Folder where all the HTML pages are located. The pages here form a demo static site, mostly equivalent to the online demo (HTML source not minified and CDNs are not used here).

If you don't need to make any changes to the theme, you're good to go. All of the theme's CSS files are also pre-generated for you, so you can start connecting the theme to your app or a CMS of your choice.

You can open any of the files in your browser to see it in action, or modify their markup or content to suit your needs.

If you will be using Gulp and HTML combination to help you with your work, these HTML files would be used by Gulp during the development.

Html folder also contains these subfolders:

  • /css - main theme stylesheet (style.default.css), its colour variants and their minified counterparts.
  • /docs - documentation you are reading now
  • /icons - custom SVG icon sprite + its reference doc
  • /fonts
  • /img - Images for demo purposes.
  • /js - JavaScript files
Pug folder

Folder where all the Pug source files are located. Editing Pug files is now the recommended method to work with this theme.

With the extensive usage of mixins, includes and layouts, you will avoid repetitive tasks you would need to do if working with HTML source. E.g., if you change the navbar, the change will be applied in all your pages, unlike when developing with HTML, where you would need to do the same change in every file.

Learn more about Pug syntax here.

Pug folder also contains these subfolders:

  • /_pug-includes - pug layouts and snippets
  • /css - custom.css for quick CSS changes, SCSS files get compiled automatically
  • /docs - pug source files for the documentation you are reading now
  • /icons - custom SVG icon sprite + its reference doc
  • /fonts
  • /img - Images for demo purposes.
  • /js - JavaScript files
SCSS folder

SCSS contains Bootstrap’s and theme’s SCSS sources structured in the following subfolders

  • bootstrap - full SCSS source for the Bootstrap framework.
  • modules - theme overrides and custom components for this theme
  • style.*.scss - main theme SCSS files that get compiled into theme main stylesheets style.*.css. The * represents the colour variant
  • core.scss - file that handles all the SASS imports - mixins, Bootstrap and theme variables, Bootstrap framework
  • user.scss - a place for you to add your own custom CSS declarations to keep them separate from the core theme files, which aids updating.
  • user-variables.scss - a place for you to add your own custom SCSS variables to override the Bootstrap and theme defaults. This prevents the need to edit the core Bootstrap/theme files and prevents the problems from updating the theme.
Dist folder

If you will be using the Gulp workflow, here is where the development files will be saved and the Browsersync server running from.

Build folder

If you will be using the Gulp workflow, here is where the build files will be saved when you'd run one of the Gulp build commands.

Select theme colour

Stylesheet switching in this demo is done with JavaScript and can cause a blink while page loads. This will not happen in your production code.