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.