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. |