Utility Classes

Color

Color utilities are built for background-color, border, and font-color with support for hover states as well. The CSS classes are built using the pattern: {property}--{color-modifier}.

Color Modifiers

Background Color

Sets the background-color property on an element.

<div class="bg-color--theme-primary">1</div>
<div class="bg-color--theme-secondary">2</div>
<div class="bg-color--dark">3</div>
<div class="bg-color--positive">4</div>
<div class="bg-color--none hover-bg-color--theme-secondary">5</div>

Border Color

Sets the border-color property on an element.

<div class="border-color--theme-primary">1</div>
<div class="border-top-color--theme-primary">2</div>
<div class="border-right-color--theme-primary">3</div>
<div class="border-bottom-color--theme-primary">4</div>
<div class="border-left-color--theme-primary hover-border-left-color--negative">5</div>

Font Color

Sets the color property on an element.

<span class="font-color--neutral-1">neutral-1</span>
<span class="font-color--neutral-2">neutral-2</span>
<span class="font-color--positive">positive</span>
<span class="font-color--negative">negative</span>
<span class="font-color--caution">caution</span>
<span class="font-color--info">info</span>
<span class="font-color--light">light</span>
<span class="font-color--dark">dark</span>

Border

Sets the border property to any element with a width of 1px.

<div class="border--0"></div>
<div class="border--top"></div>
<div class="border--right"></div>
<div class="border--bottom"></div>
<div class="border--left"></div>
<div class="border--all"></div>

Border-radius

Sets the border-radius property to any element.

Syntax: class="border-radius--<modifier>"

<div class="border-radius--0"></div>
<div class="border-radius--xs"></div>
<div class="border-radius--sm"></div>
<div class="border-radius--md"></div>
<div class="border-radius--lg"></div>
<div class="border-radius--max"></div>
<div class="border-radius--100"></div>

Display

Sets the display property on any element.

<div class="block">Block</div>
<div class="block">Block</div>

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

<div class="flex">Flex</div>
<div class="flex">Flex</div>

<div class="inline-flex">Inline-flex</div>
<div class="inline-flex">Inline-flex</div>

Flex

These are flex utilities to ease the creation of flex based layouts and element formatting. All flex utilities begin with flex- and followed by the property and modifier: flex-{property}--{modifier}.

NOTE: These properties are only applied to an element that is either flex or a direct descendant of a flex parent.

Direction

Sets the flex-direction property on a flex parent.

<div class="flex flex--row">
    ...
</div>

<div class="flex flex--row-reverse">
    ...
</div>

<div class="flex flex--col">
    ...
</div>

<div class="flex flex--col-reverse">
    ...
</div>

Justify

Sets the justify-content property on a flex parent.

<div class="flex flex-justify--start">
    ...
</div>

<div class="flex flex-justify--end">
    ...
</div>

<div class="flex flex-justify--center">
    ...
</div>

<div class="flex flex-justify--between">
    ...
</div>

<div class="flex flex-justify--around">
    ...
</div>

Align

These utilities affect various alignments in flex parent and children elements.

Content

Sets the align-content property on a flex parent.

<div class="flex flex-content--start">
    ...
</div>

<div class="flex flex-content--end">
    ...
</div>

<div class="flex flex-content--center">
    ...
</div>

<div class="flex flex-content--between">
    ...
</div>

<div class="flex flex-content--around">
    ...
</div>

Items

Sets the align-items property on a flex parent.

<div class="flex flex-items--start">
    ...
</div>

<div class="flex flex-items--end">
    ...
</div>

<div class="flex flex-items--center">
    ...
</div>

<div class="flex flex-items--baseline">
    ...
</div>

<div class="flex flex-items--stretch">
    ...
</div>

Self - Child

Sets the align-self property on a flex child.

<div class="flex">
    <div class="flex-self--start">Flex Child</div>
</div>

<div class="flex">
    <div class="flex-self--end">Flex Child</div>
</div>

<div class="flex">
    <div class="flex-self--center">Flex Child</div>
</div>

<div class="flex">
    <div class="flex-self--baseline">Flex Child</div>
</div>

<div class="flex">
    <div class="flex-self--stretch">Flex Child</div>
</div>

Wrap

Sets the flex-wrap property on a flex parent.

<div class="flex flex--nowrap">
    ...
</div>

<div class="flex flex--wrap">
    ...
</div>

Grow - Child

Sets the flex-grow property on a flex child.

<div class="flex">
    <div class="width--25 flex-grow--1">Width: 25% // Grow 1</div>
    <div class="width--25">Width: 25%</div>
    <div class="width--25">Width: 25%</div>
</div>

<div class="flex">
    <div class="width--25 flex-grow--1">Width: 25% // Grow 1</div>
    <div class="width--25 flex-grow--2">Width: 25% // Grow 2</div>
</div>

<div class="flex">
    <div class="width--25 flex-grow--0">Width: 25% // Grow 0</div>
    <div class="width--25 flex-grow--1">Width: 25% // Grow 1</div>
    <div class="width--25 flex-grow--2">Width: 25% // Grow 2</div>
    <div class="width--25 flex-grow--3">Width: 25% // Grow 3</div>
</div>

Shrink - Child

Sets the flex-shrink property on a flex child.

<div class="flex">
    <div class="width--25 flex-shrink--0">Width: 25% // Shrink 0</div>
    <div class="width--25">Width: 25%</div>
    <div class="width--25">Width: 25%</div>
    <div class="width--25">Width: 25%</div>
    <div class="width--25">Width: 25%</div>
</div>

<div class="flex">
    <div class="width--25 flex-shrink--0">Width: 50% // Shrink 0</div>
    <div class="width--25 flex-shrink--1">Width: 25% // Shrink 1</div>
    <div class="width--25 flex-shrink--2">Width: 25% // Shrink 2</div>
    <div class="width--25 flex-shrink--3">Width: 25% // Shrink 3</div>
</div>

Font

These utilities affect the font styling on an element.

Font Style

Sets the font-style property on an element.

<span class="font-style--italic">italic</span>

Font Weight

Sets the font-weight property on an element.

<span class="font-weight--100">100</span>
<span class="font-weight--200">200</span>
<span class="font-weight--300">300</span>
<span class="font-weight--400">400</span>
<span class="font-weight--500">500</span>
<span class="font-weight--600">600</span>
<span class="font-weight--700">700</span>
<span class="font-weight--light">light</span>
<span class="font-weight--normal">normal</span>
<span class="font-weight--bold">bold</span>

Font Size

Sets the font-size property on an element.

<span class="font-size--xs">Extra Small</span>
<span class="font-size--sm">Small</span>
<span class="font-size--md">Medium</span>
<span class="font-size--lg">Large</span>
<span class="font-size--xl">Extra Large</span>

Spacing

Spacing utilities are built for both padding and margin. The CSS classes are built using the pattern: {property}-{direction}--{size}.

<div class="mar-top--md">
    <div class="code-example-box pad-top--25"></div>
    <div class="code-example-box pad-bottom--0"></div>
    <div class="code-example-box mar-left--md"></div>
    <div class="code-example-box mar--lg"></div>
</div>

Property

Direction

Size

In addition to setting a spacing property on an individual element, there are also classes to space all direct descendants of an element. These are called child spacing classes and can be applied by adding child after the spacing property: mar-child--md or pad-child-bottom--sm. All directions and sizes are available, save for the percentages (since spacing percentages are reserved for an individual element).

<div class="pad-child--sm">
    <span>Small Padding</span>
    <span>Small Padding</span>
    <span>Small Padding</span>
    <span>Small Padding</span>
    <span>Small Padding</span>
    <span>Small Padding</span>
</div>

Text

These utilities affect the text styling on an element.

Text align

Sets the text-align property on an element.

<div class="text--left">Align Left</div>
<div class="text--center">Align Center</div>
<div class="text--right">Align Right</div>

Text transform

Sets the text-transform property on an element.

<div class="text--lowercase">Lowercase</div>
<div class="text--uppercase">Uppercase</div>
<div class="text--capitalize">Capitalize</div>

Text decoration

Sets the text-decoration property on an element.

<div class="border--all text--underline">Underline</div>
<div class="border--all text--no-decoration">No Decoration</div>

White space

Sets the white-space property on an element.

<div class="border--all text--nowrap">...</div>

Truncation

Whenever there is a limited amount of space for text to fit in and we need to apply truncation logic to the element containing the text, use this class.

NOTE: Depending on the elements being used and overall page structure, it might be necessary to add a fixed width to the element to truncate to ensure it doesn't overflow its container (see the second example below).

<div class="text--truncate">(TRUNCATED)</div>
<div class="text--truncate width--50">(TRUNCATED - FIXED WIDTH)</div>
<div>(NON-TRUNCATED)</div>

Width

These utilities affect the width on an element.

<div class="border--all width--sm">Width Small</div>
<div class="border--all width--md">Width Medium</div>
<div class="border--all width--lg">Width Large</div>

<div class="border--all width--25">Width 25%</div>
<div class="border--all width--50">Width 50%</div>
<div class="border--all width--75">Width 75%</div>

Misc

Additional classes that do not fit in a category of their own.

Position relative

Many times before positioning an element absolutely, the parent element will need to be set to have a position of relative.

<div class="pos--relative"></div>

Vertical align

If you are not using flexbox and need to vertically align two elements, use the vertical align class.

NOTE: This utility class only applies the vertical-align: middle; CSS property and only works on inline or inline-block elements that are siblings of each other. Please keep this in mind when troubleshooting this functionality. For more information on this property (and some helpful troubleshooting tips), please see this article.

<div class="parent-element">
    <span class="valign--middle">Inline element</span>
    <span class="valign--middle">Inline-block element with quite a bit more text than the first child.</span>
</div>

Resetting HTML elements

The utility class iris-content normalizes elements and provides a much more opinionated typographic style to content affecting font weights, sizes, decorators, margins and paddings. This can be used to provide normalized Iris typography after a third party CSS reset has been used. The most common example of this can be seen with list elements:

<ul class="iris-content">
    <li>Use the iris-content</li>
    <li>Class on the ul</li>
    <li>To add those</li>
    <li>Styles back in</li>
</ul>

Whenever something looks to be reset or stripped of its browser styling that needs to be added back, simply apply the iris-content class.