Components

## Sizing Utility

Easily make an element as wide or as tall with our width and height utilities.

#### Set a Width

These utility classes allow to set width of an element instantly.

25%
50%
75%
100%

Percent Width | Value
--- | ---
`.w-{value}` | 15 | 20 | 25 | 30 | ... | 85 | 90 | 95 | 100 (step of 5)

Use-case Width | Value
--- | ---
`.wide-{value}` | xs | sm | md | lg | xl
These classes mostly used with `.container` to specific width on any larger screens.

Specific Width | Value
--- | ---
`.w-{value}` | 80px | 90px | 100px | 110px | 120px | 125px | 130px | 140px | 150px | 175px | 200px | 220px | 225px | 250px | 300px | 350px | 400px | 550px
`.w-max-{value}` | Same as above
`.w-min-{value}` | Same as above

Full Width | Value |
--- | --- | ---
`.w-{value}` | auto | 100 | `auto` use for reset
`.w-max-{value}` | auto | 100 | `auto` use for reset
`.w-min-{value}` | auto | 100 | `auto` use for reset
`.mw-100` |  | Same as `.w-max-100`

Uses Example

    <div class="w-25"> ... </div>
    <div class="w-max-250px"> ... </div>
    <div class="w-min-100px"> ... </div>

#### Set a Height

These utility classes allow to set width of an element instantly.

25%
50%
75%
100%

Percent Height | Value
--- | ---
`.h-{value}` | 25 | 50 | 75 | 100 | auto
`.mh-100` | Set max height 100%

Specific Height | Value
--- | ---
`.h-{value}` | 100px | 150px | 175px | 200px | 225px | 250px | 275px | 300px | 325px | 350px | 375px | 400px | 425px | 450px | 475px | 500px
`.h-max-{value}` | Same as above
`.h-min-{value}` | Same as above

Uses Example

    <div class="h-25"> ... </div>
    <div class="h-250px"> ... </div>
    <div class="h-min-325px"> ... </div>

#### Relative to the viewport

You can also use utilities to set the width and height relative to the viewport.

Class Reference | Details
--- | ---
`.vh-100` | Height set 100vh
`.vw-100` | Width set 100vw
`.min-vh-100` | Height set min 100vh
`.min-vw-100` | Width set min 100vw

Uses Example

    <div class="vh-100"> ... </div>