Utilities

Files

app/styles/tools/_utilities.scss

Typography utilities

Text utility classes provides basic functionality such as alignment or text transform. There are also utility classes for text colors.

Note

Always consider using semantic HTML when styling text (strong, em).

Example:

.text-boldtext bold
.text-lighttext light
.text-italictext italic
.text-regulartext normal

.text-left

.text-center

.text-right

.text-justifyLorem ea dolor ea exercitation et esse incididunt ut Excepteur officia Ut sint cupidatat cupidatat

Icon with .text-vam

Icon with .text-vat

Icon with .text-vab

Icon with .text-vabl

.text-transform-uppertext transform uppercase
.text-transform-capitalizetext transform capitalize
.text-transform-nonetext transform none

.text-space-half

.text-nospace

Text with space on left side.text-space-left

Text with space on right side.text-space-right

.text-nowrapText no warp ea dolor ea exercitation et esse incididunt ut Excepteur officia. Tempor officia minim cillum do aute nulla sint dolor Lorem proident nisi elit.

.text-ellipsisText ellipsis

Code:

<p>
  <span class="text-bold">text bold</span>
  <span class="text-bold">text semibold</span>
  <span class="text-light">text light</span>
  <span class="text-italic">text italic</span>
  <span class="text-regular">text normal</span>
</p>

<p class="text-left">...</p>
<p class="text-center">...</p>
<p class="text-right">...</p>
<p class="text-justify">...</p>

<p>... <svg class="icon text-vam"></svg> ...</p>
<p>... <svg class="icon text-vat"></svg> ...</p>
<p>... <svg class="icon text-vab"></svg> ...</p>
<p>... <svg class="icon text-vabl"></svg> ...</p>

<span class="text-transform-upper">text transform uppercase</span>
<span class="text-transform-capitalize">text transform capitalize</span>
<span class="text-transform-none">text transform none</span>

<p class="text-space-half">text space half</p>
<p class="text-nospace">text nospace</p>
<p class="text-nospace">
  ...
  <span class="text-space-left">text space left</span>
  <span class="text-space-right">text space right</span>
</p>

<p class="text-nowrap">...</p>
<p class="text-ellipsis">...</p>

Text colors

Example:

theme-500
theme-400
theme-100
black
semiblack
grey
grey-800
white
semiwhite
error
warning
text-inactive

Code:

<ul>
  <li><span class="text-color-theme-500">theme-500</span></li>
  <li><span class="text-color-theme-400">theme-400</span></li>
  <li><span class="text-color-theme-100">theme-100</span></li>
  <li><span class="text-color-black">black</span></li>
  <li><span class="text-color-semiblack">semiblack</span></li>
  <li><span class="text-color-grey">grey</span></li>
  <li><span class="text-color-grey-800">grey-800</span></li>
  <li><span class="text-color-white">white</span></li>
  <li><span class="text-color-semiwhite">semiwhite</span></li>
  <li><span class="text-color-error">error</span></li>
  <li><span class="text-inactive">inactive</span></li>
</ul>

Layout utilities

Layout utilities contains basic classes for utility like margin/padding resets, alignements etc.

Some utilities can be set for specific breakpoint by adding postfix representing layout.

Spacing utilities

To adjust vertical spacing, use `.mb, .mb-small, .mb-large and .mb-none classes.

Resetting any other direction is easy with .m[direction]-none and .p[direction]-none.

Use .m[direction]-[size] or .p[direction]-[size] to apply margins or paddings.

Code:

<div class="mb">default bottom margin</div>
<div class="mb-medium">medium bottom margin</div>
<div class="mb-large">large bottom margin</div>

<div class="mt-none">no top margin</div>
<div class="ml-none">no left margin</div>
<div class="mr-none">no right margin</div>
<div class="mb-none">no bottom margin</div>

<div class="pt-none">no top padding</div>
<div class="pl-none">no left padding</div>
<div class="pr-none">no right padding</div>
<div class="pb-none">no bottom padding</div>

Flexbox alignment

Flexbox items are aligned to left by default and take up the height of the row. This behavior can be overriden on both column and row level.

Note

Alignment utilities can be used only inside flexbox components such as Grid, Bars etc. or custom flexbox components.

Note

Examples are shown on grid elements.

Horizontal alignment:

.align-items-right .align-items-center
.align-self-right .align-self-center

Example:

.align-items-right

.align-items-center

.align-items-spaced

.align-items-justify

3 .align-self-right

3 .align-self-center

Code:

<div class="row align-items-right">
  <div class="col--3"> ... </div>
  <div class="col--3"> ... </div>
</div>

<div class="row align-items-center">
  <div class="col--3"> ... </div>
  <div class="col--3"> ... </div>
</div>

<div class="row align-items-spaced">
  <div class="col--3"> ... </div>
  <div class="col--3"> ... </div>
</div>

<div class="row align-items-justify">
  <div class="col--3"> ... </div>
  <div class="col--3"> ... </div>
</div>

<div class="row">
  <div class="col--3"> ... </div>
  <div class="col--3 align-self-right"> ... </div>
</div>

<div class="row">
  <div class="col--3 align-self-center"> ... </div>
</div>

Vertical alignment:

.align-items-top .align-items-bottom .align-items-middle
.align-self-top .align-self-bottom .align-self-middle

Example:

.row

Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lorem ipsum

.align-items-top

Lorem ipsum

.align-items-bottom

Lorem ipsum

.align-items-middle

Lorem ipsum

Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

.align-self-top

.align-self-bottom

.align-self-middle

Code:

<div class="row">
  <div class="col--6"> ... </div>
  <div class="col--6"> ... </div>
</div>

<div class="row align-items-top">
  <div class="col--6"> ... </div>
  <div class="col--6"> ... </div>
</div>

<div class="row align-items-bottom">
  <div class="col--6"> ... </div>
  <div class="col--6"> ... </div>
</div>

<div class="row align-items-middle">
  <div class="col--6"> ... </div>
  <div class="col--6"> ... </div>
</div>

<div class="row">
  <div class="col--3"> ... </div>
  <div class="col--3 align-self-top"> ... </div>
  <div class="col--3 align-self-bottom"> ... </div>
  <div class="col--3 align-self-middle"> ... </div>
</div>

Float utilities

Float utilites contains:

.clearfix for clearing floats inside container.
.clear for clearing floats after floated elements.

Border utilities

Border utilites contains:

Code:

<div class="row">
  <div class="col--3 border-top"> ... </div>
  <div class="col--3 border-right"> ... </div>
  <div class="col--3 border-bottom"> ... </div>
  <div class="col--3 border-left"> ... </div>
</div>

Visibility utilities

Visibility utilities:

.visually-hidden for hidding element visually without display: none;.
.invisible for setting hidden visibility.
.hide for hidding completely element.
.is-expanded/.is-collapsed used with .show-expanded/.show-collapsed show/hide elements based on their ancestor state.

Other utilites

Various other utilites contains:

.clickable for making pointer cursor.