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 filesFolder 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 filesSCSS 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 themestyle.*.scss - main theme SCSS files that get compiled into theme main stylesheets style.*.css. The * represents the colour variantcore.scss - file that handles all the SASS imports - mixins, Bootstrap and theme variables, Bootstrap frameworkuser.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.If you will be using the Gulp workflow, here is where the development files will be saved and the Browsersync server running from.
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.