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. 10 months ago

Popular Tutorials

An Overview of Metronic's File Structure

Having some trouble familiarizing with Metronic's Bootstrap Admin Template files? Check this a...

Metronic Bootstrap Admin Installation with Gulp

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

An Overview of Keen's File Structure

Having some trouble familiarizing with Keen's Bootstrap Admin Template files? Check this artic...

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.

An admin theme is a HTML, CSS, JavaScript template that is used to build the user interface for the admin side of a web application. They usually contain the HTML, CSS code for designs that you can use while building your admin dashboard.

Using admin themes in your projects saves you a lot of time and money simply because you don't need to design and code the frontend templates from scratch and you can get your application up and running in a short time.

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.

Purchased licenses have no expiration date and they do not require any recurring payment.

Basic support is always free and available for everyone.

After purchasing you get 12 months of premium support. After the premium period ends, you can extend it at the Downloads page at the keenthemes.com.

Stockholm-icons / Navigation / Up-2 Created with Sketch.