Customization | Materio - Bootstrap Material Design Admin Template

SASS

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Read the official SASS Documentation for a full list of instructions and other options.

Folder Structure

Important: Make sure you have followed the steps from the Installation & Build tools page. You should have already installed the Node, Gulp and setup the template. Check available tasks to compile styles.

Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.

Below is the folder structure which contain the SASS files.

📦
├── 📂 fonts                                      > Font Icons style file
├── 📂 libs                                       > Third-party library files
│   ├── 📂 animate-css                              > Example library files
│   │   └── 📄 animate.scss
│   └── ...
├── 📂 scss                                       > Core SCSS
│   ├── 📂 _bootstrap-extended                      > Extended styles of bootstrap components
│   │   └── 📂 mixins
│   ├── 📂 _components                              > Contain custom components style
│   │   └── 📂 mixins
│   ├── 📂 _custom-variables                        > Custom variables (use this files to override variables)
│   │   ├── 📄 _bootstrap-extended.scss               > Bootstrap extended variable
│   │   ├── 📄 _bootstrap-extended-dark.scss          > Bootstrap extended dark variable
│   │   ├── 📄 _components.scss                       > Custom components variable
│   │   ├── 📄 _components-dark.scss                  > Custom components dark variable
│   │   ├── 📄 _libs.scss                             > Third-party library variable
│   │   ├── 📄 _pages.scss                            > Pages & Apps variable
│   │   └── ...
│   ├── 📂 _theme                                   > Theming mixins for bootstrap, pages and libs
│   ├── 📂 pages                                    > Pages & Apps styles
│   ├── 📂 rtl                                      > RTL Supported styles
│   │   └── 📄 ...
│   ├── 📄 core.scss                                > Core (light) style file which includes bootstrap, bootstrap-extended, components & colors
│   ├── 📄 core-dark.scss                           > Core dark style file
│   ├── 📄 theme-bordered.scss                      > Theme bordered
│   ├── 📄 theme-bordered-dark.scss                 > Theme bordered dark
│   ├── 📄 theme-default.scss                       > Theme default
│   ├── 📄 theme-default-dark.scss                  > Theme default dark
│   ├── 📄 theme-semi-dark.scss                     > Theme semi-dark dark
│   └── 📄 theme-semi-dark-dark.scss                > Theme semi-dark dark
└── ...

fonts/ Folder contains font-icons SCSS files. It includes fonts files from node_modules/ and extends it.
libs/ SCSS files of all third-party libraries used in this template. It includes third-party SCSS from node_modules/ and extends it. If you want to remove specific library, then just delete that library folder. Read more
scss/ The core style folder which contains _bootstrap-extended/, _components/ _custom-variables/, _theme/, pages/ and rtl/ folders and files as explained below:

_bootstrap-extended/ Using core bootstrap from node_modules/, It extends each bootstrap components which is used in this template. _variables.scss and _variables-dark.scss file extend core bootstrap variables.
_components/ It contains custom components Like, Timeline, Avatar and Layouts styling. Custom components variables are declared in _variables.scss and _variables-dark.scss files.
_custom-variables/ Override bootstrap-extended, components, pages & libraries variables using this folder scss files. All files in this folder is for user purposes.
_theme/ Folder SCSS files are used for bootstrap, libraries and pages components theming purpose.
pages/ Folder contains SCSS files for the Pages and Apps Like, Profile page, Calender app.
rtl/ RTL enables styles for bootstrap-extended, components, libraries and pages.
core.scss includes _bootstrap.scss, _bootstrap-extended.scss, _components.scss and _colors.scss. Similarly core-dark.scss includes dark version of those files.
theme-*.scss Used for custom themes (Like, default, bordered and semi-dark) light/dark version. You can also create your custom themes.

Info: Bootstrap is automatically loaded from the node_modules folder in the bootstrap.scss & bootstrap-dark.scss file. It is installed via npm install and compiled using the build tools.

Customizing SASS

Customizing the Materio's SASS is super easy. Every SASS variable in Materio includes the !default flag allowing you to override the variable's default value in your own SASS without modifying either Bootstrap or Materio's source code.

Important: It is not recommend to make any changes to the scss/ folder except _custom-variables/. It includes core files and components that can be updated in the future. If you want to take advantage of future updates you may want to have a more Bootstrap-ish approach, meaning you should create new styles file or components to override styles, extend or add new components in the custom/ folder.

Changing variables

Using _custom-variables/ folder's scss files, you can easily override light/dark style variables for bootstrap, custom component, libraries and pages. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values.

Now, you might have more questions like below:

How can I override Bootstrap variable(s)?

To change bootstrap color variable other than Primary, you need to do below changes to scss/_custom-variables/_bootstrap-extended.scss file.

If you want to update color for dark layout, then you can add same variable to scss/_custom-variables/_bootstrap-extended-dark.scss file.

If you won't to update color for dark layout, then it will use color from _bootstrap-extended.scss file. To update primary color, please check here

Example:

$success: #009900 !default;

How can I override custom components variable(s)?

To change custom components variables like menu width, you need to do below changes to scss/_custom-variables/_components.scss file

If you want to update color for dark layout, then you can add same variable to scss/_custom-variables/_components-dark.scss file.

If you won't update color for dark layout, then it will take color from _components.scss file.

Example:

$menu-width: 14rem !default;

How can I override third-party library's variable(s)?

To change third-party library variables like flatpicker width. You need to do below changes to scss/_custom-variables/_libs.scss file.

You need to check variable names which we have used inside the libs/ folder. Any variable from the official documentation of the respective library can be used.

Example:

$flatpickr-width: 20rem;

How can I override pages variable(s)?

To change pages variables like calendar, You need to do below changes to scss/_custom-variables/_pages.scss file.

You need to check variable names from related SCSS files inside the scss/pages/ folder.

Example:

$calender-sidebar-width: 20rem;

Where should I write my custom scss?

To write your custom style create style.scss file inside scss/ folder and write your styes in that file. Just don't forget to include it in your HTML file.

Tip: Gulp toolkit automatically discovers .scss files to compile from scss/ folder. To exclude a file from compilation list just prepend a _ symbol to the filename.

Support

By default, stylesheets within src/libs/ and src/scss/pages/ directories include all available support, such as rtl support; light and dark styles. If you don't want to use them, it's highly recommended to disable unwanted support. It will decrease the size of compiled stylesheets.

Set appropriate variables to false in the src/scss/_custom-variables/_support.scss, recompile sources.

For example, if you don't need to include RTL support, the src/scss/_custom-variables/_support.scss file will look like this:

$enable-light-style: true;
$enable-dark-style: true;
$enable-rtl-support: false;

FAQs

How can I change theme primary color?

Materio is theme based admin template. So we suggest you to update primary color theme wise from scss/theme-*.scss file.

If you are familiar with SCSS (Recommended method), you can easily change theme colors by changing variable value. For example, if you want to update default theme of the template, open scss/theme-default.scss file

$primary-color: #757575;

To change the primary color throughout your entire project. For Light layout update $primary in scss/_custom-variables/_bootstrap-extended.scss file. For Dark Layout update $primary in scss/_custom-variables/_bootstrap-extended-dark.scss

$primary: #757575;

Info: You can update all other variables of bootstrap, components,etc.. from the files inside _custom-variables/ folder. For example, You can update $secondary, $success and so on, that will override style as per your changes. To update other then primary color, please check here

Find all the custom variable css files at below path:

📦
├── 📂 scss                                       > Core SCSS
│   ├── 📂 _custom-variables                        > Custom variables (use this files to override variables)
│   │   ├── 📄 _bootstrap-extended.scss               > To override Bootstrap extended variable
│   │   ├── 📄 _bootstrap-extended-dark.scss          > To override Bootstrap extended dark variable
│   │   ├── 📄 _components.scss                       > To override Custom components variable
│   │   ├── 📄 _components-dark.scss                  > To override Custom components dark variable
│   │   ├── 📄 _libs.scss                             > To override Third-party library variable
│   │   ├── 📄 _pages.scss                            > To override Pages & Apps variable
│   │   └── 📄 support.scss                           > To override Support variables

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 assets/css folder.

Heads Up!

It is not recommended to change any core files inside assets/ folder to avoid future update conflicts. If you still modify the file, it may require to merge it manually with future updates.

How can I create new theme (own theme)?

Materio admin template comes with unique feature to create custom theme. So user can easily integrate template with their own choice & requirements.

To create custom theme, you need to create scss files that contains variables, custom scss and primary color variable of the theme. It's required to set $primary-color variable to use base primary color for custom theme.

Let's say, if you want to create your own custom theme named as raspberry, follow steps below.

First of all, create custom theme scss files, like theme-raspberry.scss and theme-raspberry-dark.scss inside scss/ folder.
To apply custom theme, replace custom css files with other included theme-*.css files.
To add custom theme style , please Read more.
To add custom theme to customizer, please Read more.

Now, How to add variables, styles & mixins to theme scss file.

To use declared variables & mixins, Theme requires to include library, pages, variable files.
Theme requires primary color variable to update color as require. So need to add $primary-color variable with basic includes like below

// Component variables include
@import './_components/include';
@import './_theme/common';
@import './_theme/libs';
@import './_theme/pages';

$primary-color: #e30b5c;

// To update color to custom theme's primary color
@include template-common-theme($primary-color);
@include template-libs-theme($primary-color);
@include template-pages-theme($primary-color);

After applying primary color for each library, components & pages, To update navbar, You can add custom style after including mixin as below :

@include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

To update menu, You can add custom style after including mixin as below :

@include template-menu-style('.bg-menu-theme',BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR, $active-bg: ACTIVE_BACKGROUND_COLOR);

To update footer, You can add custom style after including mixin as below :

@include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

You can also add style that should work for custom theme only.
That's All!!