2 Utilities

These are small utility components that are used to enhance other components.

2.1 Visually hidden View in a new window

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

Twig: utils/visually-hidden/visually-hidden.twig

Default example
This text will be read by screen readers, but will be visually hidden.
Turns off the visually-hidden effect.
This text will be read by screen readers, but will be visually hidden.
Makes an element visually hidden by default, but visible when receiving focus.
This text will be read by screen readers, but will be visually hidden.
A focused, and visible, element.
This text will be read by screen readers, but will be visually hidden.
Markup
<div class="visually-hidden {{modifier_class}}">
  This text will be read by screen readers, but will be visually hidden.
</div>

2.2 Hidden View in a new window

Hide elements from all users. Compare to the visually-hidden component.

Used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user.

For anything you want to hide on page load when JavaScript is enabled, use the .js-hidden class.

Twig: utils/hidden/hidden.twig

Example
Markup
<div class="hidden {{modifier_class}}">
  This content is hidden.
</div>

2.3 Clearfix View in a new window

Allows the bottom of an element to extend to the bottom of all floated child elements. This method uses the latest, greatest, simplest clearfix method from CSS Mojo: http://cssmojo.com/the-very-latest-clearfix-reloaded/

Twig: utils/clearfix/clearfix.twig

Example
A floated item.
Markup
<div class="clearfix">
  <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
</div>

2.5 Image replace View in a new window

Modern image replacement technique from Zeldman. See http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Twig: utils/image-replace/image-replace.twig

Default example
This text is invisible.
Reset an element that has been replaced by an image.
This text is invisible.
Markup
<div class="image-replace {{modifier_class}}">
  This text is invisible.
</div>

2.6 Reset View in a new window

Reset various elements to a base state.

2.6.1 Reset list View in a new window

Safely reset ul and ol and their children li elements.

Twig: utils/reset/reset-list.twig

Example
  • Item 1
  • Item 2
  • Item 3
  • Item 4
Markup
<ul class="reset--list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

2.6.2 Reset fieldset View in a new window

Safely reset fieldset and their children legend elements.

Twig: utils/reset/reset-fieldset.twig

Example
Fieldset label

This is some fieldset content.

Markup
<fieldset class="reset--fieldset">
  <legend>Fieldset label</fieldset>
  <p>This is some fieldset content.</p>
</fieldset>

2.6.3 Reset button View in a new window

Safely reset the button element

Twig: utils/reset/reset-button.twig

Example
Markup
<button class="reset--button">Button</button>

2.7.1 placholder($color, $style) View in a new window

Allows form elements to quickly implement placeholder browser prefixes.

Parameters:
  • $color
    A Hex color to use for placeholder text.
  • $style
    A font-style to use for placeholder test.

2.7.2 rtl() View in a new window

Includes Right-To-Left langauge support. Can be turned off globally by setting $include-rtl: false;.

2.7.3 print-none() View in a new window

Do not display for printed media.

2.7.4 print-only() View in a new window

Only display for printed media.

2.7.5 escape-container() View in a new window

Allows items to stretch edge-to-edge and escape the bounds of the container.

Parameters:
  • $padding
    The amount of padding the container uses, defaults to $container-padding.

2.7.6 escape-container-reset() View in a new window

Reset the escape to 0.

2.7.7 container-padding() View in a new window

Provides padding that matches the container padding.

Parameters:
  • $padding
    The amount of padding the container uses, defaults to $container-padding.

2.7.8 container-padding-reset() View in a new window

Reset the escape to 0.

Parameters:
  • $padding
    The amount of padding the container uses, defaults to 0.

2.7.9 desaturate() View in a new window

Make the image black and white (grayscale, greyscale).

Parameters:
  • $amount
    The amount to desaturate by, defaults to 100 (full color) 0 for black and white.

2.8 text-clamp() View in a new window

Cross-browser text clamp function

Parameters:
  • $line-height
    Line height of text
  • $lines-to-show
    Number of lines to show