The "container" class can be used wherever you want to center your content while creating white-space left and right. You should use it if you want more predictable and eye-resting designs, but skip it to create fluid layouts.

<div class="container">...</div>

Text container

For readability reasons you should not leave text widths unrestricted. Add the class "text-container" to limit elements that contain texts to a reasonable size. To center align this block add also the "text-container--center" class.

<div class="text-container">... Text elements ...</div>
<div class="text-container text-container--center">... Centered text elements ...</div>


Anchors by default will inherit their color, so to make them stand out with your primary color, use the "link" class.

<a href="" class="link">Styled link</a>

Align left/center/right

To align content within a block element, use directly these classes.

  <div class="left-align">Left aligned text</div>
  <div class="center-align">Center aligned text</div>
  <div class="center">Center aligned text</div>
  <div class="right-align">Right aligned text</div>

Stressed text

Since we are using a single font weight, to stress text within paragraph, we had to create a utility class. Example:

In this sentence this will be stressed compared to the rest.

<p>In this sentence <span class='stress'>this will be stressed</span> compared to the rest.</p>