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
Turns off the visually-hidden effect.
Makes an element visually hidden by default, but visible when receiving focus.
A focused, and visible, element.
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 Mixins View in a new window

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