600 West

Utilities

Usage

Utility classes allow us to rapidly create and iterate on web designs. They offer an increased flexibility over components while adhering to brand standards.

A few ground rules:

  • Do: Use utility classes to override component or element default styles.
  • Do: Use utility classes to create new components when appropriate ones don’t exist.
  • Do: Create new component classes or component modifiers when patterns emerge.

Naming Utility Classes

Naming things is hard. In an attempt to be more consistent than Tachyons, we use the following formula and rules when constructing class names:

.[<property-name>][<direction>][<scale>][-<keyword>|-<value>][--<modifier>][-<breakpoint-name>]

Or if you’re making a interactive component for hover or focus:

.[<verb-that-describes-the-interaction>][<scale>][-<keyword>|-<value>][--<modifier>][-<breakpoint-name>]

Property Name

  • The property corresponds to a short or longhand version of the CSS property name
  • If a CSS property keyword is specific enough to the property, the property name may be omitted (e.g. .cover, .uppercase)
  • An abbreviated property name may be used where it will clearly not conflict with another commonly used property (e.g. .mw50p)

Direction

  • Where direction is supported by a property, the following abbreviations are used: 
      a: all  
  t: top  
  r: right  
  b: bottom  
  l: left  
  n: none
  • Direction modifiers are never preceeded by a hyphen

Scale

  • Values range from 100–1000
  • Supported values depend on utility
  • Negatives (where allowed) are preceded by a hypen (e.g. .top-100)
  • Scale values are not preceded by a hyphen unless they are negative

Keyword or Value

  • Where a CSS property keyword or literal value is used as a modifier, it is preceded by a hyphen (e.g. .mt-auto, .h-50vh)

Modifier

  • If a modifier is not a scale value, keyword, or literal value, then it is preceded by two hyphens (e.g. .bg--background-dark)

Breakpoint Name

  • Where responsive utilities make sense, classes have an optional breakpoint suffix for medium, large, and “not small” viewports:
    .mt500-l
.p600-ns
.mt500-l
.justify-center-m