Helpers

Height

You can set custom height for blocks.
Available sizes: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.

.h-40

.h-100

<div class="h-40">height: 40px;</div>
<div class="mh-100">max-height: 100px;</div>

Width

You can set custom width for blocks.
Available sizes: 0, 10, 20, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 320, 360, 380, 400.
To set width 100% use this classname .fluid-width.

.w-40

.w-120

.fluid-width

<div class="w-40">width: 40px;</div>
<div class="w-120">width: 120px;</div>
<div class="fluid-width">width: 100%;</div>

You can set custom max-width or min-width for blocks.
Available sizes: 0, 10, 20, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180, 200, 240, 280, 320, 360, 400, 450, 500, 550, 600, 700, 800, 900, 1000, 1100, 1200.

<div class="mw-500">max-width: 500px;</div>
<div class="mw-1200">max-width: 1200px;</div>
<div class="mnw-200">min-width: 200px;</div>
<div class="mnw-400">min-width: 400px;</div>

Font Weight

You can set custom font weight for blocks.
Available sizes: 100, 200, 300, 400, 500, 600, 700, 800, 900.

weight 100
weight 400
weight 700
weight 900

<div class="fw-100">font-weight: 100;</div>
<div class="fw-400">font-weight: 400;</div>
<div class="fw-700">font-weight: 700;</div>
<div class="fw-900">font-weight: 900;</div>

Line Height

You can set custom line height for blocks.
Available sizes: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50.

<div class="lh-20">line-height: 20px;</div>

Padding

You can set custom padding for blocks.
Available paddings:

padding: .p-10;
padding-top: .pt-10;
padding-left: .pl-10;
padding-right: .pr-10;
padding-bottom: .pb-10;

Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.

.p-10

.pl-10

.pt-10

.pr-10

.pb-10

<div class="p-10">padding: 10px;</div>
<div class="pl-10">padding-left: 10px;</div>
<div class="pt-10">padding-top: 10px;</div>
<div class="pr-10">padding-right: 10px;</div>
<div class="pb-10">padding-bottom: 10px;</div>

Margin

You can set custom margin for blocks.

Available margins:

margin: .m-10;
margin-top: .mt-10;
margin-left: .ml-10;
margin-right: .mr-10;
margin-bottom: .mb-10;

Available negative margins:

margin: .mn-10;
margin-top: .mnt-10;
margin-left: .mnl-10;
margin-right: .mnr-10;
margin-bottom: .mnb-10;

Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.

.m-10

.ml-10

.mt-10

.mr-10

.mb-10

<div class="m-10">margin: 10px;</div>
<div class="ml-10">margin-left: 10px;</div>
<div class="mt-10">margin-top: 10px;</div>
<div class="mr-10">margin-right: 10px;</div>
<div class="mb-10">margin-bottom: 10px;</div>

Border Radius

You can set custom border radius for blocks.
Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 25, 30, 35.

.br-5

.br-18

.br-35

<div class="br-5">border-radius: 5px;</div>
<div class="br-18">border-radius: 18px;</div>
<div class="br-35">border-radius: 35px;</div>

Overflow

You can set overflow.

overflow: auto - .of-a
overflow: hidden - .of-h
overflow: visible - .of-v
overflow-x: auto - .of-x-a
overflow-x: hidden - .of-x-h
overflow-x: visible - .of-x-v
overflow-y: auto - .of-y-a
overflow-y: hidden - .of-y-h
overflow-y: visible - .of-y-v

<div class="of-a">overflow: auto;</div>
<div class="of-h">overflow: hidden;</div>
<div class="of-v">overflow: visible;</div>
<div class="of-x-a">overflow-x: auto;</div>
<div class="of-x-h">overflow-x: hidden;</div>
<div class="of-x-v">overflow-x: visible;</div>
<div class="of-y-a">overflow-y: auto;</div>
<div class="of-y-h">overflow-y: hidden;</div>
<div class="of-y-v">overflow-y: visible;</div>

Vertical Align

This should be vertically aligned

<div class="valign-wrapper">
  <h5 class="valign">This should be vertically aligned</h5>
</div>

Text Align

These classes are for horizontally aligning content. We have .left-align, .right-align and .center-align

This should be left aligned

This should be right aligned

This should be center aligned

<div>
  <h5 class="left-align">This should be left aligned</h5>
</div>
<div>
  <h5 class="right-align">This should be right aligned</h5>
</div>
<div>
  <h5 class="center-align">This should be center aligned</h5>
</div>

Quick Floats

Quickly float things by adding the class left or right to the element. !important is used to avoid specificity issues.

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

Hiding Content

	Screen Range
`.hide`	Hidden for all Devices
`.hide-on-small-only`	Hidden for Mobile Only
`.hide-on-med-only`	Hidden for Tablet Only
`.hide-on-med-and-down`	Hidden for Tablet and Below
`.hide-on-med-and-up`	Hidden for Tablet and Above
`.hide-on-large-only`	Hidden for Desktop Only

<div class="hide-on-small-only"></div>

Other

Text Uppercase

.text-uppercase

uppercase example

<span class="text-uppercase">uppercase example</span>

Cursor Pointer

.cursor

Hover Over Me!

<span class="cursor">Hover Over Me!</span>