Metronic

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

Stylesheets

Overview

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

Config

The demo's style.scss includes the entire framework stylesheets and compiles with its own layout and global settings that overrides's Metronic frameworks base global settings. Thus each demo can customize and change the look and feel of the the entire theme components by overriding global config [root]/theme/default/src/sass/framework/_config.scss by the demo level config [root]/theme/default/src/sass/demo/[demo_id]/_framework-config.scss.

Metronic uses nested map list to structure the config options with special custom function arrat-get() to access the nested config structure. Below is the example of the framework's base SASS config:


//
//** Global Config
//

//== Framework SASS Functions
@import "base/functions";

//== Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$m--layout-breakpoints: (
  	// Small screen / phone
  	sm: 576px,

  	// Medium screen / tablet
  	md: 768px,

  	// Large screen / desktop
  	lg: 992px,

  	// Extra large screen / wide desktop
  	xl: 1200px,

    // Extra large screen / wide desktop
    xxl: 1400px,

    xxxl: 1600px
) !default;

//== Global arrow style
$m--arrow-style: 'smooth'; // supported options: smooth, classic

//== Default skin
$m--default-skin: 'light'; // supported options: light, dark

//== Global rounded border mode
$m--rounded: true;

//== Force cursor with pointer for button tags globally
$m--btn-force-hover-pointer: true;

//== Border Radius
$m--border-radius: (
    general: 4px,
    dropdown: 6px,
    scrollbar: 2px
);

//== Transition
$m--transition: (
    general: all 0.3s,
    link: (
        hover: color .4s ease
    )
);

//== UI State Color
$m--state-colors: (
    // metronic states
    brand: (
        base: #716aca,
        inverse: #ffffff
    ),
    metal: (
        base: #c4c5d6,
        inverse: #111111
    ),
    light: (
        base: #ffffff,
        inverse: #282a3c
    ),
    accent: (
        base: #00c5dc,
        inverse: #ffffff
    ),
    focus: (
        base: #9816f4,
        inverse: #ffffff
    ),

    // bootstrap states
    primary: (
        base: #5867dd,
        inverse: #ffffff
    ),
    success: (
        base: #34bfa3,
        inverse: #ffffff
    ),
    info: (
        base: #36a3f7,
        inverse: #ffffff
    ),
    warning: (
        base: #ffb822,
        inverse: #111111
    ),
    danger: (
        base: #f4516c,
        inverse: #ffffff
    )
);

//== The body element font settings
$m--root-font: (
    size: (
        desktop: 14px,
        tablet: 13px,
        mobile: 13px
    ),
    weight: 300,
    color: (
        light: #333333,
        dark: #efefef
    )
);

//== Best font families
$m--font-families: (
    regular: 'Poppins',
    heading: 'Roboto'
);

//== General link font settings
$m--link-font: (
    default: (
        color: (
            light: get-brand-color(),
            dark: get-brand-color()
        )
    ),

    hover: (
        color: (
            light: get-brand-color('+'),
            dark: get-brand-color('+')
        )
    )
);
							
							

You can access to an option by using array-get() function as shown below:

$border-radius: array-get($m--border-radius, general); // 4px;
$brand-base-color: array-get($m--state-colors, brand, base); // #716aca
$brand-inverse-color: array-get($m--state-colors, brand, inverse); // #ffffff

Mixins

You can use Metronic's globally available base mixins in your custom codes. All available mixins can be found here: src/sass/framework/base/_mixins.scss

Functions

You can use Metronic's globally available SASS functions in your custom codes. All available functions can be found here: src/sass/framework/base/_functions.scss

Helper Classes

Class Description
m--margin-[size]
m--margin-top-[size]
m--margin-bottom-[size]
m--margin-left-[size]
m--margin-right-[size]
Margin helper classes where [size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example: m--margin-10, m--margin-top-20
m--padding-[size]
m--padding-top-[size]
m--padding-bottom-[size]
m--padding-left-[size]
m--padding-right-[size]
Padding helper classes where [size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example: m--padding-10, m--padding-left-20
m--full-height Set full 100% height helper class.
m--valign-top
m--valign-middle
m--valign-bottom
Vertical align the content to top, middle or bottom
m--space-[size] Space helper classes where [size] can accept 5, 10, 15, 20, 30, and 40. Example: m--space-10, m--space-20
m--block-center Helper class to set element centered.
m--align-[alignment] Alignment helper classes where [alignment] can accept right, left and center. Example: m--align-right, m--align-center
m--pull-[direction] Pull element helper classes where [direction] can accept right and left. Example: m--pull-right, m--pull-left
m--img-rounded Image rounded border helper class
m--block-inline Helper class to set element display as inline block.
m--hide Helper class to hide element.
m--clearfix
m--marginless Remove margin helper class
m--img-centered Helper class to set image centered
m--font-transform-u
m--font-transform-l
m--font-transform-c
m--font-transform-i
Text transform helper classes.
m--font-[weight] Weight helper classes where [weight] can accept thin, normal, bold, bolder, boldest and boldest2. Example: m--font-thin, m--font-normal, m--font-bold
m--[type]-font-size-[size] Font size helper classes where [type] can accept text and icon. [size] can accept lg1, lg2, lg3, lg4, lg5, sm1, sm2, sm3, sm4, and sm5. Example: m--icon-font-size-lg3, m--font-normal
m--font-[color]
m--font-inverse-[color]
m--bg-[color]
m--bg-fill-[color]
Font and background color helper classes where [color] can accept brand, metal, light, accent, focus, primary, success, info, warning and danger. Example: m--font-inverse-primary, m--bg-info, m--bg-fill-danger
m--visible-[breakpoint]
m--visible-[breakpoint]-inline-block
m--hidden-[breakpoint]
Helper classes to set visible or hidden for responsive breakpoint. [breakpoint] can accept sm, md, lg, xl, xxl, xxxl. Example: m--visible-sm, m--visible-md-inline-block, m--hidden-xl
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 6 Support

Enterprise ready Angular 6 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

60,000+ Strong

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

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is writer 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 60,000 Developers World Wide