Core · Helpers
Utility classes
Small u-* classes that do one thing each, for the cases a component does not cover.
Files: utilities/_utilities.css
Use a utility for a one-off adjustment. If you add the same utilities to the same element again and again, you need a component or a class of your own.
- Utilities win over components: they come last in the cascade.
.u-sr-onlyhides text from the screen but not from screen readers..u-hiddenhides it from both..u-no-eventsonly stops the pointer: a keyboard can still reach and use the element. Never use it to disable a control.
All 16 utility classes
| Class | Effect | Example |
|---|---|---|
.u-hidden | Removes the element from the page | Hidden(nothing renders) |
.u-sr-only | Visible to screen readers only | Read by screen readers(screen readers only) |
.u-text-mono | Monospace font | 0123 abc |
.u-text-primary | Primary text color | Primary text |
.u-text-muted | Secondary text color | Muted text |
.u-truncate | One line, ellipsis on overflow | A long line that gets cut |
.u-flex | Flex container | ab |
.u-flex-center | Flex, centered on both axes | a |
.u-flex-between | Flex, items pushed to the ends | ab |
.u-flex-1 | Takes the remaining space | aflex 1 |
.u-mb-0 .u-mb-sm .u-mb-md .u-mb-lg | Bottom margin: 0, 8px, 16px, 32px | 0smmdlg |
.u-select-all | One click selects the whole text | click-selects-all |
.u-no-events | Ignores pointer events |