# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Metronic uses SASS , the most powerful CSS preprocessor for handling the theme css efficiently. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

# Components

Components folder in `/src/sass/components/`contains SASS code that customizes the core Bootstrap components to match the Metronic's own design system and custom components. Both Metronic and Bootstrap components are customized in `/src/sass/_variables.scss`.

# Bootstrap Variables

In `/src/sass/_variables.scss`file, Metronic deeply customizes the standard Bootstrap components by following the best practices explained in the official documentation.
Custom variables that used to customize Bootstrap components are marked with `Custom variable`comment in `_variables.scss`file.

# Override Variables

If you like to change the Bootstrap theme colors, border radiuses, font family and other variables, we suggest using `_variables.custom.scss`file so you keep your own changes separated from future updates to avoid conflicts. All variables to override in this file should be set without the `!default`attribute to prioritize your code change.

# Layout

Layout related SASS code is located in `/src/sass/layout/`folder. This folder contains the layout's markup and SASS variables files as explained in the below table:

File | Description
--- | ---
`_variables.scss` | Variables used by Layout Partials. You can easily change Aside width, header height and other common properties.
`_layout.scss` | Defines main layout and its dependencies.
`_main.scss` | Defines base markup and styles.
`_header.scss` | Defines base layout markup and styles.
`_footer.scss` | Defines footer markup and styles.

# Compilation

- Metronic compiles layout, components(including the Bootstrap & custom components) into the main bundle: `dist/assets/css/style.bundle.css`.
- The custom SASS files are compiled separately into CSS folder: `dist/assets/css/custom`
- All 3rd-party plugins css files are bundled into the plugins bundle CSS file and globally included in all pages. `dist/assets/plugins/global/plugins.bundle.css`.

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now