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-semiboldtext semibold
.text-lighttext light
.text-italictext italic
.text-normaltext 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-semibold">text semibold</span>
  <span class="text-light">text light</span>
  <span class="text-italic">text italic</span>
  <span class="text-normal">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
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>
</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 resets

Use .no-pad or .no-mrg to reset margins or paddings. Target specific breakpoint with .no-mrg-[xs/s/m/xl] and .no-pad-[xs/s/m/xl].

Code:
<div class="no-mrg"> reset margins </div>
<div class="no-mrg-top"> reset top margin </div>
<div class="no-mrg-bottom"> reset bottom margin </div>
<div class="no-mrg-left"> reset left margin </div>
<div class="no-mrg-right"> reset right margin </div>
<div class="no-mrg-vertical"> reset top and bottom margin </div>
<div class="no-mrg-horizontal"> reset left and right margin </div>

<div class="no-pad"> reset padding </div>
<div class="no-pad-top"> reset padding-top </div>
<div class="no-pad-bottom"> reset padding-bottom </div>
<div class="no-pad-left"> reset left padding </div>
<div class="no-pad-right"> reset right padding </div>
<div class="no-pad-vertical"> reset top and bottom padding </div>
<div class="no-pad-horizontal"> reset left and right 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
XS3
XS3
.align-items-center
XS3
XS3
.align-items-spaced
XS3
XS3
.align-items-justify
XS3
XS3
XS3
XS3 .align-self-right
XS3 .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
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-bottom
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-middle
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
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.

Visibility utilites

You can programatically show or hide elements for specific layouts by using classes like .hide-[breakpoint]-only or for all layouts larger including specified by classes like .show-[breakpoint].

Note

.hide-xs, .show-xs are not available, as XS is the default breakpoint. To hide an element completely, use .hide

.show-xl-only, .hide-xl-only are not available, as XL is the largest breakpoint. The same can be accomplished using .show-xl, .hide-xl

Example:
Active layout:XSSMLXL
XS
.show-xs-only
Your screen is smaller than S
.hide-xs-only
Your screen is larger than S
S
.show-s
Your screen is S or larger
.show-s-only
Your screen is larger than S and smaller than M
.hide-s
Your screen is smaller than S
.hide-s-only
Your screen is either smaller than S or larger than M
M
.show-m
Your screen is M or larger
.show-m-only
Your screen is larger than M and smaller than L
.hide-m
Your screen is smaller than M
.hide-m-only
Your screen is either smaller than M or larger than L
L
.show-l
Your screen is L or larger
.show-l-only
Your screen is larger than L and smaller than XL
.hide-l
Your screen is smaller than L
.hide-l-only
Your screen is either smaller than L or larger than XL
XL
.show-xl
Your screen is XL or larger
.hide-xl
Your screen is smaller than XL

Other utilites

Various other utilites contains:

  • .clickable for making pointer cursor.
  • .visually-hidden for hidding element visually without display: none;.