Marcel Deelen

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

row

col

By adding a specific class name to the 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

row

col

col-4

col

col-4

col

col-4

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

container

row

col

col-6

col

col-6

An element with only 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

row

layout__col

col-5

col

col-3

col

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

row

gutter-l

gap-l

col

gutter-l

col-6

col

gutter-l

col-6

container

row

gutter-s

gap-s

col

gutter-s

col-3

col

gutter-s

col-3

col

gutter-s

col-3

col

gutter-s

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.

vertical

align-start

default

vertical

align-center

vertical

align-end

vertical

justify-start

default

vertical

justify-center

vertical

justify-end

vertical

justify-space-between

vertical

justify-space-around

horizontal

align-start

default

horizontal

align-center

horizontal

align-end

horizontal

justify-start

default

horizontal

justify-center

horizontal

justify-end

horizontal

justify-space-between

horizontal

justify-space-around

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

vertical

align-center

justify-space-between

horizontal

align-center

justify-space-between