Documentation ➜ Helpers
This is a collection of helpful classes to give you a hand during tricky situations.
Utility Classes
group class
➜ Includes the clearfix mixin.
hidden class
➜ Hides the element.
left, right classes
➜ Floats the element to the left or right.
radius class
➜ Applies a border radius to the element.
rounded class
➜ Applies enough border radius to make the ends rounded.
disabled class
➜ Disables the element. Also applies to the disabled attribute.
readonly attribute
➜ Applies read-only styles to the element.
antialiased class
➜ Applies font smoothing to help the readability of light text on a dark background.
visually-hidden class
➜ Hides content in an accessible way.
Color Classes
primary class
➜ Applies the primary color as a background to the element and assigns the text color to white. Also assigns the primary color to an hr element.
secondary class
➜ Applies the secondary color as a background to the element and assigns the text color to white. Also assigns the secondary color to an hr element.
tertiary class
➜ Applies the tertiary color as a background to the element and assigns the text color to white. Also assigns the tertiary color to an hr element.
info class
➜ Applies the info color as a background to the element and assigns the text color to white. Also assigns the info color to an hr element.
success class
➜ Applies the success color as a background to the element and assigns the text color to white. Also assigns the success color to an hr element.
warn class
➜ Applies the warn color as a background to the element and assigns the text color to white. Also assigns the warn color to an hr element.
alert class
➜ Applies the alert color as a background to the element and assigns the text color to white. Also assigns the alert color to an hr element.
gray class
➜ Applies the gray color as a background to the element and assigns the text color to white. Also assigns the gray color to an hr element.
primary-text class
➜ Applies the primary color as the element's text color.
secondary-text class
➜ Applies the secondary color as the element's text color.
tertiary-text class
➜ Applies the tertiary color as the element's text color.
info-text class
➜ Applies the info color as the element's text color.
success-text class
➜ Applies the success color as the element's text color.
warn-text class
➜ Applies the warn color as the element's text color.
alert-text class
➜ Applies the alert color as the element's text color.
gray-text class
➜ Applies the gray color as the element's text color.