Utility Classes

Utility classes are the core of the Iris framework that provides flexibility when building layouts or working with components.

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

caution #C45413
info #4371AD
negative #C11826
positive #307B21
neutral-1 #333333
neutral-2 #707070
neutral-3 #C5C5C5
neutral-4 #E0E0E0
neutral-5 #F5F5F5
dark #000000
light #FFFFFF
theme-primary
theme-secondary

Background Color

Sets the background-color property on an element.

1
2
3
4
5
<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>
Syntax Description
bg-color--<color-modifier> Classes affecting the background-color property on an element
hover-bg-color--<color-modifier> Classes affecting the background-color property when hovering on an element

Border Color

Sets the border-color property on an element.

1
2
3
4
5
<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>
Syntax Description
border-color--<color-modifier> Classes affecting the border-color property on an element
border-top-color--<color-modifier> Classes affecting the border-top-color property on an element
border-right-color--<color-modifier> Classes affecting the border-right-color property on an element
border-bottom-color--<color-modifier> Classes affecting the border-bottom-color property on an element
border-left-color--<color-modifier> Classes affecting the border-left-color property on an element
hover-border-color--<color-modifier> Classes affecting the border-color property when hovering on an element
hover-border-<pos>--<color-modifier> Classes affecting the border-<position>-color property when hovering on an element

Font Color

Sets the color property on an element.

neutral-1 neutral-2 positive negative caution info light dark
<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>
Syntax Description
font-color--<color-modifier> Classes affecting the color property on an element
hover-font-color--<color-modifier> Classes affecting the color property when hovering on an element

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>
Modifier Value
0 None
xs 2px
sm 3px
md 5px
lg 10px
max 9999px
100 100%

Display

Sets the display property on any element.

Block
Block
<div class="block">Block</div>
<div class="block">Block</div>
Inline-block
Inline-block
<div class="inline-block">Inline-block</div>
<div class="inline-block">Inline-block</div>
Flex
Flex
<div class="flex">Flex</div>
<div class="flex">Flex</div>
Inline-flex
Inline-flex
<div class="inline-flex">Inline-flex</div>
<div class="inline-flex">Inline-flex</div>
Modifier Value
block block
inline-block inline-block
flex flex
inline-flex inline-flex

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.

1
2
3
4
5
6
7
<div class="flex flex--row">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex--row-reverse">
    ...
</div>
1
2
3
<div class="flex flex--col">
    ...
</div>
1
2
3
<div class="flex flex--col-reverse">
    ...
</div>
Modifier Value
row row
row-reverse row-reverse
col column
col-reverse column-reverse

Justify

Sets the justify-content property on a flex parent.

1
2
3
4
5
6
7
<div class="flex flex-justify--start">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-justify--end">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-justify--center">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-justify--between">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-justify--around">
    ...
</div>
Modifier Value
start flex-start
end flex-end
center center
between space-between
around space-around

Align

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

Content

Sets the align-content property on a flex parent.

1
2
3
4
5
6
<div class="flex flex-content--start">
    ...
</div>
1
2
3
4
5
6
<div class="flex flex-content--end">
    ...
</div>
1
2
3
4
5
6
<div class="flex flex-content--center">
    ...
</div>
1
2
3
4
5
6
<div class="flex flex-content--between">
    ...
</div>
1
2
3
4
5
6
<div class="flex flex-content--around">
    ...
</div>
Modifier Value
start flex-start
end flex-end
center center
between space-between
around space-around

Items

Sets the align-items property on a flex parent.

1
2
3
4
5
6
7
<div class="flex flex-items--start">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-items--end">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-items--center">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-items--baseline">
    ...
</div>
1
2
3
4
5
6
7
<div class="flex flex-items--stretch">
    ...
</div>
Modifier Value
start flex-start
end flex-end
center center
baseline baseline
stretch stretch

Self - Child

Sets the align-self property on a flex child.

Flex Child
<div class="flex">
    <div class="flex-self--start">Flex Child</div>
</div>
Flex Child
<div class="flex">
    <div class="flex-self--end">Flex Child</div>
</div>
Flex Child
<div class="flex">
    <div class="flex-self--center">Flex Child</div>
</div>
Flex Child
<div class="flex">
    <div class="flex-self--baseline">Flex Child</div>
</div>
Flex Child
<div class="flex">
    <div class="flex-self--stretch">Flex Child</div>
</div>
Modifier Value
start flex-start
end flex-end
center center
baseline baseline
stretch stretch

Wrap

Sets the flex-wrap property on a flex parent.

Width: 25%
Width: 25%
Width: 25%
Width: 25%
Width: 25%
Width: 25%
Width: 25%
<div class="flex flex--nowrap">
    ...
</div>
Width: 25%
Width: 25%
Width: 25%
Width: 25%
Width: 25%
Width: 25%
Width: 25%
<div class="flex flex--wrap">
    ...
</div>
Modifier Value
nowrap nowrap
wrap wrap

Grow - Child

Sets the flex-grow property on a flex child.

Width: 25% // Grow 1
Width: 25%
Width: 25%
<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>
Width: 25% // Grow 1
Width: 25% // Grow 2
<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>
Width: 25% // Grow 0
Width: 25% // Grow 1
Width: 25% // Grow 2
Width: 25% // Grow 3
<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>
Modifier Value
0 flex-grow: 0
1 flex-grow: 1
2 flex-grow: 2
3 flex-grow: 3

Shrink - Child

Sets the flex-shrink property on a flex child.

Width: 25% // Shrink 0
Width: 25%
Width: 25%
Width: 25%
Width: 25%
Width: 25%
<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>
Width: 50% // Shrink 0
Width: 25% // Shrink 1
Width: 25% // Shrink 2
Width: 25% // Shrink 3
<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>
Modifier Value
0 flex-shrink: 0
1 flex-shrink: 1
2 flex-shrink: 2
3 flex-shrink: 3

Font

These utilities affect the font styling on an element.

Font Style

Sets the font-style property on an element.

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

Font Weight

Sets the font-weight property on an element.

100 200 300 400 500 600 700 light normal bold
<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.

Extra Small Small Medium Large Extra Large
<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>
Size value
xs 14px
sm 16px
md 20px
lg 30px
xl 40px

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

Property Description
mar Classes affecting margin
pad Classes affecting padding

Direction

Direction Description
top Sets padding-top
bottom Sets padding-bottom
left Sets padding-left
right Sets padding-right
x Sets padding on the x-axis
y Sets padding on the y-axis
[blank] Sets padding on all sides

Size

Size Value
0 none
sm 5px
md 10px
lg 15px
xl 20px
25 25%
50 50%
75 75%
auto auto

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

1 2 3 4 5 6
<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.

Align Left
Align Center
Align Right
<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.

Lowercase
Uppercase
Capitalize
<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.

Underline
No Decoration
<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.

No wrap - With this property applied this text will not break no matter what. It will not become a new line, it will not continue to add height to an element, it will stay on one line. Forever.
<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).

(TRUNCATED) I'm an element that has a lot to say! I am certainly not concise and really am rather verbose and wordy. I actually really like words, and think they are a great way to communicate an idea to someone.
(TRUNCATED - FIXED WIDTH) I'm an element that has a lot to say! I am certainly not concise and really am rather verbose and wordy. I actually really like words, and think they are a great way to communicate an idea to someone.
(NON-TRUNCATED) I'm an element that has a lot to say! I am certainly not concise and really am rather verbose and wordy. I actually really like words, and think they are a great way to communicate an idea to someone.
<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.

Width Small
Width Medium
Width Large
<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>
Width 25%
Width 50%
Width 75%
<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>
Modifier Value
0 None
sm 260px
md 300px
lg 500px
25 25%
33 33%
50 50%
66 66%
75 75%
full 100%
auto auto

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.

Inline element Inline-block element with quite a bit more text than the first child.
<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:

  • If your
  • List elements
  • Are reset
  • By other CSS
  • Use the iris-content
  • Class on the ul
  • To add those
  • Styles back in
<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.