Documentation v8.0.9

Overview

Metronic fully utilizes the Bootstrap Utility API  in src/sass/_utilities.scssto generate additional utility classes to cover its own design system. The customized utility SASS variables are defined in src/sass/_variables.scssand in src/sass/_variables.custom.scssyou can override any variable for your needs.

Theme Colors

Metronic extends Bootstrap Colors  system with extra variants to cover its own design system build on top of the Boostrap Standards. The extended theme color SASS variables are defined in src/sass/_variables.scss:
// Theme colors
$theme-colors: (
    "white":      $white,  // custom color type
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
) !default;

// Active and hover states colors
$theme-active-colors: (
    "white":      $white-active,   // custom color type
    "primary":    $primary-active,
    "secondary":  $secondary-active,
    "success":    $success-active,
    "info":       $info-active,
    "warning":    $warning-active,
    "danger":     $danger-active,
    "light":      $light-active,
    "dark":       $dark-active
) !default;  // Custom variable

// Inverse colors
$theme-inverse-colors: (
    "white":      $white-inverse,
    "primary":    $primary-inverse,
    "secondary":  $secondary-inverse,
    "success":    $success-inverse,
    "info":       $info-inverse,
    "warning":    $warning-inverse,
    "danger":     $danger-inverse,
    "light":      $light-inverse,
    "dark":       $dark-inverse
) !default;  // Custom variable

// Light colors
$theme-light-colors: (
    "white":      $white-light,
    "primary":    $primary-light,
    "secondary":  $secondary-light,
    "success":    $success-light,
    "info":       $info-light,
    "warning":    $warning-light,
    "danger":     $danger-light,
    "light":      $light-light,
    "dark":       $dark-light
) !default;  // Custom variable

// Text colors
$theme-text-colors: (
    "white":      $white,
    "primary":    $primary,
    "secondary":  $dark,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "muted":      $text-muted,
    "gray-100":   $gray-100,
    "gray-200":   $gray-200,
    "gray-300":   $gray-300,
    "gray-400":   $gray-400,
    "gray-500":   $gray-500,
    "gray-600":   $gray-600,
    "gray-700":   $gray-700,
    "gray-800":   $gray-800,
    "gray-900":   $gray-900
) !default;  // Custom variable
Custom variables that used to customize Bootstrap components are marked with Custom variablecomment in _variables.scss  file.

Spacing

Metronic  extends Bootstrap Spacing Classes  to provide additonal spacing options by overidding the default spacing SASS variable as shown below:
$spacers: (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: ($spacer * .75),
    4: ($spacer * 1),
    5: ($spacer * 1.25),
    6: ($spacer * 1.5),
    7: ($spacer * 1.75),
    8: ($spacer * 2),
    9: ($spacer * 2.25),
    10: ($spacer * 2.5),
    11: ($spacer * 2.75),
    12: ($spacer * 3),
    13: ($spacer * 3.25),
    14: ($spacer * 3.5),
    15: ($spacer * 3.75),
    16: ($spacer * 4),
    17: ($spacer * 4.25),
    18: ($spacer * 4.5),
    19: ($spacer * 4.75),
    20: ($spacer * 5)
);

Font Sizes

Metronic  extends Bootstrap Font Size Classes  to provide additonal sizing options by overidding the default font size SASS variable as shown below:
$font-sizes: (
    1: $h1-font-size,   // 22.75px
    2: $h2-font-size,   // 19.50px
    3: $h3-font-size,   // 17.55px
    4: $h4-font-size,   // 16.25px
    5: $h5-font-size,   // 14.95px
    6: $h6-font-size,   // 13.95px

    7: $font-size-base * 0.95,  // 12.35px
    8: $font-size-base * 0.85,  // 11.05px
    9: $font-size-base * 0.75,  // 9.75px
    10: $font-size-base * 0.5,  // 6.50px

    base: $font-size-base, // 13px
    fluid: 100%, // 100%

    2x: $font-size-base * 2,        // 26px
    2qx: $font-size-base * 2.25,    // 29.25px
    2hx: $font-size-base * 2.5,     // 32.5px
    2tx: $font-size-base * 2.75,    // 35.75px

    3x: $font-size-base * 3,        // 39px
    3qx: $font-size-base * 3.25,    // 42.25px
    3hx: $font-size-base * 3.5,     // 45.5px
    3tx: $font-size-base * 3.75,    // 48.75px

    4x: $font-size-base * 4,        // 52px
    4qx: $font-size-base * 4.25,    // 55.25px
    4hx: $font-size-base * 4.5,     // 58.5px
    4tx: $font-size-base * 4.75,    // 61.75px

    5x: $font-size-base * 5,        // 65px
    5qx: $font-size-base * 5.25,    // 68.25px
    5hx: $font-size-base * 5.5,     // 71.5px
    5tx: $font-size-base * 5.75     // 74.75px
) !default;

Line Height

Metronic  extends Bootstrap Line Height Classes  to provide additonal line height options by overidding the line height SASS variable.
Use .lh-{value}class to set an element's line height where valueis one of:
  • 1- for classes that set line height to 1
  • sm- for classes that set line height to 1.25
  • base- for classes that set line height to 1.5
  • lg- for classes that set line height to 1.75
  • xl- for classes that set line height to 2
  • xxl- for classes that set line height to 2.25
Example text
for .lh-1
Example text
for .lh-sm
Example text
for .lh-base
Example text
for .lh-lg
Example text
for .lh-xl
Example text
for .lh-xxl
<div class="lh-1">Example text for .lh-1</div>
<div class="lh-sm">Example text for .lh-sm</div>
<div class="lh-base">Example text for .lh-base</div>
<div class="lh-lg">Example text for .lh-lg</div>
<div class="lh-xl">Example text for .lh-xl</div>
<div class="lh-xxl">Example text for .lh-xxl</div>

Letter Spacing

Use .ls-{value}class to set an element's letter spacing where valueis one of:
  • 1- for classes that set letter spacing to 0.1rem
  • 2- for classes that set letter spacing to 0.115rem
  • 3- for classes that set letter spacing to 0.125rem
  • 4- for classes that set letter spacing to 0.25rem
  • 5- for classes that set letter spacing to 0.5rem
Example text for .ls-1
Example text for .ls-2
Example text for .ls-3
Example text for .ls-4
Example text for .ls-5
<div class="ls-1">Example text for .ls-1</div>
<div class="ls-2">Example text for .ls-2</div>
<div class="ls-3">Example text for .ls-3</div>
<div class="ls-4">Example text for .ls-4</div>
<div class="ls-5">Example text for .ls-5</div>

Width & Height

Assign responsive-friendly height, min-height, max-height, width, min-withand max-widthvalues to an element with shorthand classes. The classes are named using the format {property}-{size}for xsand {property}-{breakpoint}-{size}for sm, md, lg, xl, and xxl.
Where propertyis one of:
  • h- for classes that set height
  • mh- for classes that set max height
  • min-h- for classes that set min height
  • w- for classes that set width
  • mw- for classes that set max width
  • min-w- for classes that set min width
Where sizedefined with $custom-sizesvariable in sass/_variables.scssis one of-
  • 25- for 25%
  • 50- for 50%
  • 75- for 75%
  • 100- for 100%
  • auto- for auto
  • 1px
  • 2px
  • 3px
  • 4px
  • 5px
  • 6px
  • 7px
  • 8px
  • 9px
  • 10px
  • 15px
  • 20px
  • 25px
  • 30px
  • 35px
  • 40px
  • 45px
  • 50px
  • 55px
  • 60px
  • 65px
  • 70px
  • 75px
  • 80px
  • 85px
  • 90px
  • 95px
  • 100px
  • 125px
  • 150px
  • 175px
  • 200px
  • 225px
  • 250px
  • 275px
  • 300px
  • 325px
  • 350px
  • 375px
  • 400px
  • 425px
  • 450px
  • 475px
  • 500px
  • 550px
  • 600px
  • 650px
  • 700px
  • 750px
  • 800px
  • 850px
  • 900px
  • 950px
  • 1000px
w-100px
h-100px
w-150px
h-150px
w-200px
h-200px
w-250px
h-250px
min-w-100px
min-h-100px
mw-100px
mh-100px
min-w-150px
min-h-150px
mw-150px
mh-150px
min-w-200px
min-h-200px
mw-200px
mh-200px
min-w-250px
min-h-250px
mw-250px
mh-250px
<div class="w-100px h-100px"></div>
<div class="w-150px h-150px"></div>
<div class="w-200px h-200px"></div>
<div class="w-250px h-250px"></div>
<div class="min-w-100px min-h-100px mw-100px mh-100px"></div>
<div class="min-w-150px min-h-150px mw-150px mh-150px"></div>
<div class="min-w-200px min-h-200px mw-200px mh-200px"></div>
<div class="min-w-250px min-h-250px mw-250px mh-250px"></div>

Z-Index

Use .z-index-{value}class to set an element's z-index:
Where valueis one of:
  • n1- for classes that set z-index n1
  • n2- for classes that set z-index n2
  • 0- for classes that set z-index 0
  • 1- for classes that set z-index 1
  • 2- for classes that set z-index 2
  • 3- for classes that set z-index 3
<div class="z-index-n1"></div>
<div class="z-index-n2"></div>
<div class="z-index-0"></div>
<div class="z-index-1"></div>
<div class="z-index-2"></div>
<div class="z-index-3"></div>

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon