logo
The World’s #1 Bootstrap 5 HTML,
VueJS, React, Angular, Laravel, Asp.Net Core, Blazor, Django & Flask

Admin Dashboard Ecosystem

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.
View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/

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

Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop