Metronic Bootstrap Admin Theme SASS Overview

  • Home -
  • Tutorials -
  • Metronic Bootstrap Admin Theme SASS Overview

In this tutorial, we will be discussing on our default HTML version SASS structure. Our default version consists of multiple demo folders; however, each demo is considered independent from each other. Therefore, each demo will have its own SASS folder where you can customize or extend.

Our SASS folder is located in /theme/html/<demo>/src/sass/

There are 5 main key points within our SASS structure:

  • Variable configurations
  • Layouts
  • Components
  • Pages
  • Vendors

We have created a very flexible and efficient file structure framework to enable all our users to be customize and extend Metronic’s styling to fit any project requirements.

All of Metronic’s SASS initialization is located within our _init.scss and style.scss files. If your project needs additional custom scss files to be imported, you can just add your scss path in either of these 2 files. However, we recommend that you add it at the bottom of the style.scss file.

You can add your own scss file by first creating the file somewhere within your project and then adding this line of code at the bottom each section of our style.scss file.

@import “<your scss file path>”;

When viewing some of our sass files, you may come across some custom scss functions. You will most likely see our get() function the most. Here’s an example of a get() function:

get($aside-config, base, width);

How this read is, the function will get the value set within a variable called $aside-config with a node or parameter called base -> width.

Hence, the value our get() function is calling is located within the _variables.scss file of our layout that’s pointing to the value of 265px:

// Aside
$aside-config: (
    // Aside
    base: (
        width: 265px, <-- value returned
        minimized-width: 70px,
        zindex: 98,
        scrollbar-width: 4px
    ),
    // Offcanvas Mobile
    offcanvas-mobile: (
        width: 275px,
        zindex: 1001,
        bg-color: #ffffff,
        shadow: 0px 1px 9px -3px rgba(0,0,0,0.75),
        overlay-bg-color: rgba(#000000, 0.1)
    )
) !default;

You can locate all variable files within each main scss folder such as, “components”, “layout”, “pages, or “vendors”. Our variable files will usually be named as _variables.

Variable configurations

Most of Metronic’s general styling can be found within our variable files. These variable files consist of key variables such as font sizes, font weights, colors, padding or margins sizes and many more.

These key variables are primarily used for global stylings. So, if your project needs to customize a certain style globally, your first point to look for will be within one of our variable files.

Layouts

Our layout sass folder is located at /themes/html/<demo>/src/sass/layout

Within this folder, we have all the necessary sass files that controls the layout of your project, or in this case, the selected demo.

In essence, if you need to modify the aside menu with demo 1, then you’ll be looking at _aside.scss or if you need to modify the header, then _header.scss and so on.

Components

Components are shared element across all pages within Metronic such as, accordions, buttons, cards, forms, etc. You can locate our components sass within /themes/html/<demo>/src/sass/components

In our components folder, we have 3 variable files:

_variable.bootstrap.scss
_variable.custom.scss
_variable.demo.scss

Bootstrap variables

In our Bootstrap variables file, we define and override Bootstrap’s default variables to fit the look and feel of each of our demo. We recommend that you use this file as a reference only and not to modify any of the variables defined here.

Custom variables

Our Custom variables file consists of all the values used by our custom components that were created. Values such as, heights and widths, icon sizes, SVG sizes, checkbox configurations, etc. Similar with our Bootstrap variables, we do not recommend modifying anything within this file.

Demo variables

All variables defined within our Demo variables file will be used to override any of our defined values within the Bootstrap and Custom variable files. Therefore, if you want to customize a certain color, we recommend that you copy the variable name from _variables.bootstrap.scss into _variables.demo.scss and then replace the value with the value your project requires.

For example, if you want to change the $success color variable. First, locate the color within _variables.bootstrap.scss, copy the variable and paste it in _variable.demo.scss, and replace it the color values and it should look something like this:

// Success colors
$success:                                           #1BC5BD; // Bootstrap variable
$success-hover:                                     #0BB7AF; // Custom variable
$success-light:                                     #C9F7F5; // Custom variable
$success-inverse:                                   #FFFFFF; // Custom variable

Please remember to remove the !default flag with the Demo variables file.

Pages

Pages sass files are custom stylings for specific standalone pages within Metronic that does not quite fit within a component or have components within itself. Such as our error or login pages.

Our pages do not have a variables file since each scss file is considered an independent styling file. If you need to modify any of these, you can do so directly within the corresponding file. For example, if you need to modify the font size within our Error 3 page, you can modify our error-3.scss file directly.

Vendors

All Metronic 3rd party plugins that were customized to fit the look and feel of each demo is placed within our vendors folder.

Whilst we have a _variables.scss file within this folder, you may choose to ignore it when customizing your newly included plugins.

Closing Notes

When creating new scss files, please remember to import your new scss files within our styles.scss. We have segmented our imports by components, plugins, and layouts for you to include your files at the bottom of corresponding section. For example, if you are adding a new component scss file, add the file path at the bottom of our components import code.

For a video tutorial on this, please have a look here: https://keenthemes.com/tutorials/sass-customization-overview

Stockholm-icons / General / User Created with Sketch. by Shane
Stockholm-icons / Communication / Group-chat Created with Sketch. 0 Comments
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch. 4 weeks ago

Popular Tutorials

Javascript Customization With Metronic Bootstrap Admin Theme

Learn how to customize and organize Metronic Bootstrap Admin Theme's Javascript code with Gulp or...

Metronic Bootstrap Admin Installation with Gulp

Having trouble trying to get Metronic running on your local machine? Check this out. We have outl...

Why Build Tools are Considered essential in Today’s Web Development?

In development, you will most likely come across situations where you’ll need to do certain...

Stay Connected

Need Some More Info?

Support Channels

Stockholm-icons / Code / Github Created with Sketch.
Github Channel

Get access to our Metronic and Keen themes private Github repositories.

Stockholm-icons / General / Clipboard Created with Sketch.
Documentation

Check our extensive Metronic and Keen themes documentation pages.

Stockholm-icons / Communication / Group Created with Sketch.
Reach Our Support

Contact our support team via support@keenthemes.com for any pre-sale and the theme support questions.

FAQ Highlights

Full FAQ Stockholm-icons / Navigation / Arrow-right Created with Sketch.

In short, administrator themes are production ready frontend UI/UX templates that you can use and integrate into your project. In some cases, projects that utilize admin themes may not need to a UI/UX designer or a frontend developer to complete their project.

Admin themes usually come in HTML with CSS and JS all readily packed within it’s application, therefore the project development will only require to have the backend logic sorted and integrate that backend with the admin theme to have a complete working application.

Whilst there are free admin themes available, premium admin themes are where things get more interesting.

The purchased package includes a full source code of SASS, Javascript, HTML, media, compiled assets, build config and documentation files.

All demos, apps, pages, components and plugins shown in the preview will be included as well.

Each purchased license is limited for a single usage, therefore for each usage a separate license is required.
No, you don't have to. All future updates are free of charge per your purchased license.
Purchased licenses have no expiration date and they do not require any recurring payment.
Yes, absolutely. You can reuse your solution that is based on Metronic in multiple projects by purchasing required number of licenses. Each usage must have a separate license.
Stockholm-icons / Navigation / Up-2 Created with Sketch.