Skip to main content

CSS utility selectors

Utility selectors are CSS classes that use a single CSS rule or apply a very simple UI pattern. Designed to have a single responsibility and are intended to be as reusable as possible. In most cases the selector should be applied in a container div element.

Floats and clears

Use a float to specify that an element should be taken from the normal flow and placed along the left or right side of its container. In may cases a float will need to be used in conjunction with a clearfix as illustrated.

<div class="x-clearfix">
  <div class="x-float-left"> ...</div>
  <div class="x-float-right"> ...</div>
</div>
        

Offset content

The offset content utility selector can be used to align blocks of content or components to the content grid. Offset is on both left and right sides. The degree of offset is based on the viewport size.

<div data-grid="col-12 pad-6x" class="x-offset-content"> ...</div>

Display type helpers

Use as optional layout and display type properties.

<div class="x-hidden">Hidden from view</div>
<div class="x-visible-block">Block element</div>
<div class="x-visible-inline-block">Inline-block element</div>
<div class="x-visible-inline">Inline element</div>

Vertical spacing

If vertical spacing is excessive above a module or component, in some cases you can apply the f-lean class to reduce the top spacing.

<ul class="c-list f-lean">
    <li>List item with reduced vertical spacing</li>
    <li>List item with reduced vertical spacing</li>
</ul>

f-lean is known to work with the following classes:

  • c-heading-1
  • c-heading-2
  • c-heading-3
  • c-heading-4
  • c-heading-5
  • c-heading-6
  • c-list
  • c-paragraph
  • c-universal-header
  • m-image
  • m-highlight-feature
  • m-track-list

Breakpoint support

Breakpoint/viewport support for optional layout and display type properties. Supported viewports are:
vp1 (320px), vp2 (540px), vp3 (768px), vp4 (1084px) and vp5 (1400px)

Examples in code:

<div class="x-hidden-vp1">
  Hidden from any view with a max-width of 320px
</div>

<div class="x-visible-vp1-block">
  Block element; max-width of 320px
</div>

<div class="x-visible-vp1-inline-block">
  Inline-block element; max-width of 320px
</div>

<div class="x-visible-vp1-inline">
  Inline; max-width of 320px
</div>

Typography

Within a HTML block, use these utility selectors to position copy along a horizontal axes.

<div class="x-type-center">
  This text will be centered.
</div>

<div class="x-type-left">
  This text will be left justified.
</div>

<div class="x-type-right">
  This text will be right justified.
</div>

Accessibility (a11y)

If a content block is only intended to be seen by screen readers for a11y reasons and is not needed for presentation, using the x-screen-reader utility selector will remove this content from the view.

<div class="x-screen-reader">
  This text will only be viewable by a screen reader.
</div>