x
Support Purchase
Metronic

The Ultimate Bootstrap & Angular 7 Admin Theme Framework For Next Generation Applications

Watch Video

 

Demo SASS

Demo Layout SASS

Each demo has own base style(the layout base and partials) [root]/theme/default/src/assets/sass/theme/demos/[demo_id]/style.scss that will be compiled into the demo's base css bundle styles.bundle.css.

Demo Config SASS

Each demo has own SASS config [root]/theme/default/src/assets/sass/theme/demos/[demo_id]/style.scss that will be used to compile the above main style SASS file style.scss. In this config file you can override any of the Global SASS variables.

Variable Description
$kt-page-bg-color Page background color.
Config 
$kt-page-bg-color: #f2f3f8;
$kt-page-padding Page padding based on the responsive screens.
Config 
$kt-page-padding: (
	desktop: 25px,
	mobile: 15px
);
$kt-page-margin Page margin based on the responsive screens.
Config 
$kt-page-margin: (
	desktop: 30px,
	mobile: 0
);
$kt-page-body-bg-color Page body background color.
Config 
$kt-page-body-bg-color: #efeff5;
$kt-page-content-bg-color Page content background color.
Config 
$kt-page-content-bg-color: #f9f9fc;
$kt-page-container-width Fixed page width.
Config 
$kt-page-container-width: 1380px;
$kt-page-fluid-container-padding Fluid page padding.
Config 
$kt-page-fluid-container-padding: 80px;
$kt-aside-default-width Aside menu width for default state.
Config 
$kt-aside-default-width: 260px;
$kt-aside-minimize-width Aside menu width for minimize state.
Config 
$kt-aside-minimize-width: 78px;
$kt-aside-offcanvas-width Aside menu width of offcanvas.
Config 
$kt-aside-offcanvas-width: 255px;
$kt-layout-skins Layout skin colors.
Config 
$kt-layout-skins: (
	brand: #4d65dc,
	navy: #242939,
	light: #ffffff
);
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes! Jonathan Bartlett, Metronic Customer

Powerful Framework

Everything within Metronic is customizable globally to provide limitless unique styled projects

Multi Demo

Choose a perfect design for your next project among hundreds of demos

Limitless Components

A huge collection of components to power your application with the latest UI/UX trands

Angular 7 Support

Enterprise ready Angular 7 integration with built-in authentication module and many more

Bootstrap 4

Metronic deeply customizes Bootstrap with native look and feel

Exclusive Datatable Plugin

Our super sleek and intuitive Datatable comes packed with all advanced CRUD features

70,000+ Strong

Metronic is the only theme trusted by over 70,000 developers world wide

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is written with a code structure that all developers will be able to pick up easily and fall in love

The Ultimate Bootstrap Admin Theme Trusted By Over 70,000 Developers World Wide

PURCHASE NOW