CSS Utilities

Layout

These are single responsibility classes designed to help reduce duplication in our SCSS.

Clearfix

Make an element expand to contain floated children. Uses pseudo-elements (micro clearfix).

.u-cf

New Block Formatting Content

This affords some useful properties to the element. It won't wrap under floats. Will also contain any floated children. N.B. This will clip overflow. Use the alternative method below if this is problematic.

.u-nbfc

New Block Formatting Content (Alternative)

Alternative method when overflow must not be clipped.

.u-nbfcAlt

Float Left

.u-floatLeft

Float Right

.u-floatRight

Float None

.u-floatNone

Full Height

.u-fullHeight

Full Width

.u-fullWidth

Center Align Content

.u-center
.u-centered

Center Block Level Content

Uses .u-textCenter, .u-fullWidth, and .u-center to fully center a block of content.

.u-centerBlock
Menu