Miscellaneous Helpers

Beard comes with a small helping of odds and ends to make your life easier.

Class / Placeholder Purpose
.center %center Center an element using auto margin.
.default-hover %default-hover Lower the opacity for an element on its hover state
.default-active %default-active Lower the opacity for an element on its active state
.dim %dim Apply a combination of .default-hover and .default-active
.site-width %site-width Set the element's max-width to the global $side-width.
.lowercase Transform the text to lowercase
.uppercase Transform the text to uppercase
.ell Add an ellipsis when text gets longer than its container
.imax Allow an image to scale to 100% of its containing element's size
.i100 Set an image's width to 100%
.bgcover Set an element's background-size to fill up its container proportionally
.bgcenter Center an element's background
.vam Vertically align a td element's content to the middle
.clearfix %clearfix Apply a classic clearfix to a containing element.
.hidetext %hidetext Hide text from the viewer, but leave it for search engines and screen readers.