Utility Classes
A lot of times, when you want a different version of somthing, adding a new modifier is the way to go.
But sometimes a modifier is too specific, or the situation very particular.
In those situations a utility class can come to the rescue.
Visibility
| CSS Selector |
Description |
u-hidden |
Hide an element. Use state-hidden if you are toggling visibility. |
u-print-hidden |
Hide when printing on paper |
u-print-only |
Show only when printing on paper |
u-sr-hidden |
Hide for screen readers |
u-sr-only |
Show only for screen readers |
Positioning
| Selector |
Description |
u-clearfix
|
Clearfix |
u-pull-start /
u-pull-left
|
Float the element to the left (for LTR languages) |
u-pull-end /
u-pull-right
|
Float the element to the right (for LTR languages) |
u-align-self-center
|
Center-align a flex item |
Text
| CSS Selector |
Description |
u-monospace |
Shows text in monospace font |
u-nowrap |
Prevent line wrapping |
u-break-all |
Break all words |
u-text-align-start /
u-text-align-left
|
Align text to the left (for LTR languages) |
u-text-align-end /
u-text-align-right
|
Align text to the right (for LTR languages) |
u-text-align-center |
Align text to the center |
u-text-success |
Use "success" color for text |
u-text-warning |
Use "warning" color for text |
u-text-danger |
Use "danger" color for text |
u-text-info |
Use "info" color for text |
u-text-brand |
Use "brand" color for text |
u-text-neutral |
Use "neutral" color for text |
u-unstyled-list |
- A list with...
- no bullets and...
- no padding
|
Margins
| CSS Selector |
Description |
u-no-margin,
u-no-margin-top,
u-no-margin-right,
u-no-margin-bottom,
u-no-margin-left
|
Remove margins around the element |
u-margin,
u-margin-top,
u-margin-right,
u-margin-bottom,
u-margin-left
|
Add margins around all sides or one side of the element. |
u-margin-narrow,
u-margin-narrow-top,
u-margin-narrow-right,
u-margin-narrow-bottom,
u-margin-narrow-left
|
Add narrow margins around all sides or one side of the element. |
u-margin-wide,
u-margin-wide-top,
u-margin-wide-right,
u-margin-wide-bottom,
u-margin-wide-left
|
Add wide margins around all sides or one side of the element. |
u-negative-margin,
u-negative-margin-top,
u-negative-margin-right,
u-negative-margin-bottom,
u-negative-margin-left
|
Add negative margins around all sides or one side of the element. |
u-negative-margin-narrow,
u-negative-margin-narrow-top,
u-negative-margin-narrow-right,
u-negative-margin-narrow-bottom,
u-negative-margin-narrow-left
|
Add narrow negative margins around all sides or one side of the element. |
u-negative-margin-wide,
u-negative-margin-wide-top,
u-negative-margin-wide-right,
u-negative-margin-wide-bottom,
u-negative-margin-wide-left
|
Add wide negative margins around all sides or one side of the element. |
Others
| CSS Selector |
Description |
u-superadmin |
Superadmin elements |
u-readable-line-length |
Max length for a line to make it readable. Ex: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam facilisis congue tortor, quis cursus tortor. Vestibulum maximus sapien id ligula porttitor bibendum.
Curabitur elementum mauris eu dui semper, tincidunt fermentum erat pretium. Praesent faucibus rutrum ante
sit amet iaculis. Vivamus dui dolor, viverra faucibus libero tempus, egestas sollicitudin enim. Etiam
sit amet volutpat justo, sed consequat nibh. Nulla tempus nulla id erat lobortis dictum. Integer ac
felis aliquam neque tincidunt bibendum.
|
u-max-width-100 |
Sets a max width of 100%, useful to make images and similar responsive.
|