Components

## Spacing Utility

A wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. Mostly use for cards, buttons, or any other element.

#### Size Reference

This will guide you how much space used in `{size}`

Reference | Value | Details
--- | --- | ---
`{size}` | 0 1 2 3 4 5 gs | `0rem` as `0px` `0.375rem` as `6px` `0.75rem` as `12px` `1.0rem` as `16px` `1.5rem` as `24px` `2.75rem` as `44px` `28px` as `gutter` size
Note: Base font size is 16px and 1rem equal to 16px

#### Set Margin

These utility classes allow to set margin to an element.

mr-gs
mr-5
mr-4
mr-3
mr-2
mr-1

Class Reference | Size | Note
--- | --- | ---
`.m-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply margin around to the element
`.ml-{size}` `.mr-{size}` `.mt-{size}` `.mb-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply margin on specific side of the element
`.m-{screen}-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Use `{screen}` as `sm | md | lg | xl`
`.ml-{screen}-{size}` `.mr-{screen}-{size}` `.mt-{screen}-{size}` `.mb-{screen}-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Same as above
`{screen}` related with breakpoint and apply from the `{screen}` you have use. For example, `.m-sm-2` sets margin on `sm` screen and continue to above screens.

Uses Example

    <div class="m-2"> ... </div>
    <div class="m-lg-2"> ... </div>
    <div class="ml-lg-3 ml-sm-2"> ... </div>

#### Set Padding

These utility classes allow to set inside padding to an element.

p-1
p-2
p-3
p-4
p-5
p-gs

Class Reference | Size | Note
--- | --- | ---
`.p-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply padding around to the element
`.pl-{size}` `.pr-{size}` `.pt-{size}` `.pb-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Apply padding on specific side of the element
`.p-{screen}-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Use `{screen}` as `sm, md, lg, xl`
`.pl-{screen}-{size}` `.pr-{screen}-{size}` `.pt-{screen}-{size}` `.pb-{screen}-{size}` | 0 | 1 | 2 | 3 | 4 | 5 | gs | auto | Same as above
`{screen}` related with breakpoint and will apply from the `{screen}` to above. For example, `.m-sm-2` sets padding on `sm` screen and continue to above screens.

Uses Example

    <div class="p-2"> ... </div>
    <div class="p-lg-2"> ... </div>
    <div class="p-lg-3 p-sm-2"> ... </div>

#### Gaps Classes

The gap classes allow to set specific gap between to section or block.

Class Reference | Value |
--- | --- | ---
`.gap` | `28px` as `gutter` size |
`.gap-sm` | `0.75rem` as `12px` |
`.gap-md` | `1.25rem` as `20px` |
`.gap-lg` | `2rem` as `32px` |
`.gap-xl` | `2.5rem` as `40px` |
`.gap-{num}px` | `[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]` use as `{num}` value | Fixed in pixel
`.gap-{size}` | `[0, 1, 2, 3, 4, 5]` as `{size}` value | `{size}` is related to Size reference.

Uses Example

    <div class="gap"></div>
    <div class="gap gap-sm"></div>
    <div class="gap gap-20px"></div>