Style Guide

Grid Layouts

The platform uses a 12 column grid created by Susy using the flexbox technique instead of floats, which gives more possibilities for positioning. The grid can be previewed using the keyboard short-cut Ctrl + `.

Block-Row-Column structure

To keep the overall structure simple and consistent the following format is being used:

  1. Page containers: Header, main, footer, and overlays.
  2. Blocks: Always stackable and limiting the scope to prevent conflicts.
  3. Rows: Limited or full width, with optional utility classes for responsive behavior of children.
  4. Columns: At least the amount indicated by the parent row's utility class, but may also be more.
  5. Content: Can be things like elements, components, modules, or even nested rows with columns again.

The way columns behave in a row is being controlled by utility classes on the row itself, so the behavior is defined centrally in the stylesheet instead of in HTML.

Code examples

A minimal block

HTML example
<section class="o-block">
	<div class="o-row">
		<div class="o-column">
			Column 100%
		</div>
	</div>
</section>

1 column in a limited row

Column 100%

A block with multiple columns

HTML example
<section class="o-block">
	<div class="o-row o-row--with-3-columns">
		<div class="o-column">
			Column 33.3%
		</div>
		<div class="o-column">
			Column 33.3%
		</div>
		<div class="o-column">
			Column 33.3%
		</div>
	</div>
</section>
Column 33.3%
Column 33.3%
Column 33.3%

Basic column layout variation examples

12 symmetrical columns in a limited row

Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%
Column 8.33%

1 symmetrical column (12) in a limited row

Column 100% (12/12)

2 symmetrical columns (6+6) in a limited row

Column 50% (6/12)
Column 50% (6/12)

3 symmetrical columns (4+4+4) in a limited row

Column 33.3% (4/12)
Column 33.3% (4/12)
Column 33.3% (4/12)

4 symmetrical columns (3+3+3+3) in a limited row

Column 25% (3/12)
Column 25% (3/12)
Column 25% (3/12)
Column 25% (3/12)

5 symmetrical columns (2.4+2.4+2.4+2.4+2.4) in a limited row

Column 20% (2.4/12)
Column 20% (2.4/12)
Column 20% (2.4/12)
Column 20% (2.4/12)
Column 20% (2.4/12)

2 columns (6+6) in a full width row

Column 50% (6/12)
Column 50% (6/12)

Specific column layout variation examples

1 symmetrical column (8) in a limited row

Column 66.7% (8/12)

1 symmetrical column (10) in a limited row

Column 83.3% (10/12)

1 asymmetrical column (7) left aligned in a limited row

Column 58.3% (7/12)

2 asymmetrical columns (7+5) in a limited row

Column 58.3% (7/12)
Column 41.7% (5/12)

2 asymmetrical columns (5+7) in a limited row

Column 41.7% (5/12)
Column 58.3% (7/12)

2 asymmetrical columns (6+4) left aligned in a limited row

Column 50.0% (6/12)
Column 33.3% (4/12)

2 asymmetrical columns (4+6) right aligned in a limited row

Column 33.3% (4/12)
Column 50.0% (6/12)

2 asymmetrical columns (4+8) in a limited row

Column 33.3% (4/12)
Column 66.7% (8/12)

Nesting layouts

A block with a nested row

Rows can be nested but always be sure to nest with another column; this makes sure the padding will be collapsed and the grid alignment will be kept intact.

HTML example
<section class="o-block">
	<div class="o-row--full">
		<div class="o-column">
			<h1>Title</h1>
			<div class="o-row o-row--with-2-columns">
				<div class="o-column">
					Column 50%
				</div>
				<div class="o-column">
					Column 50%
				</div>
			</div>
		</div>
	</div>
</section>

2 columns (6+6) in a limited width row nested in a full width row

Example element spanning over the full viewport width, while below a new limited row can be started:

Column 50% (6/12)
Column 50% (6/12)

Column gutter variation examples

columns without column gutters

Column 33.3%
Column 33.3%
Column 33.3%

columns with narrow column gutters

Column 33.3%
Column 33.3%
Column 33.3%

columns with equal column gutters (default)

Column 33.3%
Column 33.3%
Column 33.3%

columns with double column gutters

Column 33.3%
Column 33.3%
Column 33.3%

Column layout mixin

column-layout mixin

Parameters
  1. $column-count (Map): Nested SASS map with at certain breakpoints (key) a specific column number or even multiple column numbers (value)
CSS examples
.o-column {
  @include column-layout((l: 4));
}
@include column-layout((m: 6, l: 3));
@include column-layout((s-m: 6, m: 4, l: 2.4));
@include column-layout((m: 10, l: 8));
@include column-layout((m: 6, l: (5, 7)));