Surfaces

This modules includes utility classes that refer to heavily visually style components. These utilities add background colors, text colors, border radius modifications and box shadows. All background color and colors listed in Settings are available.

Layout

Layout has utilities for max-width/width, floats, clearfix, and display.

Fit

Object Fit utilities for cover, contain and position.

Cover / Center Top

Cover / Center Bottom

Cover / Center Center

Contain

Fill

Positioning

Position includes utilities for position, overflow and z-index.

/*
  Positioning Utilities

  Z-Index..........Small collection of common z-index values
  Overflow.........General, X and Y
  Position.........Absolute, Static, Fixed, Relative
*/

/*----------Z-Index Utilities----------*/

.u-z-n1 { z-index: -1; }
.u-z0 { z-index: 0; }
.u-z1 { z-index: 1; }
.u-z2 { z-index: 2; }
.u-z3 { z-index: 3; }
.u-z4 { z-index: 4; }
.u-z5 { z-index: 5; }
.u-z6 { z-index: 6; }
.u-z7 { z-index: 7; }
.u-z8 { z-index: 8; }
.u-z9 { z-index: 9; }
.u-zX { z-index: 10; }

.u-z--n { z-index: -1; }
.u-z--b { z-index: 0; }
.u-z--m { z-index: 500; }
.u-z--t { z-index: 999; }


/*----------Overflow Utilities----------*/

.u-ov--none { overflow: none; }
.u-ov--vis { overflow: visible; }
.u-ov--hid { overflow: hidden; }
.u-ov--sc { overflow: scroll; }

.u-ovx--none { overflow-x: none; }
.u-ovx--vis { overflow-x: visible; }
.u-ovx--hid { overflow-x: hidden; }
.u-ovx--sc { overflow-x: scroll; }

.u-ovy--none { overflow-y: none; }
.u-ovy--vis { overflow-y: visible; }
.u-ovy--hid { overflow-y: hidden; }
.u-ovy--sc { overflow-y: scroll; }


/*----------Position Utilities----------*/

.u-absolute { position: absolute; }
.u-fixed { position: fixed; }
.u-static { position: static; }
.u-relative { position: relative; }

.u-tblr {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Spacing

This module contains utilities for responsive margin and padding. This is an adapted from Basscss. (This example is best viewed on desktop to see the real effects of the spacing in context)

Typography

Utilities for text-alignment, font weights, line-height, letter-spacing, rendering, text columns and text-transform.