CSS Utilities

Overview

Single-purpose styles typically mapped to a single CSS property and value (e.g. margin).

Utilities – also known as “trumps,” “helper classes,” or “alterations” – are high-specificity selectors for making very targeted alterations to existing elements or components.

They are most useful when you want to override a default value, in one-off situations, or even to explore design ideas; though be aware that they often use an !important flag in the CSS to ensure the desired alteration is achieved by superceding an element’s default style. This is very deliberate as utility classes are for final adjustments, and should not be overridden by anything that comes before them.

Most include Responsive options, enabling you to make targeted alterations at different screen sizes. e.g. “Small padding on small screens, larger padding on bigger screens.”

Usage

A simple example adjusting a component’s margins. Here’s the default rendering of a second-level header (h2). Note the amount of spacing above the text.

<h2>Second level heading</h2>

…let’s give it a small top margin…

<h2 class="fsa-m-t--s">Second level heading</h2>

…or perhaps remove the top margin, and increase its bottom margin…

<h2 class="fsa-m-t--none fsa-m-b--xl">Second level heading</h2>

…or even remove all of its margins…

<h2 class="fsa-m--none">Second level heading</h2>

Below are the complete set of CSS Utilities for overriding or extending an element’s or component’s visual properties, including Responsive scopes to adjust at targeted breakpoints.

Border Width

Selectively add or adjust border thickness.

Variants

All

<element class="fsa-border--[SIZE]">...</element>

Top

<element class="fsa-border-top--[SIZE]">...</element>

Right

<element class="fsa-border-right--[SIZE]">...</element>

Bottom

<element class="fsa-border-bottom--[SIZE]">...</element>

Left

<element class="fsa-border-left--[SIZE]">...</element>

Responsive

Selectively apply Border Width at any Media Query breakpoint.

<element class="fsa-border--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Border Radius

Selectively add or adjust rounded corners.

Variants

<element class="fsa-radius--[SIZE]">...</element>

Responsive

Selectively apply rounded corners at any Media Query breakpoint.

<element class="fsa-radius--[SIZE]@[BREAKPOINT]">...</element>

BREAKPOINT is one of s, m, l, or xl

Border Between

Selectively add or adjust borders between blocks of content.

Orientation

Vertical

<element class="fsa-border-between-vertical--[SIZE]">
  <el>1</el>
  <!-- border appears here -->
  <el>2</el>
  <!-- border appears here -->
  <el>3</el>
</element>

Horizontal

<element class="fsa-border-between-horizontal--[SIZE]">
  <el>1</el>
  <!-- border appears here -->
  <el>2</el>
  <!-- border appears here -->
  <el>3</el>
</element>

Size

Examples

Vertical, combined with Border Width

<div class="fsa-level fsa-level--grow-even fsa-level--align-stretch fsa-border-between-vertical--xxs fsa-border--xxs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal, combined with Border Width

<div class="fsa-border-between-horizontal--xxs fsa-border--xxs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive

Selectively apply at any Media Query breakpoint.

<element class="fsa-border-between-[ORIENTATION]--[SIZE]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Color: Border

Selectively add or adjust border colors.

<element class="fsa-border--[COLOR]">...</element>

Variants

Responsive

Selectively apply Border Colors at any Media Query breakpoint.

<element class="fsa-border--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Color: Border Between

Selectively add or adjust border colors between blocks of content.

Variants

Responsive

Selectively apply Border Between Color at any Media Query breakpoint.

<element class="fsa-border-between-[ORIENTATION]--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Color: Background

Selectively add or adjust background colors

<element class="fsa-bg--[COLOR]">...</element>

Variants

Responsive

Selectively apply Background Colors at any Media Query breakpoint.

<element class="fsa-bg[:hover]--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Color: Foreground

Selectively add or adjust foreground (text) colors

<element class="fsa-color--[COLOR]">...</element>

Variants

Responsive

Selectively apply Text Colors at any Media Query breakpoint.

<element class="fsa-color--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Color: Text Link

Selectively add or adjust text link colors

<a href="/link.html" class="fsa-link--[COLOR]">Text link</a>

Variants

Responsive

Selectively apply Link Colors at any Media Query breakpoint.

<element class="fsa-link[:hover]--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Ellipsis

Selectively truncate text overflow with an ellipsis.

Variants

<element class="fsa-ellipsis[--variant]">...</element>

Responsive

Set overflow of block-level elements to Ellipsis at select media query breakpoints.

<element fsa-ellipsis[--none]@[BREAKPOINT]>...</element>

Where BREAKPOINT is one of s, m, l, or xl

Floats

Selectively adjust floating behavior of elements or components.

Variants

<el class="fsa-float--[DIRECTION]">...</el>

Where [DIRECTION] is one of left, right, none.

Left

<el class="fsa-float--left">...</el>

Right

<el class="fsa-float--right">...</el>

None

Most likely used to override a component’s current float property.

<el class="fsa-float--none">...</el>

Containing Floats

aka “clearfix”

<el class="fsa-clearfix">...</el>

The above container has been cleared

Clearing Floats

<el class="fsa-clear">...</el>

Responsive

Adjust floating presentation per media query breakpoint.

Font

Selectively apply Typeface and Weight to text.

<el class="fsa-font--[VARIANT]">...</el>

Where VARIANT is one of sans (default), sans-light, fsa-font--sans-bold, or fsa-font--mono.

Sans

<div class="fsa-font--sans">Lorem ipsum dolor sit amet.</div>

Sans Light

<div class="fsa-font--sans-light">Lorem ipsum dolor sit amet.</div>

Sans Bold

<div class="fsa-font--sans-bold">Lorem ipsum dolor sit amet.</div>

Monospace

<div class="fsa-font--mono">Lorem ipsum dolor sit amet.</div>

Responsive

Selectively apply Font at any Media Query breakpoint.

<element class="fsa-font--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Lists

Link Color

Link Display

Selectively adjust display property of links.

<a class="fsa-link--[VARIANT]" href="/link.html">Text link</a>

Variants

Responsive

Selectively apply Link display properties at any Media Query breakpoint.

<element class="fsa-link--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Link Underline

Selectively add or remove underlines for Text Links.

<a class="fsa-link--[VARIANT]" href="/link.html">Text link</a>

Variants

Responsive

Selectively apply Link underlines at any Media Query breakpoint

<element class="fsa-link[:hover]--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Margins

Selectively manipulate margins around an element or component.

Spacing values pointedly subscribe to the Design System’s Sizes and Spaces.

<element class="fsa-m-[SIDE]--[SIZE]">...</element>

Where [SIDE] is one of t (top), r (right), b (bottom), l (left), or omitted (all 4 sides); and [SIZE] is one of none, xxs, xs, s, m, l, or xl.

Variants

All Sides

Responsive

Margins can be adjusted per media query breakpoint.

Padding

Selectively manipulate padding within an element or component.

Spacing values pointedly subscribe to the Design System’s Sizes and Spaces.

<element class="fsa-p-[SIDE]--[SIZE]">...</element>

Where [SIDE] is one of t (top), r (right), b (bottom), l (left), or omitted (all 4 sides); and [SIZE] is one of none, xxs, xs, s, m, l, or xl.

Variants

All Sides

Responsive

Screenreader only

Visibly hidden though announced by assistive technology (e.g. screenreaders) within a variety of screen size ranges (i.e. Media Query breakpoints).

This component must not be used to hide interactive content; for that, defer to Visibility Utility classes.

<element class="fsa-sr-only@[SIZE]">...</element>

Visibly hide when viewport is within a specific range, where [SIZE] is one of xs-only, s-only, m-only, l-only, or xl-only.

Shadows

Selectively apply Shadows to containing blocks.

Variants

<el class="fsa-shadow--[VARIANT]">...</el>

Where VARIATION is one of popout, overlay, raised, or none.

Popout

Overlay

Raised

None

Hover

<el class="fsa-shadow--:hover--[VARIANT]">...</el>

Where VARIATION is one of popout, overlay, raised, or none.

Popout

Overlay

Raised

None

Responsive

Selectively apply at any Media Query breakpoint.

<element class="fsa-shadow--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

Text Alignment

Selectively align blocks of content.

<el class="fsa-text-size--[DIRECTION]">...</el>

Where DIRECTION is one of left, center, or right

Variants

Right

<el class="fsa-text-align--right">...</el>

Centered

<el class="fsa-text-align--center">...</el>

Left

<el class="fsa-text-align--left">...</el>

Responsive

Adjust text alignment per media query breakpoint.

Text Size

Selectively adjust text size.

Text Size utility classes follow’s the system’s vertical rythym – Typography and Size and Space working in concert for a cohesive look and feel.

<element class="fsa-text-size--[SIZE]">...</element>

Where SIZE is one of 0 - 7. For reference, the base font size is equal to 3.

Variants

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Responsive

Text size can be adjusted per media query breakpoint.

<element class="fsa-text-size--[SIZE]@[BREAKPOINT]">...</element>

Where SIZE is one of 0 - 7, and BREAKPOINT is one of s, m, l, or xl

Text Headers

Selectively adjust header elements.

While h1 – h6 elements have a hierarchical style assigned, sometimes the heading level may vary depending on its context. These CSS Utilities below enable you to maintain the visual hierarchy independent from the structural, semantic HTML heading level.

<hN class="fsa-text--[SIZE]">...</hN>

Where SIZE is one of h1, h2, h3, h4, h5, or h6.

Variants

Each of the below examples demonstrate how the visual presentation of a second-level heading (<h2>) has been overridden.

Responsive

Adjust hn element text size per media query breakpoint.

Visibility

Selectively show or hide elements or blocks at a variety of screen sizes (i.e. Media Query breakpoints).

Show at minimum screen size

<element class="fsa-show@[SIZE]">...</element>

Show when at least [SIZE], where [SIZE] is one of s, m, l, or xl.

Show at only specific screen size

<element class="fsa-show@[SIZE]-only">...</element>

Show only at [SIZE], where [SIZE] is one of s, m, l, or xl.

Hide at minimum screen size

<element class="fsa-hide@[SIZE]">...</element>

Hide when at least [SIZE], where [SIZE] is one of s, m, or l.

Hide at specific screen size

<element class="fsa-hide@[SIZE]-only">...</element>

Hide only at [SIZE], where [SIZE] is one of xs, s, m, l, or xl.