5 #Utilities Utilities
Utility classes are small, single-purpose classes.
src/css/screen.scss, line 147
5.1 #Utilities.Clearfix Clearfix
A clearfix is a layout technique used on an element that has been positioned
using CSS' float property to clear its child elements and maintain layout.
src/css/utilities/_clearfix.scss, line 1
5.1.1 #Utilities.Clearfix.u-clearfix-add u-clearfix-add
Applies a clearfix to an element.
Markup
<div class="u-clearfix-add">…</div>src/css/utilities/_clearfix.scss, line 9
5.1.2 #Utilities.Clearfix.u-clearfix-remove u-clearfix-remove
Removes a clearfix from an element.
Markup
<div class="u-clearfix-remove">…</div>src/css/utilities/_clearfix.scss, line 22
5.2 #Utilities.Font Families Font Families
Font family classes are used to associate an imported typefaces with an abstract name. This allows us to be able to control and change typefaces quickly and easily. See font family variables.
src/css/utilities/_font-families.scss, line 1
Jackdaws love my big sphinx of quartz.
Markup
<p class="u-font-family-primary">Jackdaws love my big sphinx of quartz.</p>src/css/utilities/_font-families.scss, line 10
Quick wafting zephyrs vex bold Jim.
Markup
<p class="u-font-family-secondary">Quick wafting zephyrs vex bold Jim.</p>src/css/utilities/_font-families.scss, line 23
The five boxing wizards jump quickly.
Markup
<p class="u-font-family-code">The five boxing wizards jump quickly.</p>src/css/utilities/_font-families.scss, line 36
Pack my box with five dozen liquor jugs.
Markup
<p class="u-font-family-native">Pack my box with five dozen liquor jugs.</p>src/css/utilities/_font-families.scss, line 49
5.3 #Utilities.Font Sizes Font Sizes
Use these utility classes to control font sizes.
src/css/utilities/_font-sizes.scss, line 1
5.4 #Utilities.Hide Hide
These classes are used to remove content from a page using various techniques. Each hiding technique has a different implementation based on different use cases.
src/css/utilities/_hide.scss, line 1
5.4.2.1 #Utilities.Hide.u-hide-invisible .u-hide-invisible { @include hide(invisible); } u-hide-invisible
Maintain layout, but make fully transparent.
Markup
<div class="u-hide-invisible">…</div>src/css/utilities/_hide.scss, line 36
5.4.3.1 #Utilities.Hide.u-hide-remove .u-hide-remove { @include hide(remove); } u-hide-remove
Completely remove content.
Markup
<div class="u-hide-remove">…</div>src/css/utilities/_hide.scss, line 49
5.4.4 #Utilities.Hide.u-hide-visually u-hide-visually
Hides content visually, but still makes it available for screen readers.
Markup
<a href="https://en.wikipedia.org/wiki/Cat">Read more <span class="u-hide-visually">about cats.</span></a>src/css/utilities/_hide.scss, line 10
5.5 #Utilities.Text Transform Text Transform
Use these utility classes to control text casing.
src/css/utilities/_text-transform.scss, line 1
5.6 #Utilities.Type Alignment Type Alignment
These classes are used to control the flow of the text in a container. Text aligned via justification is considered to be a common Dyslexia trigger and should be avoided.
src/css/utilities/_type-align.scss, line 1
5.6.1.1 #Utilities.Type Alignment.u-text-transform-initial .u-text-transform-initial { text-transform: initial; } u-text-transform-initial
Capitalizes the first letter in each word.
The first letter in each word in this sentence will be capitalized.
Markup
<p class="u-text-transform-initial">The first letter in each word in this sentence will be capitalized.</p>src/css/utilities/_text-transform.scss, line 34
5.6.2.1 #Utilities.Type Alignment.u-text-transform-none .u-text-transform-none { text-transform: none; } u-text-transform-none
Removes text-transform formatting.
I am cased as typed.
Markup
<p class="u-text-transform-none">I am cased as typed.</p>src/css/utilities/_text-transform.scss, line 8
The first letter in this sentence will be capitalized.
Markup
<p class="u-text-transform-sentence-case">The first letter in this sentence will be capitalized.</p>src/css/utilities/_text-transform.scss, line 52
5.6.4 #Utilities.Type Alignment.u-text-transform-uppercase u-text-transform-uppercase
Makes text all caps.
I will look set in all caps.
Markup
<p class="u-text-transform-uppercase">I will look set in all caps.</p>src/css/utilities/_text-transform.scss, line 21
5.6.5 #Utilities.Type Alignment.u-type-align-center u-type-align-center
Aligns type to the center.
I am aligned to the center.
Markup
<p class="u-type-align-center">I am aligned to the center.</p>src/css/utilities/_type-align.scss, line 23
5.6.6 #Utilities.Type Alignment.u-type-align-left u-type-align-left
Aligns type to the left.
I am aligned to the left.
Markup
<p class="u-type-align-left">I am aligned to the left.</p>src/css/utilities/_type-align.scss, line 10
5.6.7 #Utilities.Type Alignment.u-type-align-right u-type-align-right
Aligns type to the right.
I am aligned to the right.
Markup
<p class="u-type-align-right">I am aligned to the right.</p>src/css/utilities/_type-align.scss, line 36
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 8
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 21
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 34
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 47
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 60
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 73
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 86
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 99
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 112
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 125
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 138
The five boxing wizards jump quickly.
Markup
<p class="u-font-size-heading-huge">The five boxing wizards jump quickly.</p>src/css/utilities/_font-sizes.scss, line 151
5.7 #Utilities.u-preserve-list-semantics u-preserve-list-semantics
Ensures that VoiceOver will declare the presence of list items,
even if the list bullet has been removed. Apply to the ul, ol, dl
element. See mixins.preserve-list-semantics.
- This
- That
- The other thing
Markup
<ul class="u-preserve-list-semantics">
<li>This</li>
<li>That</li>
<li>The other thing</li>
</ul>src/css/utilities/_preserve-list-semantics.scss, line 1
5.8 #Utilities.u-remove-margin-padding u-remove-margin-padding
Removes the margin and padding values on a component, but leaves other declarations intact. See mixin.remove-margin-padding.
Markup
<div class="u-remove-margin-padding">…</div>src/css/utilities/_remove-margin-padding.scss, line 1
5.9 #Utilities.u-responsify u-responsify
Creates a basic full-width responsive element whose aspect ratio scales
proportionately. See mixins.responsify.
Markup
<div class="u-responsify">…</div>src/css/utilities/_responsify.scss, line 1
5.10 #Utilities.u-table-col-width u-table-col-width
Sets a column width as a percentage. Be sure to keep at least one column free of a width declaration to absorb width rounding errors.
Markup
<td class="u-table-col-width">…</td>src/css/utilities/_tables.scss, line 5