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
).
.text-bold
text bold.text-semibold
text semibold.text-light
text light.text-italic
text italic.text-normal
text normal
.text-left
.text-center
.text-right
.text-justify
Lorem 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-upper
text transform uppercase.text-transform-capitalize
text transform capitalize.text-transform-none
text 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-nowrap
Text 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-ellipsis
Text ellipsis
<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
- theme-500
- theme-400
- theme-100
- black
- semiblack
- grey
- grey-800
- white
- semiwhite
- error
<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]
.
<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
.align-items-right
.align-items-center
.align-items-spaced
.align-items-justify
<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
.row
.align-items-top
.align-items-bottom
.align-items-middle
<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
.show-xs-only
.show-s
.show-s-only
.show-m
.show-m-only
.show-l
.show-l-only
.show-xl
Other utilites
Various other utilites contains:
.clickable
for making pointer cursor..visually-hidden
for hidding element visually withoutdisplay: none;
.