Utilities

This is a collection of utility classes which might come in handy when you need to add a certain behaviour to your elements.

Text Alignments

<p class="txt-left">...</p>
<p class="txt-center">...</p>
<p class="txt-right">...</p>

Uppercased Text

Add .txt-uppercase class to tranform any text to uppercase.

<p class="txt-uppercase">please transform this sentence to uppercase</p>

Truncating Text

To truncate a line of text, use the class .txt-truncate.

<p class="txt-truncate">...</p>

Disabling an Element

You can use class .disabled to disable pretty much anything. Below are some usage examples.

<a href="javascript:void(0);" class="disabled">...</a>
<button class="btn disabled">...</button>
<div class="card disabled">...</div>

Hiding an Element

You can use class .hide to hide an element. This will force the element to be display: none;.

<div class="hide">...</div>

Z-Index Scale

Z-Index Scale was created with one simple objective, putting everything into a well organized “layering system”. Below is the actual scale.

// The z-index scale
$z-index-1:         100;
$z-index-2:         200;
$z-index-3:         300;
$z-index-4:         400;
$z-index-5:         500;
$z-index-6:         600;
$z-index-7:         700;
$z-index-8:         800;
$z-index-9:         900;
$z-index-10:       1000;

No z-index value is to be set outside of _zindex.scss. The above z-index scale is not allowed to be modified, only new z-index applications are to be added in this file. See an example below.

$z-index-tooltip: $z-index-8;

Then we will use it in _tooltip.scss like this:

.tooltip {
    z-index: $z-index-tooltip;
}

Which will render the following in CSS:

.tooltip {
    z-index: 8;
}

Floating Classes

Floats could be applied using predefined classes such as .left or .right.

<span class="left">...</span>
<span class="right">...</span>

Clearfixin'

Add the class .clearfix to easily clear floats. This should be added to the parent element. Clearfix is basically a mixin from Bourbon.

<div class="clearfix">...</div>

This is the output CSS

.clearfix::after {
  clear: both;
  content: '';
  display: table;
}

Flexbox Classes

We use flexbox extensively to layout our components, here is the list of the common flexbox classes we could use.

<div class="display-flex">...</div>
<div class="align-items-center">...</div>
<div class="justify-content-space-between">...</div>
<div class="justify-content-center">...</div>
<div class="flex-direction-column">...</div>

Display Types Classes

The list of display types helper classes below are introduced to help quickly change these value in an element without sacrificing semantic sanity

<div class="display-block">...</div>
<div class="display-inline">...</div>
<div class="display-inline-block">...</div>

Contextual Coloring Classes

Contextual color classes could be applied to both text and background color. Use these classes to quickly alter color of these element. These classes use !important to ensure the styles are applied.

<span class="txt-grey">...</span>
<span class="txt-primary">...</span>
<span class="txt-success">...</span>
<span class="txt-warning">...</span>
<span class="txt-danger">...</span>

SVG icons also have their own coloring classes

<svg class="icon-svg icon-grey">...</svg>
<svg class="icon-svg icon-primary">...</svg>
<svg class="icon-svg icon-success">...</svg>
<svg class="icon-svg icon-warning">...</svg>
<svg class="icon-svg icon-danger">...</svg>

Background color contextual classes could be applied on any element, even table rows.

<span class="bg-grey">...</span>
<span class="bg-primary">...</span>
<span class="bg-success">...</span>
<span class="bg-warning">...</span>
<span class="bg-danger">...</span>