Helper classes and mixins

Helper classes and mixins are utilities to help front-end web development meet our design standards.

Helper classes

"JS only" helper class

Hide an element when JavaScript isn’t available. Requires a small script in the <head> of your <html> document that removes a .no-js class.

  1. Add a no-js class to the html
<html class="no-js">
  1. Add a script to remove the no-js class after confirming JavaScript is available
<script>
      // Confirm availability of JavaScript and remove no-js class from html
      var docElement = document.documentElement;
      docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2');
  </script>
  1. Add the utility class to the element you want to hide
<div class="u-js-only"></div>

HTML code snippet

<html class="no-js">
<script>
      // Confirm availability of JavaScript and remove no-js class from html
      var docElement = document.documentElement;
      docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2');
</script>
<div class="u-js-only"></div>

"Clearfix" helper class

Clear floated elements to avoid following elements from flowing into the previous one.

For example, to float an element to the left, but prevent the following text from flowing into it.

More information see: http://css-tricks.com/snippets/css/clear-fix

This text would normally flow up into the black box of the box above

HTML code snippet

<div class="u-clearfix">
    <div style="float:left; width:100%; height:60px; background:black;"></div>
</div>
<em>This text would normally flow up into the black box of the box above</em>

"Visually hidden" helper class

Hide an element from view while keeping it accessible to screen readers.

For example, to create a link with a social network icon, but allow non-sighted users to understand the context, add descriptive text with the u-visually-hidden class.

<h1>
    <a href="#">
        <span class="cf-icon cf-icon-twitter-square"></span>
        <span class="u-visually-hidden">Share on Twitter</span>
    </a>
</h1>

"Totally hidden" helper class

Use u-hidden to hide an element from everything (including screen readers). This is useful for dynamically hiding and showing content. It is also useful for progressive enhancement. For example, if you want to hide something initially on page load but show it after checking for browser support, use JavaScript to remove this class from the element after verifying support.

"Inline block" helper class [DEPRECATED]

DEPRECATED. Identical to display: inline-block.

<div class="u-inline-block"></div>

"Float right" helper class

<div class="u-right"></div>

"Break word" helper class

Force word breaks within an element. Useful for small containers where text may over-run the width of the container.

This only works in Internet Explorer 8 when the element with the .u-break-word class has layout. See http://stackoverflow.com/questions/3997223/word-wrapbreak-word-not-working-in-ie8 for more information.

This link should break: something@something.com
This link should not: something@something.com

HTML code snippet

<!--NOTE: Inline style properties for demonstration only.-->

<div class="u-break-word u-mb30" style="width: 100px; padding: 0.5em; border: 1px solid silver;">
    This link should break:
    <a href="#">
        something@something.com
    </a>
</div>

<div class="u-mb30" style="width: 100px; padding: 0.5em; border: 1px solid silver;">
    This link should not:
    <a href="#">
        something@something.com
    </a>
</div>

"Margin utilities" helper classes

Force a margin top or bottom on an element in pixels.

.u-m[p][#]

[p] is the position, use t for top or b for bottom. [#] is the pixel value, available options are 0, 5, 10, 15, 20, 30, 45, 60

Demonstration of heading 4 with zero bottom margin

HTML code snippet

<h4 class="u-mb0">Demonstration of heading 4 with zero bottom margin</h4>
<hr>

"Width utilities" helper classes

Set the width of an element in percentages.

.u-w100pct
.u-w90pct
.u-w80pct
.u-w70pct
.u-w60pct
.u-w50pct
.u-w40pct
.u-w30pct
.u-w20pct
.u-w10pct
.u-w75pct
.u-w25pct
.u-w66pct
.u-w33pct

HTML code snippet

<!--NOTE: Inline style properties for demonstration only.-->

<div class="u-w100pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w100pct</code>
</div>
<div class="u-w90pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w90pct</code>
</div>
<div class="u-w80pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w80pct</code>
</div>
<div class="u-w70pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w70pct</code>
</div>
<div class="u-w60pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w60pct</code>
</div>
<div class="u-w50pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w50pct</code>
</div>
<div class="u-w40pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w40pct</code>
</div>
<div class="u-w30pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w30pct</code>
</div>
<div class="u-w20pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w20pct</code>
</div>
<div class="u-w10pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w10pct</code>
</div>
<div class="u-w75pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w75pct</code>
</div>
<div class="u-w25pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w25pct</code>
</div>
<div class="u-w66pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w66pct</code>
</div>
<div class="u-w33pct" style="background: #f4edf3; margin-bottom: 1px;">
    <code>.u-w33pct</code>
</div>

"Show on mobile" width-specific helper class

Shows content on screen widths under 601px. Reduce screen size to see this in action.

Visible on mobile

HTML code snippet

<!--NOTE: Inline style properties for demonstration only-->

<div style="border: 1px solid black; height: 22px; padding: 5px;">
    <p class="u-show-on-mobile">Visible on mobile</p>
</div>

"Hide on mobile" width-specific helper class

Hides content on screens widths under 601px. Reduce screen size to see this in action.

Hidden on mobile

HTML code snippet

<!--NOTE: Inline style properties for demonstration only-->

<div style="border: 1px solid black; height: 22px; padding: 5px;">
    <p class="u-hide-on-mobile">Hidden on mobile</p>
</div>

Mixins

"Align with button" mixin

Align an element vertically with the text within a button that may be to either side.

Pass font-size as the argument for calculating spacing, default value is @base-font-size-px.

.u-align-with-btn(@font-size: @base-font-size-px);

"Flexible proportional containers" mixin

Utilize intrinsic ratios to create a flexible container that retains an aspect ratio. When <img> tags scale they retain their aspect ratio, but if you need a flexible video you will need to use this mixin.

Read more about intrinsic ratios: http://alistapart.com/article/creating-intrinsic-ratios-for-video

.u-flexible-container-mixin(@width: 16, @height: 9);

In addition to the mixin, there are two default classes available for building 16:9 and 4:3 containers.

When using the mixin, pass the width as the first argument, and the height as the second argument. Default values are 16, 9.

Original mixin credit: https://gist.github.com/craigmdennis/6655047

16:9 flexible video player

To create a 16:9 flexible video player, wrap the video element in an element with u-flexible-container and add the u-flexible-container_inner to the video element.


Flexible container with background

To create a flexible container with only a background (no inner video or object element), omit the inner container.


4:3 flexible video player

To create a 4:3 flexible video player, add the __4_3 modifier to the container.

HTML code snippet

<!--NOTE: Inline style properties for demonstration only-->

<h4>16:9 flexible video player</h4>
<p>To create a 16:9 flexible video player, wrap the video element in an element with <code>u-flexible-container</code> and add the <code>u-flexible-container_inner</code> to the video element.</p>
<div class="u-flexible-container">
    <video class="u-flexible-container_inner"
          style="background:#75787B;"
          controls>
    </video>
</div>

<br />

<h4>Flexible container with background</h4>
<p>To create a flexible container with only a background (no inner video or object element), omit the inner container.</p>
<div class="u-flexible-container"
    style="background-image: url(https://dummyimage.com/700x394/addc91/101820);
            background-position: center center;
            background-repeat: no-repeat;"></div>

<br />

<h4>4:3 flexible video player</h4>
<p>To create a 4:3 flexible video player, add the <code>__4_3 modifier</code> to the container.</p>
<div class="u-flexible-container u-flexible-container__4-3">
    <video class="u-flexible-container_inner"
          style="background:#75787B;"
          controls>
    </video>
</div>

"Link color" mixin

Calling the mixin without arguments will set the following states: default - #0071bc, :hover - #205493, :focus - #0071bc, :visited - #4c2c92, :active - #046b99.

u-link__colors()

Passing a single argument into the mixin will set the color for the default, :visited, :hover, :focus, and :active states.

u-link__colors(@c)

Passing two arguments into the mixin will set the color for the default, :visited, and :active states as the first argument, and :hover and :focus as the second argument.

u-link__colors(@c, @h)

Passing five arguments will set the color for the default, :visited, :hover, :focus, and :active states respectively.

u-link__colors(@c, @v, @h, @f, @a)

Passing ten arguments will set the text (default, :visited, :hover, :focus, and :active states in the first five arguments) and border colors (default, :visited, :hover, :focus, and :active states in the following five arguments) separately.

u-link__colors(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba)

A base mixin of u-link__colors-base() exists, but please refrain from using this mixin directly in order to promote consistent naming throughout this project. If you need to set colors for all states of a link, use .u-link__colors(@c, @v, @h, @f, @a).

"Link border" mixin

Force the default bottom border on the default and :hover states.

.u-link__border()

Turn off the default bottom border on the default and :hover states.

.u-link__no-border()

Turn off the default bottom border on the default state but force a bottom border on the :hover state.

.u-link__hover-border()

"Link children" mixin

Calling this mixin without arguments will set the default color for the :hover state of a child within a link, without affecting the link itself.

.u-link__hover-child()

Passing a single argument into the mixin will set a custom color for the :hover state of a child within a link, without affecting the link itself.

.u-link__hover-child(@c)

"Small text utility" mixin

Class

Sets the element to 14px (in ems).

To be used on default 16px text only. To use on text set to another size, use the mixin below.

.u-small-text

Mixin

Sets the element to 14px (in ems) based on the text size passed as @context.

.u-small-text(@context)

// Ex.
.example {
  font-size: unit(20px / @base-font-size-px, em);

  small {
    .u-small-text(20px);
  }
}

// Compiles to
.example {
  font-size: 1.25em;
}

.example small {
  font-size: 0.7em;
}
Edit page