utilities
Spacing

Add spacing to an element with margin (m), padding (p) and offset (o) utilities.

Pattern: <prefix><location>-<size>@<breakpoint>

  • Prefixes:
  • m margin
  • p padding
  • o offset
  • Locations:
  • t top
  • r right
  • b bottom
  • l left
  • x left & right
  • y top & bottom
  • a all
  • Sizes:
  • 1 through 20
  • Add h for half values. Examples:
  • 0h 0.5 rem
  • 3h 3.5 rem
  • 12h 12.5 rem
  • Breakpoints:
  • xs
  • sm
  • md
  • lg
  • xl
  • xx

Example a: mx-2@md (margin left & right 2rem at the medium breakpoint)

Example b: mt-14h@lg (margin top 14.5rem at the large breakpoint)

Positioning

Flexbox Vertical Positioning

Set vertical positioning on flexbox elements.

  • +equal sets element to height of heighest sibling
  • +middle vertically align children to the middle
  • +bottom vertically align children to the bottom

Responsive Floats

Set floats by breakpoint.

  • f--l@md Left: float left at medium breakpoint
  • f--r@md Right: float right at medium breakpoint
  • f--n@md None: kill all floats at medium breakpoint

Responsive Flexbox Ordering

Responsively set display order of responsive elements.

  • (default order is defined by markup)
  • order--1@md overrides element's display order to appear first at the medium breakpoint
  • order--2@md overrides element's display order to appear second at the medium breakpoint
  • etc

Sticky

Set an element to be sticky

  • pos--sticky

See Grid page for visual examples.

Typography

Font Sizes

Override a text element's size with the font-size (fs) utility:

  • fs-xs extra small
  • fs-sm small
  • fs-root root size
  • fs-d1–fs-d7 one through seven scale degrees above root

Font Families

Override a font family style with font-family (ff) utility:

  • ff-sans sans (default): Sans serif
  • ff-slab slab: Slab
  • ff-serif serif: Serif
  • ff-mono mono: Monospace

Font Styles and Weights

Override a text's font style (fs) and/or weight (fw):

  • fs-lead applies the “lead“ class
  • fw-100–fw-900 sets font weight to 100 through 900

List Styles

Specify a list style with these...

  • ls--none makes an unstyled list
  • ls--inline makes an inline list
  • ls--default resets a nested list to bullets when parent list styled is overridden

Text Alignment

Override a text element's alignment

  • ta-l align left
  • ta-r align right
  • ta-c align center

Optionally add a breakpoint:

  • Example: ta-l@md align left at medium screen sizes
  • Example: ta-r@lg align right at large screen sizes

See Typography page for more examples.

Color, Images, Shadows