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.