Content
The following classes are wrapper classes that you can use to create a layout, give margin to the entire content.
Container
Simple wrapper arround your content
<div class="container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nisi fuga, corporis,
saepe quia tempora eveniet quaerat debitis cumque nulla vitae,
libero eos.
Fugit, dolore. Dolorem, accusamus maiores. Quo, asperiores minima.
</div>Container centered
Adds left and right padding arround your content.
<div class="container container--centered">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nisi fuga, corporis,
saepe quia tempora eveniet quaerat debitis cumque nulla vitae,
libero eos.
Fugit, dolore. Dolorem, accusamus maiores. Quo, asperiores minima.
</div>
Content
The content class allows you to defined 2 columned layouts. The two columns are called main and aside. Different use cases are: when you want sidebar next to your main content, blog post and blog post lists. You can also nest them within one another for complex layouts, this is how this site displays navigation links on the left, content in the middle, within page navigation links on the right. Flexbox is used to display the component, so the content would appear in the order that you place them in markup.
<div class="content">
<div class="content__main">Main Content</div>
<div class="content__aside">Aside Content</div>
</div>
To display aside content on the left, main content on the right
<div class="content">
<div class="content__main">Main Content</div>
<div class="content__aside">Aside Content</div>
</div>
Example with 3 columns
<div class="content">
<div class="content__main">Main Content</div>
<div class="content__aside">Aside Content</div>
</div>