• 020-800-456-747
  • Free shipping on orders over $300

Directory structure

Pages folder

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

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 the help you with your work, these HTML files will be used by Gulp during the development.

Pages folder also includes these subfolders:

  • /component-variants - demo of complex components' variants - e.g. page headers
  • /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
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. Before you init Gulp, this directory is empty.

Select theme colour

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