Utility Classes

Width & height

Sizing

---

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

Apply .w-{size} or .h-{size} to any element (except inline elements) to set the width or height of the element to {size}px. Available sizes are:

• 0, 100, 200, 300, 400, 500, 600, 700, 800, 900
• 10, 20, 30, 40, 50, 60, 70, 80, 90
• 50, 150, 250, 350, 450
• 120, 140, 160, 180
• 25, 50, 75

For example, .w-50 applies width: 50px to the element.

These classes makes size of the element as equal as the browser size.

Class name	Description
.w-fullscreen	width: 100vw
.h-fullscreen	height: 100vh

Padding & margin

Spacing

---

Give any padding or margin to your element, or even make gap between items.

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. It uses Bootstrap 4 spacing format of {property}{sides}-{size}. Available sizes can be any of:

• 4, 8, 12, 16, 20, 24
• 5, 10, 15, 20, 25, 30, 35, 40, 45, 50
• 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
• 120, 140, 160, 180, 200
• 100, 150, 200, 250, 300, 400, 500

Gap items

These classes apply to a parent and make a horizontal gap between all immediate children by giving them margin-left and margin-right property.

Class name	Gap size
.gap-items-1	4px
.gap-items-2	8px
.gap-items-3 or .gap-items	16px
.gap-items-4	24px
.gap-items-5	32px

---

Gap multiline items

These classes apply to a parent and make a horizontal and vertical gap between all immediate children by giving them margin property. These classes are meant to be use for parent that have a lot of children which break horizontal line and need space in vertical direction as well.

Class name	Gap size
.gap-multiline-items-1	4px
.gap-multiline-items-2	8px
.gap-multiline-items-3 or .gap-multiline-items	16px
.gap-multiline-items-4	24px
.gap-multiline-items-5	32px

Font & line

Typography

---

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

Apply .fs-{size} to any element, where {size} can be any of:

• 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
• 10, 20, 30, 40, 50, 60, 70, 80, 90
• 10, 15, 20, 25, 30, 35, 40, 45, 50
• 22, 24, 26, 28

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

Apply .lh-{size} to any element, where {size} can be any of:

• 0, 1, 2, 3, 4, 5
• 15, 25, 35, 45
• 11, 12, 13, 14, 15, 16, 17, 18, 19
• 22, 24, 26, 28

To better understanding of values, take a look at class definition of some of them:

• .lh-1 { line-height: 1; }
• .lh-15 { line-height: 1.5; }
• .lh-24 { line-height: 2.4; }

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

Background, text & border

Color

---

Change background color or text color of an element with a class.

.bg-* can apply to any element, where * is a color name.

---

.bg-pale-* can apply to any element, where * is a color name.

---

Some other fade colors are available for background-color.

.text-* can apply to any element, where * is a color name. Please note that you can safely add these classes to an <a> element.

.border-* can apply to any element, where * is a color name.

bg-img & overlay

Background image

---

Easily set a background image for a block, modify its behavior, position, and incluse overlays.

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.

Class name	Description
.bg-fixed	background-attachment: fixed
.bg-repeat	background-repeat: repeat
.bg-img-left	background-position: left center
.bg-img-right	background-position: right center

Add a alpha colored layer between your background-image and element text for better contrast.

Elements using a background image can be overlayed with a dark layer by adding the data attribute data-overlay="*", where * is a number between 1 and 9; 1 is lighter layer and 9 is darker layer.

You might also need to have a light overlay. For this purpose, user data-overlay-light="*" instead of data-overlay="*".

Size

Border

---

Add border to any side of an element. Easily change its size and color.

The classes follows b{side}-{size} format, where {size} is one of 0, 1, 2, or 3 values. Also, {side} is one of:

• t: Border top
• b: Border bottom
• l: Border left
• r: Border right
• x: Border left and right
• y: Border top and bottom
• null: All sides

Following table demonstrates available classes for 1px border.

Class name	Description
.bt-1	border-top: 1px solid ...
.bb-1	border-bottom: 1px solid ...
.bl-1	border-left: 1px solid ...
.br-1	border-right: 1px solid ...
.bx-1	border-left: 1px solid ... border-right: 1px solid ...
.by-1	border-top: 1px solid ... border-bottom: 1px solid ...
.b-1	border: 1px solid ...