{{ enablePlugins('prettify') }} {% set title = "Helpers" %} {% extends "layouts/application.html" %} {% block head %} {% endblock %} {% block content %} {% include "shared/page-title.html" %}

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>

Font Size

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>

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: 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: Available negative margins: 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>
{% endblock %}