Theme variables

The following color and sizing variables are exposed, allowing you to easily override them before compiling.

Sizing

@base-font-size-px
@base-line-height-px
@base-line-height
@bp-xs-max
@bp-sm-min
@bp-sm-max
@bp-med-min
@bp-med-max
@bp-lg-min
@bp-lg-max
@bp-xl-min

Colors

@text
@link-text
@link-underline
@link-text-visited
@link-underline-visited
@link-text-hover
@link-underline-hover
@link-text-active
@link-underline-active
@table-border
@thead-text
@thead-bg
@td-bg
@td-bg-alt
@input-bg
@input-border
@input-border-focus
@input-placeholder
@figure__bordered

Media query mixins

These mixins allow us to write consistent media queries using pixel values, which are easier to remember. The mixins handle converting the pixels into em's.

min-width/max-width media queries

```
.respond-to-min(@bp, @rules)
```
```
.respond-to-max(@bp, @rules)
```

@bp: the breakpoint size in pixels. It will get converted into em's.
@rules: a CSS or Less ruleset. Note that it can contain the full set of Less features.

min-width/max-width media query usage

.respond-to-min(768px, {
    .title {
        font-size: 2em;
    }
});

Compiles to:

@media only all and (min-width: 48em) {
    .title {
        font-size: 2em;
    }
}

min-width/max-width media query range

```
.respond-to-range(@bp1, @bp2, @rules)
```

@bp1: the min-width breakpoint size in pixels. It will get converted into em's.
@bp2: the max-width breakpoint size in pixels. It will get converted into em's.
@rules: a CSS or Less ruleset. Note that it can contain the full set of Less features.

min-width/max-width media query range usage

.respond-to-range(320px, 768px, {
    .title {
        font-size: 2em;
    }
});

Compiles to:

@media only all and (min-width: 20em) and (max-width: 48em) {
    .title {
        font-size: 2em;
    }
}

JS-only

Setup

```
<html class="no-js">
```

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

First add the .no-js class to the HTML element.
Then add the script to your HEAD which removes the .no-js class when JS is available.

Utility class

```
.u-js-only;
```

Hide stuff when JavaScript isn't available. Depends on having a small script in the HEAD of your HTML document that removes a .no-js class.

Clearfix

Utility class

<div class="u-clearfix">
    <div style="float:left; width:100%; height:60px; background:black;"></div>
</div>

```
.u-clearfix;
```

Use this class to clear floats. For example, without .u-clearfix the black box would spill into the markup section.
More information: http://css-tricks.com/snippets/css/clear-fix/

Visually hidden

Utility class

Share on Twitter

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

```
.u-visually-hidden;
```

Use this class to hide something from view while keeping it accessible to screen readers.

Inline block

Utility class

```
.u-inline-block;
```

Also adds a .lt-ie8 class to hack inline-block for IE 7 and below.

Floating right

Utility class

```
.u-right;
```

IE7 float: right drop bug fixes:
1. If the float: right follows an element in the html structure that should be to its left (and not above it), then that preceding element(s) must be float: left. http://stackoverflow.com/questions/10981767/clean-css-fix-of-ie7s-float-right-drop-bug#answer-11437688
2. Simply change the markup order so that the element floating right comes before the element to its left.

Break word

Utility class

This link should break:
something@something.com

This link should not:
something@something.com

<div style="width: 100px;">
    This link should break:
    <br>
    <a class="u-break-word" href="#">
        something@something.com
    </a>
    <br>
    <br>
    This link should not:
    <br>
    <a href="#">
        something@something.com
    </a>
</div>

```
.u-break-word
```

Use this on elements where you need the words to break when confined to small containers.
This only works in IE8 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.

Align with button

Utility class

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

Adds top padding (among other things) to help alignment with buttons.
If you pass no arguments then the padding will be calculated using @base-font-size-px.
Pass one argument to use a custom font size to calculate the top padding.

Flexible proportional containers

Utilizes intrinsic ratios to create a flexible container that retains its aspect ratio. When image tags scale they retain their aspect ratio, but if you need a flexible video you will need to use this mixin.
You can read more about intrinsic rations here: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Default example

<div class="u-flexible-container">
    <video
      class="u-flexible-container_inner"
      style="background:#75787B;"
      controls>
    </video>
</div>

Structural sheat sheet:
-----------------------
.u-flexible-container
  .u-flexible-container_inner

Defaults to a 16:19 ratio.
Original mixin credit: https://gist.github.com/craigmdennis/6655047
Note that inline style usage is being used for demo purposes only. Please do not use inline styles.

Background image examples

<div class="u-flexible-container"
     style="
       background-image:url(http://placekitten.com/700/394);
       background-position: center center;
     ">
</div>
<div class="u-flexible-container"
     style="
       background-image:url(http://placekitten.com/700/394);
       background-position: center center;
       background-size: cover;
     ">
</div>

Structural sheat sheet:
-----------------------
.u-flexible-container

If you're not using the video or object elements and all you need is a proportionally cropped or scaling background image with a fluid container then you can leave out u-flexible-container_inner.
Note that inline style usage is being used for demo purposes only. Please do not use inline styles.

4-3 modifier

<div class="u-flexible-container u-flexible-container__4-3">
    <video
      class="u-flexible-container_inner"
      style="background:#75787B;"
      controls>
    </video>
</div>

Structural sheat sheet:
-----------------------
.u-flexible-container.u-flexible-container__4-3
  .u-flexible-container_inner

Create your own aspect ratios by using this modifier as an example.
Note that inline style usage is being used for demo purposes only. Please do not use inline styles.

Link mixins

```
.u-link__colors();
```

Pass this mixin no arguments to color your link states with the following defaults: :link (default state) pacific, :hover pacific-50, :focus: pacific, :visited teal, :active navy.

```
.u-link__colors(@c);
```

Pass this mixin one color to be used on all of the following states of your link; :link (default state), :visited, :hover, :focus, :active.

```
.u-link__colors(@c, @h);
```

Pass this mixin two colors to use the first color for the :link, :visited, and :active states, and the second color for the :hover and :focus states.

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

Pass this mixin five colors in 'love/hate' mnemonic order to color :link, :visited, :hover, :focus, and :active states respectively.
Even though this mixin is basically the same as .u-link__colors-base(@c, @v, @h, @f, @a); we encourage you to use .u-link__colors(@c, @v, @h, @f, @a) to promote consistency.

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

Allows you to color text and the borders separately.
The first five colors in 'love/hate' mnemonic order will color text for the :link, :visited, :hover, :focus, and :active states respectively. The last five colors in 'love/hate' mnemonic order will color the borders for the :link, :visited, :hover, :focus, and :active states respectively.
Even though this mixin is basically the same as .u-link__colors-base(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba); we encourage you to use .u-link__colors(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba) to promote consistency.

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

This is the base mixin that all .u-link__colors() mixins use. Please refrain from using this mixin directly in order to promote a consistent use of mixin names for coloring links throughout this project. Remember that if you need to set colors for all states of a link you should use .u-link__colors(@c, @v, @h, @f, @a).

```
.u-link__border();
```

Forces the default bottom border on the :link and :hover states.

```
.u-link__no-border();
```

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

```
.u-link__hover-border();
```

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

```
.u-link-child__hover();
```

When a link has child elements you may want only certain children to change color when the parent link is hovered. Pass no arguments to this mixin to color the child element pacific when the parent link is hovered.

```
.u-link-child__hover(@c);
```

Pass this mixin one color to color the child element when the parent link is hovered.

Margin utilities

Utility classes

```
.u-m<p><#>;
```

Replace <p> with the first letter of the position ('t' for top or 'b' for bottom) and <#> with the pixel value of the margin you want.
Available values: 0, 5, 10, 15, 20, 30, 45, 60.

Width utilities

Percent-based

.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

<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>

Inline styles are for demonstration purposes only, please don't use them.

Width-specific display

Show on mobile

The the text in the box below is visible only at widths less than 600px

Visible on mobile

<section>
    <p>The the text in the box below is visible only at widths less than 600px</p>
    <div style="border: 1px solid black; height: 22px; padding: 5px;">
        <p class="u-show-on-mobile">Visible on mobile</p>
    </div>
</section>

```
.u-show-on-mobile
```

Uses 'display:block' to toggle display. Would need to be extended for inline use cases.

Displays an element only at mobile widths.

Hide on mobile

The text in the box below is hidden at widths less than 600px

Hidden on mobile

<section>
    <p>The text in the box below is hidden at widths less than 600px</p>
    <div style="border: 1px solid black; height: 22px; padding: 5px;">
        <p class="u-hide-on-mobile">Hidden on mobile</p>
    </div>
</section>

```
.u-hide-on-mobile
```

Hides an element at mobile widths

Small text utility

.u-small-text (utility class)

Lorem ipsum
dolor sit amet

Lorem ipsum<br>
<span class="u-small-text">dolor sit amet</span>

```
.u-small-text
```

14px text.
The utility class should only be used when the default text size is 16px. For example you wouldn't want to use the class inside of an `h1` because the `font-size` in the `h1` will make `.u-small-text` bigger than it should be. See the docs for the `.u-small-text()` mixin.

.u-small-text() (Less mixin)

```
.u-small-text(@context)
```

// Mixin usage:
.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;
}

This mixin enables you to easily create consistent small text by passing the context `font-size`.

Webfonts

Webfont mixins and variables

```
.webfont-regular()
```
```
.webfont-italic()
```
```
.webfont-medium()
```
```
.webfont-demi()
```

Use these mixins to easily add the your preferred font family to your elements.
To use your own fonts in the webfont mixins, set your own font with the @webfont-regular/italic/medium/demi variables.
To avoid faux bold and italics, you must use the font family name for that particular style. For example, when defining an italic in Helvetica you need to use the Helvetica Italic font family. Use the mixins when setting bold or italic text as they also set the appropriate font-weight and font-style.
These mixins also add the appropriate .lt-ie9 overrides. .lt-ie9 overrides are necessary to override font-style and font-weight each time the webfont is used. These overrides are built into the webfont mixins so you get them automatically. Note that this requires you to use conditional classes on the <html> element: https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md#conditional-html-classes.

Type hierarchy

Default body type

Lorem ipsum dolor sit amet, consectetur adipisicing 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>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Heading level 1

Example heading element

A non-heading element

<h1>Example heading element</h1>
<p class="h1">A non-heading element</p>

Responsive heading. At small screen sizes, displays as h2.

Heading level 2

Example heading element

A non-heading element

<h2>Example heading element</h2>
<p class="h2">A non-heading element</p>

Responsive heading. At small screen sizes, displays as h3.

Heading level 3

Example heading element

A non-heading element

<h3>Example heading element</h3>
<p class="h3">A non-heading element</p>

Responsive heading. At small screen sizes, displays as h4.

Heading level 4

Example heading element

A non-heading element

<h4>Example heading element</h4>
<p class="h4">A non-heading element</p>

Heading level 5

Example heading element

A non-heading element

<h5>Example heading element</h5>
<p class="h5">A non-heading element</p>

Heading level 6

Example heading element

A non-heading element

<h6>Example heading element</h6>
<p class="h6">A non-heading element</p>

Lead paragraph

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Responsive. Displays as an h3 on large screens; displays at h4 size (but still Regular weight) on small screens.

Display heading (aka "superheading")

Example display heading

<h1 class="superheading">Example display heading</h1>

Body copy element vertical margins

Consistent vertical margins

Paragraph margin example

List item 1
List item 2
List item 3

Paragraph margin example

<p>Paragraph margin example</p>
<p>Paragraph margin example</p>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
<p>Paragraph margin example</p>

Applies 15px bottom margin to all p, ul, ol, dl, figure, table, and blockquote elements.
Applies -5px top margin to lists following paragraphs to reduce margin between them to 10px.
Applies 8px bottom margin to list items that are not within a nav element.
Assumes that the font size of each of these items remains the default.

Default link

Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production.

Default state

Default link style

<a href="#">Default link style</a>

Visited state

Visited link style

<a href="#" class="visited">Visited link style</a>

Hovered state

Hovered link style

<a href="#" class="hover">Hovered link style</a>

Focused state

Focused link style

<a href="#" class="focus">Focused link style</a>

Active state

Active link style

<a href="#" class="active">Active link style</a>

Underlined links

States

Default, Visited, Hovered, Focused, Active

<p>
    <a href="#">Default</a>,
    <a href="#" class="visited">Visited</a>,
    <a href="#" class="hover">Hovered</a>,
    <a href="#" class="focus">Focused</a>,
    <a href="#" class="active">Active</a>
</p>

Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production.
The underline style properties are mostly set above in the a tag. To enable the underline simply set a bottom-border-width as done here.

Underline conditions

A child of a paragraph

A child of a list item

Definition list term: A child of a definition list description

<p>
    <a href="#">A child of a paragraph</a>
</p>
<ul>
    <li>
        <a href="#">A child of a list item</a>
    </li>
</ul>
<dl>
    <dt>
        Definition list term
    </dt>
    <dd>
        <a href="#">A child of a definition list description</a>
    </dd>
</dl>

We're restricting link borders to links within p, li, and dd so that we don't have to override them every time we want a plain link.

Exceptions for underlined links

<nav>
    <p>
        <a href="#">A child of a paragraph</a>
    </p>
    <ul>
        <li>
            <a href="#">A child of a list item</a>
        </li>
    </ul>
    <dl>
        <dt>
            Definition list term
        </dt>
        <dd>
            <a href="#">A child of a definition list description</a>
        </dd>
    </dl>
</nav>

Inline text links inside of a nav element are not underlined.

Lists

Unordered list

Paragraph example for visual reference

List item 1
List item 2
List item 3

<p>Paragraph example for visual reference</p>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Ordered list

Paragraph example for visual reference

List item 1
List item 2
List item 3

<p>Paragraph example for visual reference</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

Tables

Standard table

Column 1 header	Column 2 header	Column 3 header
Row 1, column 1	Row 1, column 2	Row 1, column 3
Row 2, column 1	Row 2, column 2	Row 2, column 3
Row 3, column 1	Row 3, column 2	Row 3, column 3

<table>
    <thead>
        <tr>
            <th>Column 1 header</th>
            <th>Column 2 header</th>
            <th>Column 3 header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, column 1</td>
            <td>Row 1, column 2</td>
            <td>Row 1, column 3</td>
        </tr>
        <tr>
            <td>Row 2, column 1</td>
            <td>Row 2, column 2</td>
            <td>Row 2, column 3</td>
        </tr>
        <tr>
            <td>Row 3, column 1</td>
            <td>Row 3, column 2</td>
            <td>Row 3, column 3</td>
        </tr>
    </tbody>
</table>

Block quote

Default block quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa similique fugit hic eligendi praesentium officiis illum optio iusto commodi eum tempore nisi ad in perferendis enim quo dolores. Reprehenderit similique earum quibusdam possimus vitae esse nesciunt mollitia sed beatae aliquid dolores iure a impedit quam minus eum modi illum ducimus eligendi eveniet labore non sequi voluptate et totam praesentium animi itaque asperiores dolorum sunt laudantium repellat nam commodi. Perspiciatis natus aliquam veniam officiis ducimus voluptatum ut necessitatibus non!

<blockquote cite="link-to-source">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa
    similique fugit hic eligendi praesentium officiis illum optio iusto
    commodi eum tempore nisi ad in perferendis enim quo dolores.
    Reprehenderit similique earum quibusdam possimus vitae esse
    nesciunt mollitia sed beatae aliquid dolores iure a impedit quam
    minus eum modi illum ducimus eligendi eveniet labore non sequi
    voluptate et totam praesentium animi itaque asperiores dolorum
    sunt laudantium repellat nam commodi. Perspiciatis natus aliquam
    veniam officiis ducimus voluptatum ut necessitatibus non!
</blockquote>

Use a block quote to quote from an external work. See .pull-quote if you need to highlight an excerpt from the current work.
It is best practice to document the URL of a quoted work using the cite attribute.

Form labels

Visit https://github.com/cfpb/cf-forms for advanced form label patterns.

Default label

Form label

<label>Form label</label>

Label wrapping a radio or checkbox

Radio label Checkbox label

<label>
    <input type="radio">
    Radio label
</label>
<label>
    <input type="checkbox">
    Checkbox label
</label>

Form elements

The .focus class is only included for documentation demos and should not be used in production.
Visit https://github.com/cfpb/cf-forms for advanced form field patterns.

type="text"

<input type="text" value="Lorem ipsum">
<input class="focus" type="text" value="Lorem ipsum">
<br><br>
<input placeholder="Lorem ipsum" type="text" value="">

type="search"

<input type="search" value="Lorem ipsum">
<input class="focus" type="search" value="Lorem ipsum">
<br><br>
<input placeholder="Lorem ipsum" type="search" value="">

type="email"

<input type="email" value="Lorem ipsum">
<input class="focus" type="email" value="Lorem ipsum">
<br><br>
<input placeholder="Lorem ipsum" type="email" value="">

type="url"

<input type="url" value="Lorem ipsum">
<input class="focus" type="url" value="Lorem ipsum">
<br><br>
<input placeholder="Lorem ipsum" type="url" value="">

type="tel"

<input type="tel" value="Lorem ipsum">
<input class="focus" type="tel" value="Lorem ipsum">
<br><br>
<input placeholder="Lorem ipsum" type="tel" value="">

type="number"

<input type="number" value="1000">
<input class="focus" type="number" value="1000">
<br><br>
<input placeholder="Lorem ipsum" type="number" value="">

textarea

<textarea>Lorem ipsum</textarea>
<textarea class="focus">Lorem ipsum</textarea>

multi-select

<select multiple>
    <option value="option1">Lorem</option>
    <option value="option2">Ipsum</option>
    <option value="option3">Dolor</option>
    <option value="option4">Sit</option>
</select>
<select class="focus" multiple>
    <option value="option1">Lorem</option>
    <option value="option2">Ipsum</option>
    <option value="option3">Dolor</option>
    <option value="option4">Sit</option>
</select>

Images

max-width

<img src="http://placekitten.com/800/40" alt="">

Gives all images a default max-width of 100% of their container.

Figure

figure

<figure>
    <img src="http://placekitten.com/340/320">
</figure>

figure.figure__bordered

<figure class="figure__bordered">
    <img src="http://placekitten.com/340/320">
</figure>

</> cf-core docs

Theme variables

Sizing

Colors

Media query mixins

min-width/max-width media queries

min-width/max-width media query usage

min-width/max-width media query range

min-width/max-width media query range usage

JS-only

Setup

Utility class

Clearfix

Utility class

Visually hidden

Utility class

Share on Twitter

Inline block

Utility class

Floating right

Utility class

Break word

Utility class

Align with button

Utility class

Flexible proportional containers

Default example

Background image examples

4-3 modifier

Link mixins

Margin utilities

Utility classes

Width utilities

Percent-based

Width-specific display

Show on mobile

Hide on mobile

Small text utility

.u-small-text (utility class)

.u-small-text() (Less mixin)

Webfonts

Webfont mixins and variables

Type hierarchy

Default body type

Heading level 1

Example heading element

Heading level 2

Example heading element

Heading level 3

Example heading element

Heading level 4

Example heading element

Heading level 5

Example heading element

Heading level 6

Example heading element

Lead paragraph

Display heading (aka "superheading")

Example display heading

Body copy element vertical margins

Consistent vertical margins

Default link

Default state

Visited state

Hovered state

Focused state

Active state

Underlined links

States

Underline conditions

Exceptions for underlined links

Lists

Unordered list

Ordered list

Tables

Standard table

Block quote

Default block quote

Form labels

Default label