Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## SASS

Metronic uses SASS for handling the theme css efficiently.

## Base

Base folder in `[metronic]/theme/html/[demo]/src/sass/base/` contains global SASS functions and mixins for all demos and HTML, VueJS, React, Angular & Laravel versions.

## Components

Components folder in `[metronic]/theme/html/[demo]/src/sass/components/` contains custom Metronic components and Bootstrap components customizations. All components are globally available for all demos.

Both Metronic and Bootstrap components are customized in `_variables.bootstrap.scss` and `_variables.custom.scss` respectively.

### Bootstrap Variables

In `_variables.bootstrap.scss` file Metronic deeply customizes the standard Bootstrap components by following the best practices explained in the official documentation.

Custom variables that used to extend Bootstrap components with new options are marked with `Custom variable` comment in `_variables.bootstrap.scss`

### Custom Variables

Metronic's custom components related variables are set in `_variables.custom.scss` file.

### Demo Variables

If you like to change the theme colors, the Bootstrap theme color, border radiuses, font family and other variables. We suggest using `_variables.demo.scss` file so you keep your own changes separated and future updates will be straightforward. All variable override in this file should be set without `!important` SASS attribute so the override works properly.

## Layout

Layout folder in `[metronic]/theme/html/[demo]/src/sass/layout/` contains the layout's markup and SASS variables files as explained in the below table(example given for `demo1`):

File | Description
--- | ---
`_variables.scss` | Variables used by Layout Partials. You can easily change Aside width, header height and other common properties.

Sample
    type: 'remote'

`_init.scss` | Used by the main stylesheet `style.scss` to import demo related layout partials partials
`_base.scss` | Normalizes and resets the document's CSS to make browsers render all elements more consistently and in line with modern standards.
`_main.scss` | Defines Base Layout styles.
`_header.scss` | Defines Header styles.
`_header-menu.scss` | Defines Header Menu styles.
`_header-topbar.scss` | Defines Header Topbar styles.
`_header-mobile.scss` | Defines Header styles for mobile mode.
`_subheader.scss` | Defines Subheader styles.
`_aside.scss` | Defines Aside styles.
`_brand.scss` | Defines Brand(Logo) styles.
`_content.scss` | Defines Content styles.
`_footer.scss` | Defines Footer styles.
`_offcanvas.scss` | Defines Offcanvas(Notification Panel, User Profile Panel, etc) styles.

The above Layout Partials sass files are imported in `[metronic]/theme/html/[demo]/src/sass/style.scss` and compiled into the main style bundle `[metronic]/theme/html/[demo]/dist/assets/css/style.bundle.css`

## Vendors

Vendors folder conains SASS files to overide and customize all 3rd-party plugins styles to provide unified look & feel for all 3rd-party plugins. The Vendors SASS files are imported in `[metronic]/theme/html/[demo]/src/sass/style.scss` and compiled into the main style bundle `[metronic]/theme/html/[demo]/dist/assets/css/style.bundle.css`

## Pages

Unless Layout Partials, the Pages SASS Files are indivudally compiled into `[metronic]/theme/html/[demo]/dist/assets/css/pages/` folder. The Pages CSS Files are included in HTML pages on demand.

## Themes

Theme SASS files are used to generate additional CSS files to provide skin/theme support for the Layout Partials(e.g: Light Aside Theme, Dark Header Theme). The Theme SASS files are indivudally compiled into `[metronic]/theme/html/[demo]/dist/assets/css/theme/` folder and included in HTML pages on demand. To see this in action check out Demo1 Layout Builder

## Compilation

- Metronic compiles Layout, Components(including the Bootstrap & Custom components), Vendors SASS files into the main the main style bundle: `[metronic]/theme/html/[demo]/dist/assets/css/style.bundle.css`.
- The Pages and Themes SASS files are compiled separately into CSS folder: `[metronic]/theme/html/[demo]/dist/assets/css/`
- All 3rd-party css files are bundled into the Plugins Bundle CSS file and globally included in all pages. `[metronic]/theme/html/[demo]/dist/assets/plugins/global/plugins.bundle.css`