Keen uses SASS for handling the theme css efficiently.
Multi Demo Bootstrap Admin Dashboard Theme
SASS
Base
Base folder in [keen]/theme/[demo]/src/sass/base/ contains global SASS functions and mixins for all demos and HTML, VueJS, React, Angular & Laravel versions.
Components
Components folder in [keen]/theme/[demo]/src/sass/components/ contains custom Keen components and Bootstrap components customizations.
All components are globally available for all demos.
Both Keen and Bootstrap components are customized in _variables.bootstrap.scss and _variables.custom.scss
respectively.
Bootstrap Variables
In _variables.bootstrap.scss file
Keen deeply customizes the standard Bootstrap components by following the best practices explained in the official documentation.
Custom variables that used to extend Bootstrap components with new options are marked with Custom variable comment in _variables.bootstrap.scss
Custom Variables
Keen's custom components related variables are set in _variables.custom.scss file.
Demo Variables
If you like to change the theme colors, the Bootstrap theme color, border radiuses, font family and other variables. We suggest using _variables.demo.scss
file so you keep your own changes separated and future updates will be straightforward. All variable override in this file should be set without !important SASS attribute so the override works properly.
Layout
Layout folder in [keen]/theme/[demo]/src/sass/layout/ contains the layout's markup and SASS variables files as explained in the below table(example given for demo1):
| File | Description | ||
|---|---|---|---|
_variables.scss |
Variables used by Layout Partials. You can easily change Aside width, header height and other common properties.
|
||
_init.scss |
Used by the main stylesheet style.scss to import demo related layout partials partials
|
||
_base.scss |
Normalizes and resets the document's CSS to make browsers render all elements more consistently and in line with modern standards. | ||
_main.scss |
Defines Base Layout styles. | ||
_header.scss |
Defines Header styles. | ||
_header-menu.scss |
Defines Header Menu styles. | ||
_header-topbar.scss |
Defines Header Topbar styles. | ||
_header-mobile.scss |
Defines Header styles for mobile mode. | ||
_subheader.scss |
Defines Subheader styles. | ||
_aside.scss |
Defines Aside styles. | ||
_brand.scss |
Defines Brand(Logo) styles. | ||
_content.scss |
Defines Content styles. | ||
_footer.scss |
Defines Footer styles. | ||
_offcanvas.scss |
Defines Offcanvas(Notification Panel, User Profile Panel, etc) styles. |
The above Layout Partials sass files are imported in [keen]/theme/[demo]/src/sass/style.scss and compiled into the main style bundle
[keen]/theme/[demo]/dist/assets/css/style.bundle.css
Vendors
Vendors folder conains SASS files to overide and customize all 3rd-party plugins styles to provide unified look & feel for all 3rd-party plugins.
The Vendors SASS files are imported in [keen]/theme/[demo]/src/sass/style.scss and compiled into the main style bundle
[keen]/theme/[demo]/dist/assets/css/style.bundle.css
Pages
Unless Layout Partials, the Pages SASS Files are indivudally compiled into [keen]/theme/[demo]/dist/assets/css/pages/ folder.
The Pages CSS Files are included in HTML pages on demand.
Themes
Theme SASS files are used to generate additional CSS files to provide skin/theme support for the Layout Partials(e.g: Light Aside Theme, Dark Header Theme).
The Theme SASS files are indivudally compiled into [keen]/theme/[demo]/dist/assets/css/theme/ folder and included in HTML pages on demand.
To see this in action check out Demo1 Layout Builder
Compilation
-
Keen compiles Layout, Components(including the Bootstrap & Custom components), Vendors SASS files into the main the main style bundle:
[keen]/theme/[demo]/dist/assets/css/style.bundle.css. -
The Pages and Themes SASS files are compiled separately into CSS folder:
[keen]/theme/[demo]/dist/assets/css/ -
All 3rd-party css files are bundled into the Plugins Bundle CSS file and globally included in all pages.
[keen]/theme/[demo]/dist/assets/plugins/global/plugins.bundle.css