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

Class name | CSS code
--- | ---
`.w-auto` | width: auto;
`.h-auto` | height: auto;
`.w-fullscreen` | width: 100vw;
`.h-fullscreen` | height: 100vh;
`.mw-fullscreen` | min-width: 100vw;
`.mh-fullscreen` | min-height: 100vh;

## 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-x-2`
`gap-x`
`gap-x-4`

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

`font-size-9`
font-size: 9px;
`font-size-12`
font-size: 12px;
`font-size-16`
font-size: 16px;
`font-size-20`
font-size: 20px;

###### Lead

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

`lead-1`
Lead font size - 1
`lead-3`
Lead font size - 3
`lead-5`
Lead font size - 5
`lead-6`
Lead font size - 6

###### Small

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

`small-1`
Small font size - 1
`small-3`
Small font size - 3
`small-5`
Small font size - 5
`small-6`
Small font size - 6

#### 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`.

Oswald:700
Macondo:400
Roboto+Slab:100

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

`font-weight-300`
font-weight: 300;
`font-weight-400`
font-weight: 400;
`font-weight-600`
font-weight: 600;
`font-weight-700`
font-weight: 700;

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

rounded
rounded-md
rounded-lg
rounded-xl

## Background image

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

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
`.bg-img-top` | background-position: center top
`.bg-img-bottom` | background-position: center bottom

## Opacity

Change the opacity of an element with a single class.

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

opacity-15
opacity-40
opacity-65
opacity-80

## Shadow

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

`shadow-1`
`shadow-2`
`shadow-3`
`shadow-4`
`shadow-5`
`shadow-6`
`shadow-7`
`shadow-8`
`shadow-9`

###### Hover shadow

`hover-shadow-1`
`hover-shadow-2`
`hover-shadow-3`
`hover-shadow-4`
`hover-shadow-5`
`hover-shadow-6`
`hover-shadow-7`
`hover-shadow-8`
`hover-shadow-9`