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.