Style Customization
  1. Home
  2. Style Customization

SCSS Folder Structure

Frest admin manages all the core scss files in src/scss/ folder. Gulp command gulp sass-compile to compile scss which will generate all css files in app-assets/css. 

        
          frest-clean-bootstrap-admin-dashboard-template/
          ├── src/
          |   ├── scss/
          |   |   ├── bootstrap-extended/
          |   |   |   ├── _variables.scss
          |   |   ├── components/
          |   |   |   ├── _variables.scss
          |   |   ├── core/
          |   |   |   ├── colors/
          |   |   |   |   ├── _palette.scss
          |   |   |   |   ├── palette-variables.scss
          |   |   |   ├── layouts/
          |   |   |   ├── menu/
          |   |   |   └── mixins/
          |   |   ├── pages/
          |   |   ├── plugins/
          |   |   ├── themes/
          |   |   |   ├── dark-layout.scss
          |   |   |   ├── semi-dark-layout.scss
          |   |   ├── bootstrap-extended.scss
          |   |   ├── bootstrap.scss
          |   |   ├── colors.scss
          |   |   ├── components.scss
          |   |   └── custom-rtl.scss
Folder/Files Details
bootstrap-extended bootstrap-extended/ folder contains customized bootstrap scss files for Frest admin. This folder contains _variable.scss to override bootstrap core variables.
components components/ folder contains Frest admin all custom components and pages scss files. This folder contains _variable.scss for theme custom component variables.
core core/ folder contain colors, layouts, menu, mixins and variables folder.
pages pages/ folder contains all pages specific scss files.
plugins plugins/ folder contains all vendors scss files.
themes themes/ folder contains template layouts specific scss files.
bootstrap-extended.scss bootstrap-extended.scss file is for those bootstrap components which are customized for this theme. It include all files from bootstrap-extended/ folder.
bootstrap.scss bootstrap.scss file is bootstrap file which includes all the core bootstrap files from node_modules/bootstrap/ folder. It extends the default bootstrap variable by using file scss/bootstrap-extended/_variables.scss
colors.scss colors.scss file includes all colors palette related files from scss/core/colors/ folder.
components.scss components.scss file includes all theme components files from scss/components/ folder.
custom-rtl.scss custom-rtl.scss file includes RTL text direction specific style override.

How to customize style?

Before we customize the template style, first we need to understand the assets/ folder structure. This folder is for customer customization purposes. You can create a new folder and files in this folder.

Use gulp scss-compile or gulp monitor to compile these scss files and generate css files under assets/css folder. 

        
          frest-clean-bootstrap-admin-dashboard-template/
          ├── assets/
          |   ├── css/
          |   |   ├── style-rtl.css
          |   |   └── style.css
          |   ├── js/
          |   |   └── scripts.js
          |   └── scss/
          |       ├── variables/
          |       |   ├── _variables-components.scss
          |       |   └── _variables.scss
          |       ├── style-rtl.scss
          |       └── style.scss
Folder/Files Details
css Folder contains style.css file for default text direction (LTR). If you are using the RTL text direction use style-rtl.css. If you are not familiar with SCSS, you can write your css in in this files, it will override theme default css.
js Folder contains scripts.js file to write your custom js.
scss Folder contains style.scss file for default text direction (LTR). If you are using the RTL text direction use style-rtl.scss.
scss/variables

Folder contains _variables.scss, use this file to override core (node_modules/bootstrap/scss/_variable.scss) & extended bootstrap (src/scss/bootstrap-extended/_variables.scss) variables.

_variables-components.scss, use this file to override theme components variables (src/scss/components/_variables.scss).

style.scss Use this file to write your SCSS, it will override the theme default style.
style-rtl.scss Use this file to write your SCSS, if you are using RTL text direction. It will also override the theme default style.

How to change theme Colors/Variables?

If you are familiar with SCSS (Recommended method), you can easily change theme colors by changing the Bootstrap Theme color variables. Use assets/scss/variables/_variables.scss file to override Bootstrap variables.

Ex: Change the Primary color of the template

        
          //  ================================================================================================
          //  ? TIP:  It is recommended to use this file for overriding bootstrap variables.
          //  ================================================================================================

          $primary: #ff5b5c; // Changing primary color

Use gulp scss-compile or gulp monitor to compile these scss. Bingo! You just changed primary color everywhere in the theme.

Similarly you can change other bootstrap colors (i.e secondary, success, danger etc...) and other bootstrap variables (i.e $h1-font-size, $table-cell-padding etc..) too.

If you are not familiar with SCSS (Not recommended method), you can change the style attribute by replacing the old value with a new one in app-assets/css folder.

Ex: To change the primary color of the template you need to find color value #5a8dee and replace it with new color in app-assets/css folder.