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>
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>
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>
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>