Overview

This is a design system utility class based on and extending the Bootstrap Utility API.

Line Height

Additional line height options that extend the Bootstrap Line Height Classes.
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
          <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
          <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
          <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
          <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

Additional custom CSS variables. Below is a list of available CSS variables.
  • --bs-primary - Primary color hex value.
  • --bs-success - Success color hex value.
  • --bs-info - Info color hex value.
  • --bs-danger - Danger color hex value.
  • --bs-warning - Warning color hex value.
  • --bs-dark - Dark color hex value.
  • --bs-light - Light color hex value.
  • --bs-gray-100 - Gray 100 color hex value.
  • --bs-gray-200 - Gray 200 color hex value.
  • --bs-gray-300 - Gray 300 color hex value.
  • --bs-gray-400 - Gray 400 color hex value.
  • --bs-gray-500 - Gray 500 color hex value.
  • --bs-gray-600 - Gray 600 color hex value.
  • --bs-gray-700 - Gray 700 color hex value.
  • --bs-gray-800 - Gray 800 color hex value.
  • --bs-gray-900 - Gray 900 color hex value.
  • --bs-xs - Extra small breakpoint width value - 0.
  • --bs-sm - Extra small breakpoint width value - 576px.
  • --bs-md - Medium small breakpoint width value - 768px.
  • --bs-lg - Large small breakpoint width value - 992px.
  • --bs-xl - Extra large small breakpoint width value - 1200px.
  • --bs-xxl - Double extra large breakpoint width value - 1400px.
  • --bs-font-sans-serif - Main font family. E.g: "Roboto", sans-serif.
Javascript can also be used to access these variables.
          const primaryColor = KTUtil.getCssVariableValue('--bs-primary');
const breakpointLg = KTUtil.getCssVariableValue('--bs-lg');
const fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');