General Utility Classes
These are single responsibility classes designed to help reduce duplication in our Sass.
Clear floats.
.clearfix
Hide using display: none.
.is-hidden
Hide using clip and make the element visible to Screen Readers.
.accessibility
Hide using opacity (modern browsers only).
.is-faded-out
Split long words over multiple lines. Useful for hyperlinks.
.break-text
Position an element left - eg. the primary nav.
.split--left
Position an element right
Requires a .split--right__inner class on any children.
This technique is used on the primary nav for the user features and search.
.split--right
Create an inline nav - eg. the primary nav.
.nav--inline, .wv--nav--inline
Create a stacked nav - eg. the footer nav.
.nav--stacked
Vertically center content.
Use this class on the container and __inner on the element to be centered.
.vertically-centered
Replace an input with an image or pseudo element.
This will degrade gracefully for browsers that don't support pseudo elements.
.hidden-input
Float an image left.
.img--left
Float an image right.
.img--right
Force an image to fill its container.
.img--fill
Apply default user avatar style - 50px & round.
.user-avatar