Helpers

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.

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

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.

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

You can set custom font weight for blocks.
Available sizes: 100, 200, 300, 400, 500, 600, 700, 800, 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>

You can set custom font size for blocks.
Available sizes: 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.

size 5
size 10
size 15
size 20

                        <div class="fs-5">font-size: 5px;</div> <div class="fs-10">font-size: 10px;</div> <div class="fs-15">font-size: 15px;</div> <div class="fs-20">font-size: 20px;</div>

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>

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

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

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.

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

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>

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

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

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

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>

	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>

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>