Theme utilities
Utility CSS classes and how to use them
Vulk comes with some built-in utilities to help you code without writing unecessary CSS. Some utilities have accepted values that are also listed here. You'll find additional useful utilities by digging into the template code.
| Category | Class | Description | Accepted values |
|---|---|---|---|
| state | is-hidden | applies display none to target element | - |
| state | is-disabled | disables the target element | - |
| borders | has-border | gives a border to target element | - |
| borders | is-circle | gives a border-radius of 50% to target element | - |
| borders | is-rounded-md | gives a border-radius of .625rem to target element | - |
| borders | is-rounded-lg | gives a border-radius of .825rem to target element | - |
| shadows | is-disabled | gives a light shadow to the target element | - |
| height | height-full | applies height: 100% target element | - |
| height | height-screen | applies height: 100vh target element | - |
| width | w-* | applies a specific width to target element | full, 1/5, 1/4, 1/3, 1/2 |
| width | max-w-* | applies a specific max-width to target element | full, 1/5, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8, 9 |
| width | max-w-mobile | sets target element width to 100% on mobile devices | - |
| margin | no-m | sets target element margin to 0 | - |
| margin | mx-auto | sets target element left and right margin to auto | - |
| margin | m-* | applies a specific margin to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| margin | mx-* | applies a specific horizontal margin to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| margin | my-* | applies a specific vertical margin to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| margin | ml-* | applies a specific left margin to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| margin | mr-* | applies a specific right margin to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| margin | mt-* | applies a specific top margin to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| margin | mb-* | applies a specific bottom margin to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| padding | p-* | applies a specific padding to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| padding | px-* | applies a specific horizontal padding to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| padding | py-* | applies a specific vertical padding to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| padding | pl-* | applies a specific left padding to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| margin | pr-* | applies a specific right padding to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| padding | pt-* | applies a specific top padding to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| padding | pb-* | applies a specific bottom padding to target element | px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 |
| opacity | opacity-* | applies a specific opacity to target element | 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 |
| color | text-* | applies a specific color to target element | white, primary, secondary, success, info, warning, danger, orange, blue, yellow, purple, green, light |
| background-color | bg-* | applies a specific background color to target element | white, primary, secondary, success, info, warning, danger, orange, blue, yellow, purple, green, light |
| 1:1 ratio size | size-* | applies a specific 1:1 ratio pixel size to target element | 24x24, 28x28, 32x32, 36x36, 40x40, 44x44, 48x48, 52x52, 56x56, 60x60, 70x70, 80x80, 90x90, 100x100, 110x110, 120x120, 130x130, 140x140, 150x150, 175x175, 200x200 |
| overflow | overflow-hidden | sets target element overflow to hidden | - |
| overflow | overflow-x-auto | sets target element overflow-x to auto | - |
| overflow | overflow-y-auto | sets target element overflow-y to auto | - |
| z-index | z-* | sets target element z-index to specified value | 0, 1, 2, 3 |
| font-size | rem-* | sets target element font size to specified rem value | 50, 60, 70, 75, 80, 85, 90, 95, 100, 115, 125, 150, 175, 200 |
| font-weight | weight-* | sets target element font weight to specified value | 3, 4, 5, 6, 7 |