General Utility Classes

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