Align Text Left

%u-textLeft

Align Text Center

%u-textCenter

Align Text Right

%u-textRight

Vertical Align Baseline

%u-alignBaseline

Vertical Align Top

%u-alignTop

Vertical Align Middle

%u-alignMiddle

Vertical Align Bottom

%u-alignBottom

Display Block

%u-block

Display Inline

%u-inline

Display Inline Block

%u-inlineBlock

Display None

Items should be set to display: none; with caution. This removes content entirely and should only be used if the content is being presented somewhere else or is not needed for the user. %u-hiddenVisually is preferred

%u-hidden

Visually Hidden

Completely remove from the flow but leave available to screen readers.

%u-hiddenVisually

Display Table

%u-table

Display Table Cell

%u-tableCell

Display Table Row

%u-tableRow

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

Link Clean

A link without any text-decoration at all.

%u-linkClean

Link Block

Combination of traits commonly used in vertical navigation lists.

%u-linkBlock

Position Absolute

%u-posAbsolute

Position Relative

%u-posRelative

Position Static

%u-posStatic

Position Fixed

%u-posFixed

Position Absolute Center

Pins to all corners by default. But when a width and/or height are provided, the element will be centered in its nearest relatively-positioned ancestor.

%u-posAbsoluteCenter

Margins

%m  { margin:        $base-margin !important; }
%mt { margin-top:    $base-margin !important; }
%mr { margin-right:  $base-margin !important; }
%mb { margin-bottom: $base-margin !important; }
%ml { margin-left:   $base-margin !important; }
%me { margin-top:    $base-margin !important; margin-bottom: $base-margin !important; }
%ms { margin-right:  $base-margin !important; margin-left:   $base-margin !important; }

Margins Tiny

%m--  { margin:        quarter($base-margin) !important; }
%mt-- { margin-top:    quarter($base-margin) !important; }
%mr-- { margin-right:  quarter($base-margin) !important; }
%mb-- { margin-bottom: quarter($base-margin) !important; }
%ml-- { margin-left:   quarter($base-margin) !important; }
%ms-- { margin-top:    quarter($base-margin) !important; margin-bottom: quarter($base-margin) !important; }
%me-- { margin-right:  quarter($base-margin) !important; margin-left:   quarter($base-margin) !important; }

Margins Small

%m-  { margin:        half($base-margin) !important; }
%mt- { margin-top:    half($base-margin) !important; }
%mr- { margin-right:  half($base-margin) !important; }
%mb- { margin-bottom: half($base-margin) !important; }
%ml- { margin-left:   half($base-margin) !important; }
%me- { margin-top:    half($base-margin) !important; margin-bottom: half($base-margin) !important; }
%ms- { margin-right:  half($base-margin) !important; margin-left:   half($base-margin) !important; }

Margins Large

%m_x  { margin:        double($base-margin) !important;  }
%mt_x { margin-top:    double($base-margin) !important;  }
%mr_x { margin-right:  double($base-margin) !important;  }
%mb_x { margin-bottom: double($base-margin) !important;  }
%ml_x { margin-left:   double($base-margin) !important;  }
%me_x { margin-top:    double($base-margin) !important; margin-bottom:  double($base-margin) !important; }
%ms_x { margin-right:  double($base-margin) !important; margin-left:    double($base-margin) !important; }

Margins Huge

%m_xx  { margin:        quadruple($base-margin) !important;  }
%mt_xx { margin-top:    quadruple($base-margin) !important;  }
%mr_xx { margin-right:  quadruple($base-margin) !important;  }
%mb_xx { margin-bottom: quadruple($base-margin) !important;  }
%ml_xx { margin-left:   quadruple($base-margin) !important;  }
%ms_xx { margin-top:    quadruple($base-margin) !important; margin-bottom: quadruple($base-margin) !important; }
%me_xx { margin-right:  quadruple($base-margin) !important; margin-left:   quadruple($base-margin) !important; }

Margins None

%m0  { margin:        0 !important; }
%mt0 { margin-top:    0 !important; }
%mr0 { margin-right:  0 !important; }
%mb0 { margin-bottom: 0 !important; }
%ml0 { margin-left:   0 !important; }
%me0 { margin-top:    0 !important; margin-bottom: 0 !important; }
%ms0 { margin-right:  0 !important; margin-left:   0 !important; }

Paddings

%p  { padding:        $base-padding !important; }
%pt { padding-top:    $base-padding !important; }
%pr { padding-right:  $base-padding !important; }
%pb { padding-bottom: $base-padding !important; }
%pl { padding-left:   $base-padding !important; }
%pe { padding-top:    $base-padding !important; padding-bottom: $base-padding !important; }
%ps { padding-right:  $base-padding !important; padding-left:   $base-padding !important; }

Paddings Tiny

%p--  { padding:        quarter($base-padding) !important; }
%pt-- { padding-top:    quarter($base-padding) !important; }
%pr-- { padding-right:  quarter($base-padding) !important; }
%pb-- { padding-bottom: quarter($base-padding) !important; }
%pl-- { padding-left:   quarter($base-padding) !important; }
%pe-- { padding-top:    quarter($base-padding) !important; padding-bottom: quarter($base-padding) !important; }
%ps-- { padding-right:  quarter($base-padding) !important; padding-left:   quarter($base-padding) !important; }

Paddings Small

%p-  { padding:        half($base-padding) !important; }
%pt- { padding-top:    half($base-padding) !important; }
%pr- { padding-right:  half($base-padding) !important; }
%pb- { padding-bottom: half($base-padding) !important; }
%pl- { padding-left:   half($base-padding) !important; }
%pe- { padding-top:    half($base-padding) !important; padding-bottom: half($base-padding) !important; }
%ps- { padding-right:  half($base-padding) !important; padding-left:   half($base-padding) !important; }

Paddings Large

%p_x  { padding:        double($base-padding) !important; }
%pt_x { padding-top:    double($base-padding) !important; }
%pr_x { padding-right:  double($base-padding) !important; }
%pb_x { padding-bottom: double($base-padding) !important; }
%pl_x { padding-left:   double($base-padding) !important; }
%pe_x { padding-top:    double($base-padding) !important; padding-bottom: double($base-padding) !important; }
%ps_x { padding-right:  double($base-padding) !important; padding-left:   double($base-padding) !important; }

Paddings Huge

%p_xx  { padding:        quadruple($base-padding) !important; }
%pt_xx { padding-top:    quadruple($base-padding) !important; }
%pr_xx { padding-right:  quadruple($base-padding) !important; }
%pb_xx { padding-bottom: quadruple($base-padding) !important; }
%pl_xx { padding-left:   quadruple($base-padding) !important; }
%pe_xx { padding-top:    quadruple($base-padding) !important; padding-bottom: quadruple($base-padding) !important; }
%ps_xx { padding-right:  quadruple($base-padding) !important; padding-left:   quadruple($base-padding) !important; }

Paddings None

%p0  { padding:        0 !important; }
%pt0 { padding-top:    0 !important; }
%pr0 { padding-right:  0 !important; }
%pb0 { padding-bottom: 0 !important; }
%pl0 { padding-left:   0 !important; }
%pe0 { padding-top:    0 !important; padding-bottom: 0 !important; }
%ps0 { padding-right:  0 !important; padding-left:   0 !important; }

Word breaking

Break strings when their length exceeds the width of their container.

%u-textBreak

Inherit Color

%u-textInheritColor

Font Kerning

%u-textKern

Prevent Whitespace Wrapping

%u-textNoWrap

Truncate Text

%u-textTruncate

Small Text

%u-textSize-small

Capital Case Element

%u-posAbsolute