Utility classes

Some of the most required classes to have for the ease of development.

Sizing

Change width and height of an element with a bunch of available classes.

Percentage sizing

Add .w-{size} or .h-{size} to an element to change width or height respectively; where {size} can be any integer among 0, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100.

Pixel sizing

Since the numbers less and equal to 100 is used for percentage sizing by default, we have two different class names for pixel sizing.

Above 100 pixel

Add .w-{size} or .h-{size} to an element to change width or height respectively; where {size} can be any integer among 125, 150, 175, 200, 250, 300, 350, 400, 500, 600, 700, 800, 900.

Below 101 pixel

Add .w-{size}px or .h-{size}px to an element to change width or height respectively; where {size} can be any 5x integer between 5 and 100. So, .w-20px is equals to width: 20px;

Extra classes

Here's the list of other classes and equivalent css code.

Spacing

Make a gap between items of a parent element.

Gap horizontally

These classes apply to a parent and make a horizontal gap between all immediate children by giving them margin-left and margin-right property. Simply add .gap-x-{size} to the parent, where {size} can be an integer number between 1 to 7. Please note that .gap-x is equals to .gap-x-3.

Gap horizontally and vertically

These classes apply to a parent and make a horizontal and vertical gap between all immediate children by giving them margin property. This classes are the best choice to elements with several children which might fall into two or more lines. Simply add .gap-xy-{size} to the parent, where {size} can be an integer number between 1 to 7. Please note that .gap-x is equals to .gap-xy-3.

Typography

The following utilities can be used to add additional styles to texts.

Font size

We have three types of classes which can change font size of an element.

Pixel size

Add .font-size-{size} or .fs-{size} to any element, where {size} can be any integer between 6 to 20.

Lead

Add .lead-{size} to any element, where {size} can be any integer between 1 to 9.

Small

Add .small-{size} to any element, where {size} can be any integer between 1 to 9.

Font family

We have .font-body and .font-title classes to set font family of your element to the base font family and title font family respectively.

Also, you can use data-font="{font-family}:{font-weight}" on an element to use any of Google fonts in your typography. Following is some examples of using data-font.

Font weight

Add .font-weight-{value} or .fw-{value} to any element, where {value} can be any of: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Line height

Add .line-height-{size} or .lh-{size} to any element, where {size} can be any integer between 1 to 9.

Letter spacing

Add .letter-spacing-{size} or .ls-{size} to any element, where {size} can be any of: 0, 1, 2, 3, 4, 5.

Border

Add border to any side of an element and change border radius.

Add border

You can add a 1px border to any side of an element using .border-{side}-1 where {side} can be any value among left | top | right | bottom. The shorthand class is .b{side}-1 where {side} can be a value among l | t | r | b.

Border radius

The following example displays the available classes for modifying border radius of an element.

Background image

These classes help you to attach an image to background of an element. Image can be set using inline css and background-image property.

You should apply .bg-img to your desire element. Then, you can modify the image behavior using following utility classes, or draw an overlay above it.

Opacity

Add .opacity-{value} to an element, where {value} can be a 5x integer value between 0 to 100.

Shadow

Add a box shadow to an element using .shadow-* and .hover-shadow-* classes.

Hover shadow