Utilities 5.0

Handful of utility classes. Just a quick reminder: breakpoint modifiers are sm (<750 px), md (>750 px), lg (>1200 px).

Background 5.1

Default styling

  • bg-red--light
  • bg-red
  • bg-red--dark
  • bg-blue--light
  • bg-blue
  • bg-blue--dark
  • bg-green--lightest
  • bg-green--light
  • bg-green
  • bg-green--dark
  • bg-orange
  • bg-orange--dark
  • bg-white
  • bg-gray-100
  • bg-gray-200
  • bg-gray-300
  • bg-gray-400
  • bg-gray-500
  • bg-gray-600
  • bg-gray-700
  • bg-gray-800
  • bg-gray-900
  • bg-black
<ul class="list-unstyled text-white font-monospace">
    <li class="bg-red--light">bg-red--light</li>
    <li class="bg-red">bg-red</li>
    <li class="bg-red--dark">bg-red--dark</li>
    <li class="bg-blue--light">bg-blue--light</li>
    <li class="bg-blue">bg-blue</li>
    <li class="bg-blue--dark">bg-blue--dark</li>
    <li class="bg-green--lightest">bg-green--lightest</li>
    <li class="bg-green--light">bg-green--light</li>
    <li class="bg-green">bg-green</li>
    <li class="bg-green--dark">bg-green--dark</li>
    <li class="bg-orange">bg-orange</li>
    <li class="bg-orange--dark">bg-orange--dark</li>
    <li class="bg-white">bg-white</li>
    <li class="bg-gray-100 text-teamio-dark">bg-gray-100</li>
    <li class="bg-gray-200 text-teamio-dark">bg-gray-200</li>
    <li class="bg-gray-300 text-teamio-dark">bg-gray-300</li>
    <li class="bg-gray-400 text-teamio-dark">bg-gray-400</li>
    <li class="bg-gray-500">bg-gray-500</li>
    <li class="bg-gray-600">bg-gray-600</li>
    <li class="bg-gray-700">bg-gray-700</li>
    <li class="bg-gray-800">bg-gray-800</li>
    <li class="bg-gray-900">bg-gray-900</li>
    <li class="bg-black">bg-black</li>
</ul>

Border 5.2

Available classes: border-none, border-top/right/bottom/left + color modifier

Default styling

border-none

border-top border-top-error

border-top border-top-gray

border-top border-top-gray--light

border-top border-top-gray--lighter

border-top border-top-gray--lightest

<div class="bg-white font-monospace">
    <p class="border-none" style="border: 1px solid red;">border-none</p>
    <p class="border-top border-top-error">border-top border-top-error</p>
    <p class="border-top border-top-gray">border-top border-top-gray</p>
    <p class="border-top border-top-gray--light">border-top border-top-gray--light</p>
    <p class="border-top border-top-gray--lighter">border-top border-top-gray--lighter</p>
    <p class="border-top border-top-gray--lightest">border-top border-top-gray--lightest</p>
</div>

Display 5.3

Available classes: block/inline-block/inline (+ breakpoint modifier)

Default styling

block

block--sm

block--md

block--lg

<div class="font-monospace">
    <p><span class="block bg-gray-300">block</span></p>
    <p><span class="block--sm bg-gray-300">block--sm</span></p>
    <p><span class="block--md bg-gray-300">block--md</span></p>
    <p><span class="block--lg bg-gray-300">block--lg</span></p>
</div>

Embed 5.4

Responsive video wrapper. Available modifiers: embed-responsive-16by9, embed-responsive-4by3

Default styling

<div style="max-width: 600px;">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/zihI6liAPTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

Float 5.5

Available classes: pull-none/left/right (+ breakpoint modifier), clear-left/right (+ breakpoint modifier)

Default styling

pull-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac lorem mollis, auctor lacus eu, faucibus velit. Mauris non erat non nunc cursus consectetur. Morbi viverra maximus lectus, quis pulvinar massa porttitor sollicitudin. Aenean cursus venenatis placerat. Maecenas erat orci, placerat a consequat eget, pretium at sapien.

pull-right-lg

Integer quis urna at magna tristique vehicula ut bibendum velit. Praesent et condimentum libero, sit amet porta leo. Morbi et venenatis libero. Quisque non magna non massa convallis tristique.

<div>
    <p class="bg-gray-300 pull-left" style="padding: 1em;">pull-left</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac lorem mollis, auctor lacus eu, faucibus velit. Mauris non erat non nunc cursus consectetur. Morbi viverra maximus lectus, quis pulvinar massa porttitor sollicitudin. Aenean cursus venenatis placerat. Maecenas erat orci, placerat a consequat eget, pretium at sapien.</p>
    <p class="bg-gray-300 pull-right-lg" style="padding: 1em;">pull-right-lg</p>
    <p>Integer quis urna at magna tristique vehicula ut bibendum velit. Praesent et condimentum libero, sit amet porta leo. Morbi et venenatis libero. Quisque non magna non massa convallis tristique.</p>
</div>
<div class="clear"></div>

Image 5.6

Responsive image scales down with its container.

Default styling

<div style="max-width: 300px;">
    <img src="dist/images/cand-photo.jpg" width="400" alt="" class="img-responsive">
</div>

Link 5.7

Several link variations.

Default styling

<p><a href="#">Default link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link--no-underline">Link without decoration</a></p>

Opacity 5.8

Available classes: opacity-0/1

Default styling

secret – opacity-0

secret – opacity-1

<div class="font-monospace">
    <p><span class="opacity-0">secret</span> – opacity-0</p>
    <p><span class="opacity-1">secret</span> – opacity-1</p>
</div>

Overflow 5.9

Available classes: overflow-auto/hidden

Default styling

float
overflow initial

float
overflow-auto

float
overflow-hidden
<div class="font-monospace">
    <div class="bg-gray-300"><div class="bg-gray-400 pull-left" style="padding: 1em; height: 4em;">float</div> overflow initial</div>
    <div class="clear"><br></div>
    <div class="bg-gray-300 overflow-auto"><div class="bg-gray-400 pull-left" style="padding: 1em; height: 4em;">float</div> overflow-auto</div>
    <div class="clear"><br></div>
    <div class="bg-gray-300 overflow-hidden" style="height: 2.5em;"><div class="bg-gray-400 pull-left" style="padding: 1em; height: 4em;">float</div> overflow-hidden</div>
</div>

Pointer events 5.10

Available classes: pointer-events-none/auto

Default styling

Anything inside this paragraph in not clickable. But this link is an exception.

<p class="pointer-events-none"><a href="#">Anything</a> inside this <a href="#">paragraph</a> in not clickable. But <a href="#" class="pointer-events-auto">this link is an exception</a>.</p>

Position 5.11

Available classes: relative, sticky-top, sticky-bottom

Default styling

I'm relative parent. position: absolute

sticky-top
sticky-bottom
<div class="relative bg-gray-300 font-monospace" style="height: 100px;">
    I'm relative parent.
    <span class="bg-gray-400" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 1em;">position: absolute</span>
</div>
<br>
<div class="relative font-monospace">
    <div class="sticky-top bg-gray-400">sticky-top</div>
    <div class="bg-gray-300" style="height: 100px;"></div>
    <div class="sticky-bottom bg-gray-400">sticky-bottom</div>
</div>

Shadow 5.12

Available classes: shadow-sm, shadow-lg, no-shadow

Default styling

shadow-sm

shadow-lg

Ugly shadow

No more ugly shadow

<div class="font-monospace">
    <p class="shadow-sm">shadow-sm</p>
    <p class="shadow-lg">shadow-lg</p>
    <p style="box-shadow: 5px 5px 15px violet;">Ugly shadow</p>
    <p class="no-shadow" style="box-shadow: 5px 5px 15px violet;">No more ugly shadow</p>
</div>

Size 5.13

Utility classes for setting (max-)width and height.

Default styling

Width

  • full-width = 100%
  • width-auto = auto
  • width-50px/100px/150px... 500px = width in pixels
  • width-u-6/u-7/u-8... u-12 = width in fibonacci sequence

Max-width

  • mw-25/50/75/100 = max-width in percentage
  • mw-50px/100px/150px... 1200px = max-width in pixels

Height

  • full-height = 100%
  • height-auto = auto
  • height-50px/100px/150px/200px = height in pixels
  • height-u-6/u-7/u-8... u-12 = height in fibonacci sequence
<p><strong>Width</strong></p>
<ul class="list-unstyled font-monospace">
    <li>full-width = 100%</li>
    <li>width-auto = auto</li>
    <li>width-50px/100px/150px... 500px = width in pixels</li>
    <li>width-u-6/u-7/u-8... u-12 = width in fibonacci sequence</li>
</ul>
<p><strong>Max-width</strong></p>
<ul class="list-unstyled font-monospace">
    <li>mw-25/50/75/100 = max-width in percentage</li>
    <li>mw-50px/100px/150px... 1200px = max-width in pixels</li>
</ul>
<p><strong>Height</strong></p>
<ul class="list-unstyled font-monospace">
    <li>full-height = 100%</li>
    <li>height-auto = auto</li>
    <li>height-50px/100px/150px/200px = height in pixels</li>
    <li>height-u-6/u-7/u-8... u-12 = height in fibonacci sequence</li>
</ul>

Space 5.14

Spacing utility classes defined up to @u-12. See Fibonacci Sequence.
Examples of responsive variants: ml--u-6-md, ml--u-6-lg

Default styling

Margin

  • m--u-1... u-12, auto = margin
  • mx--u-1... u-12, auto = margin-left & margin-right
  • my--u-1... u-12 = margin-top & margin-bottom
  • mt--u-1... u-12, auto = margin-top
  • ml--u-1... u-12, auto, checkbox, radio, switch, profile-photo, logo-block = margin-left
  • mr--u-1... u-12, auto = margin-right
  • mb--u-1... u-12, auto = margin-bottom

Padding

  • p--u-1... u-12 = padding
  • px--u-1... u-12 = padding-left & padding-right
  • py--u-1... u-12 = padding-top & padding-bottom
  • pt--u-1... u-12 = padding-top
  • pl--u-1... u-12 = padding-left
  • pr--u-1... u-12 = padding-right
  • pb--u-1... u-12 = padding-bottom
<p><strong>Margin</strong></p>
<ul class="list-unstyled font-monospace">
    <li>m--u-1... u-12, auto = margin</li>
    <li>mx--u-1... u-12, auto = margin-left & margin-right</li>
    <li>my--u-1... u-12 = margin-top & margin-bottom</li>
    <li>mt--u-1... u-12, auto = margin-top</li>
    <li>ml--u-1... u-12, auto, checkbox, radio, switch, profile-photo, logo-block = margin-left</li>
    <li>mr--u-1... u-12, auto = margin-right</li>
    <li>mb--u-1... u-12, auto = margin-bottom</li>
</ul>
<p><strong>Padding</strong></p>
<ul class="list-unstyled font-monospace">
    <li>p--u-1... u-12 = padding</li>
    <li>px--u-1... u-12 = padding-left & padding-right</li>
    <li>py--u-1... u-12 = padding-top & padding-bottom</li>
    <li>pt--u-1... u-12 = padding-top</li>
    <li>pl--u-1... u-12 = padding-left</li>
    <li>pr--u-1... u-12 = padding-right</li>
    <li>pb--u-1... u-12 = padding-bottom</li>
</ul>

Text 5.15

Utility classes for text color, text transform, text decoration, text align, font face, font size, font weight, line height, white space, ellipsis, prefix, preformatted.

Default styling

Text color

  • text-color-inherit
  • text-white
  • text-gray-100
  • text-gray-200
  • text-gray-300
  • text-gray-400
  • text-gray-500
  • text-gray-600
  • text-gray-700
  • text-gray-800
  • text-gray-900
  • text-error
  • text-teamio-dark
  • text-teamio-pink
  • text-teamio-blue
  • text-pzr-primary
  • text-pzr-secondary
  • text-red--light
  • text-red
  • text-red--dark
  • text-orange
  • text-orange--dark
  • text-yellow
  • text-green--light
  • text-green
  • text-green--dark

Text transform

  • Text-No-Transform
  • Text-Lowercase
  • Text-Uppercase

Text decoration

  • text-underline
  • text-no-decoration

Text align

Responsive variants: *-sm, *-md, *-lg

  • text-left
  • text-center
  • text-right

Font face

  • font-base – Open Sans
  • font-teamio – VAG Rundschrift D

Font size

  • text-xsmall
  • text-small
  • text-base
  • text-larger
  • text-large
  • text-xlarge

Font weight

  • text-light
  • text-normal
  • text-semibold
  • text-bold

Line height

  • line-height-base

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.

  • line-height-small

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.

  • line-height-xsmall

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.

White space

  • text-wrap

    Loremipsumdolorsitamet, consecteturadipiscingelit.

  • text-nowrap

    Loremipsumdolorsitamet, consecteturadipiscingelit.

  • text-break-word

    Loremipsumdolorsitamet, consecteturadipiscingelit.

Ellipsis

  • ellipsis

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.

Prefix

  • prefix-dash

Preformatted

  • preformatted

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.

<p><strong>Text color</strong></p>
<ul class="list-unstyled font-monospace bg-white">
    <li class="text-color-inherit">text-color-inherit</li>
    <li class="text-white"><span class="bg-gray-500">text-white</span></li>
    <li class="text-gray-100">text-gray-100</li>
    <li class="text-gray-200">text-gray-200</li>
    <li class="text-gray-300">text-gray-300</li>
    <li class="text-gray-400">text-gray-400</li>
    <li class="text-gray-500">text-gray-500</li>
    <li class="text-gray-600">text-gray-600</li>
    <li class="text-gray-700">text-gray-700</li>
    <li class="text-gray-800">text-gray-800</li>
    <li class="text-gray-900">text-gray-900</li>
    <li class="text-error">text-error</li>
    <li class="text-teamio-dark">text-teamio-dark</li>
    <li class="text-teamio-pink">text-teamio-pink</li>
    <li class="text-teamio-blue">text-teamio-blue</li>
    <li class="text-pzr-primary">text-pzr-primary</li>
    <li class="text-pzr-secondary">text-pzr-secondary</li>
    <li class="text-red--light">text-red--light</li>
    <li class="text-red">text-red</li>
    <li class="text-red--dark">text-red--dark</li>
    <li class="text-orange">text-orange</li>
    <li class="text-orange--dark">text-orange--dark</li>
    <li class="text-yellow">text-yellow</li>
    <li class="text-green--light">text-green--light</li>
    <li class="text-green">text-green</li>
    <li class="text-green--dark">text-green--dark</li>
</ul>
<p><strong>Text transform</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="text-no-transform">Text-No-Transform</li>
    <li class="text-lowercase">Text-Lowercase</li>
    <li class="text-uppercase">Text-Uppercase</li>
</ul>
<p><strong>Text decoration</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="text-underline">text-underline</li>
    <li class="text-no-decoration" style="text-decoration: line-through;">text-no-decoration</li>
</ul>
<p><strong>Text align</strong></p>
<p>Responsive variants: *<strong>-sm</strong>, *<strong>-md</strong>, *<strong>-lg</strong>
<ul class="list-unstyled font-monospace">
    <li class="text-left">text-left</li>
    <li class="text-center">text-center</li>
    <li class="text-right">text-right</li>
</ul>
<p><strong>Font face</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="font-base">font-base – Open Sans</li>
    <li class="font-teamio">font-teamio – VAG Rundschrift D</li>
</ul>
<p><strong>Font size</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="text-xsmall">text-xsmall</li>
    <li class="text-small">text-small</li>
    <li class="text-base">text-base</li>
    <li class="text-larger">text-larger</li>
    <li class="text-large">text-large</li>
    <li class="text-xlarge">text-xlarge</li>
</ul>
<p><strong>Font weight</strong></p>
<ul class="list-unstyled">
    <li class="text-light">text-light</li>
    <li class="text-normal">text-normal</li>
    <li class="text-semibold">text-semibold</li>
    <li class="text-bold">text-bold</li>
</ul>
<p><strong>Line height</strong></p>
<ul class="list-unstyled">
    <li class="line-height-base"><span class="font-monospace">line-height-base</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
    <li class="line-height-small"><span class="font-monospace">line-height-small</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
    <li class="line-height-xsmall"><span class="font-monospace">line-height-xsmall</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
</ul>
<p><strong>White space</strong></p>
<ul class="list-unstyled mw-150px">
    <li class="text-wrap"><span class="font-monospace">text-wrap</span>
        <p style="word-wrap: normal;">Loremipsumdolorsitamet, consecteturadipiscingelit.</p>
    </li>
    <li class="text-nowrap"><span class="font-monospace">text-nowrap</span>
        <p>Loremipsumdolorsitamet, consecteturadipiscingelit.</p>
    </li>
    <li class="text-break-word"><span class="font-monospace">text-break-word</span>
        <p>Loremipsumdolorsitamet, consecteturadipiscingelit.</p>
    </li>
</ul>
<p><strong>Ellipsis</strong></p>
<ul class="list-unstyled">
    <li><span class="font-monospace">ellipsis</span>
    <p class="ellipsis mw-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
</ul>
<p><strong>Prefix</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="prefix-dash">prefix-dash</li>
</ul>
<p><strong>Preformatted</strong></p>
<ul class="list-unstyled">
    <li><span class="font-monospace">preformatted</span>
        <p class="preformatted">Lorem ipsum
         dolor sit amet,
         consectetur
         adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
    </li>
</ul>

Vertical align 5.16

Available classes: valign-top/middle/bottom/baseline

Default styling

Text valign-baseline valign-top valign-middle valign-bottom

<p class="text-xlarge bg-gray-300">Text
    <span class="text-small valign-baseline">valign-baseline</span>
    <span class="text-small valign-top">valign-top</span>
    <span class="text-small valign-middle">valign-middle</span>
    <span class="text-small valign-bottom">valign-bottom</span>
</p>

Cursor 5.17

Available classes: cursor-pointer

Default styling

cursor-pointer

<p class="cursor-pointer">cursor-pointer</p>

User select 5.18

Available classes: user-select-none

Default styling

user-select-none

<p class="user-select-none">user-select-none</p>

Border radius 5.19

Available classes: rounded-1... 8 (corresponds to fibonacci sequence), circle

Default styling

rounded-1

rounded-2

rounded-3

rounded-4

rounded-5

rounded-6

rounded-7

rounded-8

rounded-circle

<div class="font-monospace">
    <p class="rounded-1" style="padding: 13px; background-color: #fff;">rounded-1</p>
    <p class="rounded-2" style="padding: 13px; background-color: #fff;">rounded-2</p>
    <p class="rounded-3" style="padding: 13px; background-color: #fff;">rounded-3</p>
    <p class="rounded-4" style="padding: 13px; background-color: #fff;">rounded-4</p>
    <p class="rounded-5" style="padding: 13px; background-color: #fff;">rounded-5</p>
    <p class="rounded-6" style="padding: 13px; background-color: #fff;">rounded-6</p>
    <p class="rounded-7" style="padding: 13px; background-color: #fff;">rounded-7</p>
    <p class="rounded-8" style="padding: 13px; background-color: #fff;">rounded-8</p>
    <p class="rounded-circle" style="padding: 13px; background-color: #fff;">rounded-circle</p>
</div>

Gap 5.20

Available classes: gap-y-1... 8 (corresponds to fibonacci sequence)

Default styling

Block
Block
Block
<div class="font-monospace gap-y-6">
  <div class="bg-white">Block</div>
  <div class="bg-white">Block</div>
  <div class="bg-white">Block</div>
</div>

Scrollbar 5.21

Available classes: scrollbar-x, scrollbar-y

Default styling

<div class="scrollbar-y" style="height: 200px; margin-bottom: 20px;">
    <div style="height: 200%; background: linear-gradient(to bottom, white, gray);"></div>
</div>
<div class="scrollbar-x" style="height: 200px;">
    <div style="width: 200%; height: 100%; background: linear-gradient(to right, white, gray);"></div>
</div>