Objects

Section

Sections classes are used to add vertical spacing after an element.
Modifiers allow for larger or smaller margins as well as background colors
Actual row margins and colors are defined in settings.scss.

Section with small margin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!

Default section

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!

Section with big margin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!

Default section with light background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!

Default section with dark background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!

<section class="o-section o-section--small-gap">
    	<h3>Section with small margin</h3>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!</p>
    </section>
    
    <section class="o-section">
    	<h3>Default section</h3>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!</p>
    </section>
    
    <section class="o-section o-section--large-gap">
    	<h3>Section with big margin</h3>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!</p>
    </section>
    
    <section class="o-section o-section--color-light">
    	<h3>Default section with light background</h3>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!</p>
    </section>
    
    <section class="o-section o-section--color-dark">
    	<h3>Default section with dark background</h3>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, dolorem quisquam cupiditate autem impedit reiciendis doloremque tenetur sed incidunt voluptatum suscipit iste architecto illum totam quae, inventore possimus corporis quo!</p>
    </section>

Container

Container classes are used to limit the vertical space an element can take up.
Modfiers allow wider / narrower containers.
Actual container limits are defined in settings.scss.

Narrow Container
Regular Container
Wide Container
<div class="o-container--narrow" style="background-color: #ccc">
    	Narrow Container
    </div>
    
    <div class="o-container" style="background-color: #ccc">
    	Regular Container
    </div>
    
    <div class="o-container--wide" style="background-color: #ccc">
    	Wide Container
    </div>

Box

Box classes are used to give elements padding and, optionally, background color.
Modifiers allow the defintion of background colors.
Actual box colors are defined in colors.scss.

Box Default

orem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus repellat sed perferendis aliquam vel hic earum quis fugit explicabo, expedita, rem deleniti est iste ad. Temporibus, amet adipisci illo.

Box Subtle Background

orem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus repellat sed perferendis aliquam vel hic earum quis fugit explicabo, expedita, rem deleniti est iste ad. Temporibus, amet adipisci illo.

Box Highlight

orem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus repellat sed perferendis aliquam vel hic earum quis fugit explicabo, expedita, rem deleniti est iste ad. Temporibus, amet adipisci illo.

<div class="o-box">
    	<h3>Box Default</h3>
    	<p>orem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus repellat sed perferendis aliquam vel hic earum quis fugit explicabo, expedita, rem deleniti est iste ad. Temporibus, amet adipisci illo.</p>
    </div>
    
    <div class="o-box o-box--subtle ">
    	<h3>Box Subtle Background</h3>
    	<p>orem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus repellat sed perferendis aliquam vel hic earum quis fugit explicabo, expedita, rem deleniti est iste ad. Temporibus, amet adipisci illo.</p>
    </div>
    
    
    <div class="o-box o-box--highlight">
    	<h3>Box Highlight</h3>
    	<p>orem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus repellat sed perferendis aliquam vel hic earum quis fugit explicabo, expedita, rem deleniti est iste ad. Temporibus, amet adipisci illo.</p>
    </div>

Field

A field object is a simple wrapper for a label and a form input element

<div class="o-field">
    	<label for="element-input-text">Text:</label>
    	<input id="element-input-text" type="text" placeholder="Enter text" />
    </div>

Tiles

Tiles

The tiles object distributes all of its direct descendants into qually wide columns. The actual column number must be set by using the modificator .o-tiles--n-columns, where n can be an number between 2 and 6.

As this layout is achieved using flexbox technique it is cruicial to make sure that every .o-tiles__element is a direct descendent of the .o-tiles element.

Tiles Two Columns

First Tile
Second Tile
Third Tile
Fourth Tile
Fifth Tile
Sixth Tile
Seventh Tile
<div class="o-tiles o-tiles--2-columns">
    	<div class="o-tiles__element">First Tile</div>
    	<div class="o-tiles__element">Second Tile</div>
    	<div class="o-tiles__element">Third Tile</div>
    	<div class="o-tiles__element">Fourth Tile</div>
    	<div class="o-tiles__element">Fifth Tile</div>
    	<div class="o-tiles__element">Sixth Tile</div>
    	<div class="o-tiles__element">Seventh Tile</div>
    </div>

Tiles Three Columns

This example also showcases the use of the `.o-tiles--wide-gutter modifier, making the margins between tiles bigger.

First Tile
Second Tile
Third Tile
Fourth Tile
Fifth Tile
Sixth Tile
Seventh Tile
<div class="o-tiles o-tiles--3-columns o-tiles--wide-gutter">
    	<div class="o-tiles__element">First Tile</div>
    	<div class="o-tiles__element">Second Tile</div>
    	<div class="o-tiles__element">Third Tile</div>
    	<div class="o-tiles__element">Fourth Tile</div>
    	<div class="o-tiles__element">Fifth Tile</div>
    	<div class="o-tiles__element">Sixth Tile</div>
    	<div class="o-tiles__element">Seventh Tile</div>
    </div>

Tiles Four Columns

First Tile
Second Tile
Third Tile
Fourth Tile
Fifth Tile
Sixth Tile
Seventh Tile
<div class="o-tiles o-tiles--4-columns">
    	<div class="o-tiles__element">First Tile</div>
    	<div class="o-tiles__element">Second Tile</div>
    	<div class="o-tiles__element">Third Tile</div>
    	<div class="o-tiles__element">Fourth Tile</div>
    	<div class="o-tiles__element">Fifth Tile</div>
    	<div class="o-tiles__element">Sixth Tile</div>
    	<div class="o-tiles__element">Seventh Tile</div>
    </div>

Tiles Five Columns

First Tile
Second Tile
Third Tile
Fourth Tile
Fifth Tile
Sixth Tile
Seventh Tile
<div class="o-tiles o-tiles--5-columns">
    	<div class="o-tiles__element">First Tile</div>
    	<div class="o-tiles__element">Second Tile</div>
    	<div class="o-tiles__element">Third Tile</div>
    	<div class="o-tiles__element">Fourth Tile</div>
    	<div class="o-tiles__element">Fifth Tile</div>
    	<div class="o-tiles__element">Sixth Tile</div>
    	<div class="o-tiles__element">Seventh Tile</div>
    </div>

Tiles Six Columns

First Tile
Second Tile
Third Tile
Fourth Tile
Fifth Tile
Sixth Tile
Seventh Tile
<div class="o-tiles o-tiles--6-columns">
    	<div class="o-tiles__element">First Tile</div>
    	<div class="o-tiles__element">Second Tile</div>
    	<div class="o-tiles__element">Third Tile</div>
    	<div class="o-tiles__element">Fourth Tile</div>
    	<div class="o-tiles__element">Fifth Tile</div>
    	<div class="o-tiles__element">Sixth Tile</div>
    	<div class="o-tiles__element">Seventh Tile</div>
    </div>