• 020-800-456-747

Free in-store delivery

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 ( gulp dev-html and gulp build-html ) to help you with your work, these HTML files would be used by Gulp during the development.

HTML folder also includes these subfolders:

  • /css - main theme stylesheet (style.default.css) and its minified counterpart.
  • /docs - documentation you are reading now
  • /icons - custom SVG icon sprite + its reference doc
  • /fonts
  • /img - Images for demo purposes.
  • /js - JavaScript files
  • /vendor - 3rd party scripts and plugins - AOS, Bootstrap, jQuery, Masonry, etc.
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.
  • theme - theme overrides and custom components for this theme
  • style.default.scss - main theme SCSS files that get compiled into theme main stylesheets style.default.css.
  • _core.scss - file that handles all the SASS imports - mixins, Bootstrap and theme variables, Bootstrap framework
  • user/_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/_user-variables.scss - a place for you to add your own 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 compiled files will be saved during your development. Browsersync server will be running from this folder too. Dist folder is created automatically.

Build folder

If you will be using the Gulp workflow, here is where the compiled files will be saved when running build commands. Build folder is created automatically.