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.