Updated on: 28 June 2017

Utilities

Classes to add certain styles or build custom blocks

Table of contents

  1. Background colour
  2. Width
  3. Height
  4. Margin
  5. Padding
  6. Visibility
  7. Ellipsis

Background colour

Apply a background colour to an element. Works with any of our colours. Font colour is set to light/dark depending on background colour.

Astral
Ship gray
Poppy
Mercury 

<div class="background--astral">
    Astral
</div>

<div class="background--ship-grey">
    Ship gray
</div>

<div class="background--poppy">
    Poppy
</div>

<div class="background--mercury">
    Mercury
</div>

Width

Set how many columns wide an element should be.

34 columns wide
10 columns wide only on small
25 columns wide on medium and up
48 columns wide on large 

<div class="background--abbey width--34">
    34 columns wide
</div>

<div class="background--iron-light width-sm--10">
    10 columns wide only on small
</div>

<div class="background--abbey width-md--25">
    25 columns wide on medium and up
</div>

<div class="background--iron-light width-lg--48">
    48 columns wide on large
</div>

Height

Set how many columns wide an element should be.

10 height
7 height only on small
10 height on medium and up
6 height on large 

<div class="background--abbey height--8">
    10 height
</div>

<div class="background--iron-light height-sm--7">
    7 height only on small
</div>

<div class="background--abbey height-md--10">
    10 height on medium and up
</div>

<div class="background--iron-light height-lg--6">
    6 height on large
</div>

Margin

Set margin on an element

Margin left 5
Margin top 3, only for small
Margin top and left on medium and up
Margin top, left and right on large 

<div class="background--abbey margin-left--5">
    Margin left 5
</div>

<div class="background--iron-light margin-top-sm--3">
    Margin top 3, only for small
</div>

<div class="background--abbey margin-top-md--4 margin-left-md--5">
    Margin top and left on medium and up
</div>

<div class="background--iron-light margin-top-lg--2 margin-left-lg--5 margin-right-lg--5">
    Margin top, left and right on large
</div>

Padding

Set margin on an element

Padded box on all screen sizes
Padded box only on small screens
Padding on bottom for medium and up
Padding left on large screens 

<div class="background--abbey padding-top--2 padding-left--1 padding-right--1 padding-bottom--2">
    Padded box on all screen sizes
</div>

<div class="background--iron-light padding-top-sm--2 padding-left-sm--1 padding-right-sm--1 padding-bottom-sm--2">
    Padded box only on small screens
</div>

<div class="background--abbey padding-bottom-md--2">
    Padding on bottom for medium and up
</div>

<div class="background--iron-light padding-left-md--17">
    Padding left on large screens
</div>

Visibility

Set margin on an element

Hidden on small screens only
Hidden on medium and up screens
Hidden on large screens 

<div class="hide--sm">
    Hidden on small screens only
</div>
<div class="hide--md">
    Hidden on medium and up screens
</div>
<div class="hide--lg">
    Hidden on large screens
</div>

Ellipsis

The ellipsis utility needs the element to have a background colour.

Curabitur eget elementum sem. Nam interdum tellus non metus pellentesque sagittis. Sed a sollicitudin velit, vel luctus lorem. Cras facilisis eleifend est. Donec felis quam, varius vitae ligula vel, scelerisque fermentum odio. Mauris tempus ornare diam sit amet condimentum. Aenean odio tellus, maximus ut nibh in, sollicitudin ornare risus. Suspendisse tempus dolor id nunc tempus, quis mattis sapien congue. Donec sem ipsum, sagittis sed elementum at, maximus in erat. Sed ornare sodales tempus. Proin aliquam dapibus sem, id faucibus enim commodo vel. Phasellus lacinia venenatis nisl, egestas luctus turpis pharetra non. Curabitur purus leo, luctus sit amet dolor id, maximus ultricies massa. Donec sit amet diam vitae purus iaculis laoreet vitae cursus nibh. Donec condimentum neque a est facilisis, ac aliquet augue dignissim. Fusce hendrerit consequat odio, in fermentum neque lobortis et.


<div class="height--31-ellipsis width--15 background--white">
    <p>Curabitur eget elementum sem. Nam interdum tellus non metus pellentesque sagittis. Sed a sollicitudin velit, vel luctus lorem. Cras facilisis eleifend est. Donec felis quam, varius vitae ligula vel, scelerisque fermentum odio. Mauris tempus ornare diam sit amet condimentum. Aenean odio tellus, maximus ut nibh in, sollicitudin ornare risus. Suspendisse tempus dolor id nunc tempus, quis mattis sapien congue. Donec sem ipsum, sagittis sed elementum at, maximus in erat. Sed ornare sodales tempus. Proin aliquam dapibus sem, id faucibus enim commodo vel. Phasellus lacinia venenatis nisl, egestas luctus turpis pharetra non. Curabitur purus leo, luctus sit amet dolor id, maximus ultricies massa. Donec sit amet diam vitae purus iaculis laoreet vitae cursus nibh. Donec condimentum neque a est facilisis, ac aliquet augue dignissim. Fusce hendrerit consequat odio, in fermentum neque lobortis et.</p>
</div>

Related