Below we describe a suite of utility classes to be used for spacing.
The utility classes available are of the following form:
.margin-[direction]-[size] - Margin of size [size] in direction [direction].padding-[direction]-[size] - Padding of size [size] in direction [direction]Size can be
none - sets value to 0tinysmallmediumlargexlargePosition can be
topbottomleftrightvert - top and bottomhoriz - left and rightFor example:
<button class="margin-none button btn-cta">Marginless Button</button>
Use .block, .inline-block and .inline modify the display types of various elements.
<!-- Displayed as block -->
<span class="block bg-light-grey padding-medium margin-bottom-medium">Block</span>
<!-- Displayed as inline-block -->
<span class="inline-block bg-light-grey padding-medium margin-right-medium">Inline-Block</span>
<!-- Displayed as inline -->
<span class="inline bg-light-grey margin-right-medium">Inline</span>
If you would like to hide an element altogether, use the .hide class.
<span class="hide">You can't see me.</span>
These classes are used to align elements.
Use .valign-top, .valign-middle, and .valign-bottom to align elements vertically. Obviously, these may only apply to elements whose display property is set to either inline or inline-block.
<!-- Alignment Guideline -->
<span class="inline-block valign-middle bg-light-grey padding-medium" style="height: 8rem">Alignment Guideline</span>
<!-- Alignment Examples -->
<span class="inline-block valign-top bg-medium-grey padding-medium">Align to Top</span>
<span class="inline-block valign-middle bg-medium-grey padding-medium">Align to Middle</span>
<span class="inline-block valign-bottom bg-medium-grey padding-medium">Align to Bottom</span>
Always keep in mind that you cannot align an element vertically by itself! It needs another element to which it can align. A group of elements will vertically align to the tallest element in the group.
Use .text-left, .text-center, and .text-right to align text horizontally.
<p class="text-left">This text is left-aligned.</p>
<p class="text-center">This text is center-aligned.</p>
<p class="text-right">This text is right-aligned.</p>
This text is left-aligned.
This text is center-aligned.
This text is right-aligned.
These classes are used to reset the styles needed by particular components.
Use the .reset-list class to reset properties on a <ul> or <ol>.
<!-- Standard List -->
<h3>The Four Seasons</h3>
<ul>
<li>Winter</li>
<li>Spring</li>
<li>Summer</li>
<li>Fall</li>
</ul>
<!-- Reset List -->
<h3>The Four Seasons, reset</h3>
<ul class="reset-list">
<li>Winter</li>
<li>Spring</li>
<li>Summer</li>
<li>Fall</li>
</ul>
Use the .reset-button class when you wish to reset properties on a <button>. This may be helpful if you need to style a custom button element.
<!-- Standard Button -->
<button class="button btn-cta">Example Button</button>
<!-- Reset Button -->
<button class="reset-button button btn-cta">Reset Button</button>
Use the .reset-child-margins class when you wish to supply margins on children but do not want them applied to the first or last elements.
<div class="row padding-horiz-medium">
<div class="small-4 padding-medium reset-child-margins" style="background-color: #F1F1F1;">
<!-- This button has no top margin -->
<button class="expand button btn-cta">Example Button</button>
<button class="expand button btn-cta">Example Button</button>
<button class="expand button btn-cta">Example Button</button>
<!-- This button has no bottom margin -->
<button class="expand button btn-cta">Example Button</button>
</div>
</div>
Antialiased font smoothing works best for light text on a dark background and can be appled to single elements or globally to body using the .antialiased class.
Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
<!-- Paragraph Text -->
<p class="antialiased">Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.</p>
<!-- Button Text -->
<button class="button btn-cta">Example Button</button>
Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.
Some themes supply a separate font used to apply tabular lining to numeric characters. This font may be applied to a component using the .text-tabular-lining utility class.
<!-- Standard Text -->
<p>$199.99 - Standard Lining</p>
<!-- Tabular Figures -->
<p class="text-tabular-lining">$199.99 - Tabular Lining</p>
$199.99 - Standard Lining
$199.99 - Tabular Lining
A handful of helpful utility classes to add text and background colors.
<p class="text-primary">This is text color primary.</p>
<p class="text-secondary">This is text color secondary.</p>
<p class="text-success">This is text color success.</p>
<p class="text-alert">This is text color alert.</p>
<p class="text-info">This is text color info.</p>
<p class="text-warning">This is text color warning.</p>
This is text color primary.
This is text color secondary.
This is text color success.
This is text color alert.
This is text color info.
This is text color warning.
<p class="text-primary-mute">This is text color primary mute.</p>
<p class="text-secondary-mute">This is text color secondary mute.</p>
<p class="text-success-mute">This is text color success mute.</p>
<p class="text-alert-mute">This is text color alert mute.</p>
<p class="text-info-mute">This is text color info mute.</p>
<p class="text-warning-mute">This is text color warning mute.</p>
This is text color primary mute.
This is text color secondary mute.
This is text color success mute.
This is text color alert mute.
This is text color info mute.
This is text color warning mute.
<p class="padding-small bg-black text-white">This is text color white.</p>
<p class="text-medium-grey">This is text color medium grey.</p>
<p class="text-dark-grey">This is text color dark grey.</p>
<p class="text-off-black">This is text color off black.</p>
<p class="text-black">This is text color black.</p>
This is text color white.
This is text color medium grey.
This is text color dark grey.
This is text color off black.
This is text color black.
<div class="padding-small margin-bottom-tiny text-white bg-primary">This is background color primary.</div>
<div class="padding-small margin-bottom-tiny text-white bg-secondary">This is background color secondary.</div>
<div class="padding-small margin-bottom-tiny text-white bg-success">This is background color success.</div>
<div class="padding-small margin-bottom-tiny text-white bg-info">This is background color info.</div>
<div class="padding-small margin-bottom-tiny text-white bg-alert">This is background color alert.</div>
<div class="padding-small margin-bottom-tiny text-white bg-warning">This is background color warning.</div>
<div class="padding-small margin-bottom-tiny text-white bg-primary-pastel">This is background color primary pastel.</div>
<div class="padding-small margin-bottom-tiny bg-secondary-pastel">This is background color secondary pastel.</div>
<div class="padding-small margin-bottom-tiny bg-success-pastel">This is background color success pastel.</div>
<div class="padding-small margin-bottom-tiny bg-alert-pastel">This is background color alert pastel.</div>
<div class="padding-small margin-bottom-tiny bg-info-pastel">This is background color info pastel.</div>
<div class="padding-small margin-bottom-tiny bg-warning-pastel">This is background color warning pastel.</div>
<div class="padding-small margin-bottom-tiny text-black bg-white">This is background color white.</div>
<div class="padding-small margin-bottom-tiny text-black bg-off-white">This is background color off white.</div>
<div class="padding-small margin-bottom-tiny text-black bg-light-grey">This is background color light grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-medium-grey">This is background color medium grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-dark-grey">This is background color dark grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-off-black">This is background color off black.</div>
<div class="padding-small margin-bottom-tiny text-white bg-black">This is background color black.</div>
The .text-lower and .text-upper classes can be used for modifying the text casing.
<p>This text is <span class="text-lower">Lowercase</span> and this text is <span class="text-upper">Uppercase</span>.</p>
This text is Lowercase and this text is Uppercase.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Utility Classes
Utility classes are used to apply a single rule to a component. They can be used compositionally to modify elements as needed by a specific design context.