6 utility Utility

Utility components are specialized components that are often used to easily fix complex CSS problems.

Source: styles.scss, line 133

6.1 utility.clearfix Clearfix

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Allows the bottom of an element to extend to the bottom of all floated child elements. See http://nicolasgallagher.com/micro-clearfix-hack/

Example
A floated item.
Markup: utility/clearfix/clearfix.twig 
<div class="clearfix">
  <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
</div>
Source: utility/clearfix/_clearfix.scss, line 1

6.2 utility.inline-sibling Inline sibling

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

An element that needs to appear inline with the content that follows.

Example

A Heading

A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Markup: utility/inline-sibling/inline-sibling.twig 
<h4 class="inline-sibling {{modifier_class}}">A Heading</h4>
<p>A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Source: utility/inline-sibling/_inline-sibling.scss, line 1

6.3 utility.print-none Do not print

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Removes an element from the print version of the web site.

By importing these CSS rules in a file marked as media "all", we allow these print rules to be aggregated with other stylesheets, for improved front-end performance.

Example

This item will not be printed.

Markup: utility/print-none/print-none.twig 
<p class="print-none">
  This item will not be printed.
</p>
Source: utility/print-none/_print-none.scss, line 1

6.4 utility.responsive-video Responsive video

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Using a wrapper div, embedded videos can be made responsive so that their intrinsic aspect ratio is preserved at any screen width. The responsive-video__embed class is optional if the embed is an iframe.

Examples
Default styling
.responsive-video--4-3
A video with a 4:3 aspect ratio instead of the default 16:9 one.
Markup: utility/responsive-video/responsive-video.twig 
<div class="responsive-video {{modifier_class}}">
  <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
</div>
Source: utility/responsive-video/_responsive-video.scss, line 1

6.5 utility.visually-hidden Visually hidden

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Make an element visually hidden, but accessible to screen readers, etc.

Examples
Default styling
.visually-hidden--off
Turns off the visually-hidden effect.
.visually-hidden--focusable
Makes an element visually hidden by default, but visible when receiving focus.
.visually-hidden--focusable:focus
A focused, and visible, element.
Markup: utility/visually-hidden/visually-hidden.twig 
<div class="visually-hidden {{modifier_class}}">
  {{content}}
</div>
Source: utility/visually-hidden/_visually-hidden.scss, line 1