File Structure

A guide to understanding how the theme is structured. Within this theme, you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.


Page Templates

πŸ“ app is the root directory and source for all HTML pages (in .html or .njk) and contains the example HTML templates supplied with the theme.

Contained in app directory/folder is a precompiled static site or sites, equivalent to what you see in the online demo.

Pages are named generally according to their demo name, number or purpose, and you can open any of the files in your browser to see it in action, or modify the markup in your editor to suit your needs.

As this is the source for all files, Gulp copies all files from the app to the dist folder/directory and does necessary compilation during development.

This documentation is also housed in app to share the theme's assets, but the documentation files are not required in your projects, and you may move or make another copy of them elsewhere.

Folder Contents

πŸ“ app contains database,fonts, image, js, partials, plugins, scss, and other HTML files.

  • πŸ“ components contains json files. where all the theme contents and data's are stored.

  • πŸ“ database contains json files. where all the theme contents and data's are stored.

  • πŸ“ fonts contains all third party fonts/icons used in the theme.

  • πŸ“ image contains all images used in this theme, backgrounds, icons, patterns and more.

  • πŸ“ js contains custom js codes required for theme functionality.

  • πŸ“ partials contains all required components, blocks, chunk of code used in each theme in nunjucks files(.njk)

  • πŸ“ plugins contains both required and additional plugins (with all their contents e.g. .js, and .css files)

  • πŸ“ scss contains all necessary SCSS for theme stylings (other than plugin CSS files)

SCSS (Gulp is required for customizing the scss files)

πŸ“ scss contains the source for all theme CSS. You will find the following contents in scss:

πŸ“ bs-theming, πŸ“ components, πŸ“ helpers, πŸ“sections, πŸ“theme-mode-control, _bootstrap.scss, _theme-custom-styles.scss, and main.scss file.

  • πŸ“ bs-theming contains common parts, blocks of each page such as border, colors,, fonts, grid, link, etc.

  • πŸ“ components contains common parts, blocks of each page such as header, buttons, accordion, menu, forms,faq, etc.

  • πŸ“ helpers contains files which helps to control functions, mixins & theme media query

  • πŸ“ sections contains css of each sections specefically

  • _theme-custom-styles.scss contains some individual styles used in this theme.

  • bootstrap.scss contains bootstrap all css

  • main.scss includes/links all theme and page styles in one place to compile into main.css file in dist/css directory.