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

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.

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.


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.

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.

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.

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.

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.


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;

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.

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!!
© 2017- ThemeSelection, Hand-crafted & Made with ❤️