Layout

To adjust stylings for tablet or mobile screen only please read this first.

Spacing elements

To control white space between elements we do not add padding or margins, instead we use separate elements with a predefined size.
The reason we use this method rather than padding or margins is so we can be more consistent across the entire website.
It also gives the ability to easily change spacing rules across the entire website and it is clearer where what spacing is used.

spacing-XXL

spacing-XL

spacing-L

spacing-M

spacing-S

spacing-XS

spacing-XXS

spacing-XXXS

Page layout

The layout system consists of rows and columns, where each row is divided up into 12 columns.
The total row width is controlled by the container element that wraps it all.

container

layout__row

layout__col

By adding a specific class name to the layout__col element you can make an element span across several columns.
For example by having 3 elements that span 4 columns we can create a layout of 3 columns (3 x 4 is 12).

container

layout__row

layout__col

layout__col-4

layout__col

layout__col-4

layout__col

layout__col-4

Or 2 elements that span 6 columns to create a layout of 2 columns (2 x 6 is 12).

container

layout__row

layout__col

layout__col-6

layout__col

layout__col-6

An element with only layout__col — without an additional class name — expands across the leftover space.
The possibilities are endless, you can make it as complex as you want.

container

layout__row

layout__col

layout__col-5

layout__col

layout__col-3

layout__col

layout__col-2

Gutter and gap sizes

First off we need to define the difference between the gutter and the gap.
In the SML class naming the word gutter defines the width between columns, gap is used to define the height between rows.
In the variable naming we only have gap sizes, those values are used for both the gutter and gap sizes.

The standard gutter and gap size is gap-m on desktop and bp-xs__gap-m for mobile.
The framework also comes with gap-s and gap-l for tighter and wider spaced columns.
Below an example with large gaps and gutters, and with small gaps and gutters.

container

layout__row

layout__gutter-l

layout__gap-l

layout__col

layout__gutter-l

layout__col-6

layout__col

layout__gutter-l

layout__col-6

container

layout__row

layout__gutter-s

layout__gap-s

layout__col

layout__gutter-s

layout__col-3

layout__col

layout__gutter-s

layout__col-3

layout__col

layout__gutter-s

layout__col-3

layout__col

layout__gutter-s

layout__col-3

Layout inside element

There is a wide range of additional predefined class names available that control the layout of the different elements inside a column.

layout__vertical

layout__align-start

default

layout__vertical

layout__align-center

layout__vertical

layout__align-end

layout__vertical

layout__justify-start

default

layout__vertical

layout__justify-center

layout__vertical

layout__justify-end

layout__vertical

layout__justify-space-between

layout__vertical

layout__justify-space-around

layout__horizontal

layout__align-start

default

layout__horizontal

layout__align-center

layout__horizontal

layout__align-end

layout__horizontal

layout__justify-start

default

layout__horizontal

layout__justify-center

layout__horizontal

layout__justify-end

layout__horizontal

layout__justify-space-between

layout__horizontal

layout__justify-space-around

You can combine them to have control over both vertical and horizontal axes.

layout__vertical

layout__align-center

layout__justify-space-between

layout__horizontal

layout__align-center

layout__justify-space-between