base

Overview

Metronicfully utilizes the Bootstrap Utility API in src/sass/components/_utilities.scss to generate additional utility classes to cover its own design system. The customized utility SASS variables are defined in src/sass/components/_variables.scss and in src/sass/components/_variables.custom.scss you 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/components/_variables.scss:

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 variable comment 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:

scss

$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:

scss

$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 value is 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

html

<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 value is 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
n1 - for classes that set letter spacing to -0.1rem
n2 - for classes that set letter spacing to -0.115rem
n3 - for classes that set letter spacing to -0.125rem
n4 - for classes that set letter spacing to -0.25rem
n5 - 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

Example text for .ls-n1

Example text for .ls-n2

Example text for .ls-n3

Example text for .ls-n4

Example text for .ls-n5

html

<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>
<div class="ls-n1">Example text for .ls-n1</div>
<div class="ls-n2">Example text for .ls-n2</div>
<div class="ls-n3">Example text for .ls-n3</div>
<div class="ls-n4">Example text for .ls-n4</div>
<div class="ls-n5">Example text for .ls-n5</div>

Width & Height

Assign responsive-friendly height, min-height, max-height, width , min-with and max-width values to an element with shorthand classes. The classes are named using the format {property}-{size} for xs and {property}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is 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 size defined with $custom-sizes variable in sass/_variables.scss is 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

html

<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 value is 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

html

<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>

CSS Variables

There are a variety custom CSS variables available. To access these variables in Javascript(Charts, etc), we have provided a simple Javascript function to grab it through CSS variables easily and quickly. Here's the list of CSS variables available for you:

--kt-primary - Primary color hex value.
--kt-success - Success color hex value.
--kt-info - Info color hex value.
--kt-danger - Danger color hex value.
--kt-warning - Warning color hex value.
--kt-dark - Dark color hex value.
--kt-light - Light color hex value.
--kt-gray-100 - Gray 100 color hex value.
--kt-gray-200 - Gray 200 color hex value.
--kt-gray-300 - Gray 300 color hex value.
--kt-gray-500 - Gray 400 color hex value.
--kt-gray-500 - Gray 500 color hex value.
--kt-gray-600 - Gray 600 color hex value.
--kt-gray-700 - Gray 700 color hex value.
--kt-gray-800 - Gray 800 color hex value.
--kt-gray-900 - Gray 900 color hex value.
--kt-xs - Extra small breakpoint width value - 0.
--kt-sm - Extra small breakpoint width value - 576px.
--kt-md - Medium small breakpoint width value - 768px.
--kt-lg - Large small breakpoint width value - 992px.
--kt-xl - Extra large small breakpoint width value - 1200px.
--kt-xxl - Double extra large breakpoint width value - 1400px.
--kt-font-sans-serif - Main font family. E.g: "Roboto", sans-serif.

To access these variables, simply call it with this function KTUtil.getCssVariableValue('css variable name').
For example to access the primary color, CSS responsive breakpoint value or the theme font family you can use the below code:

javascript

var primaryColor = KTUtil.getCssVariableValue("--kt-primary");
var breakpointLg = KTUtil.getCssVariableValue("--kt-lg");
var fontFamily = KTUtil.getCssVariableValue("--kt-font-sans-serif");