Horizontale layout

Om structuur en consistentie te creƫren wordt voor de horizontale verdeling de 12 columns structuur uit Bootstrap 3 gebruikt.

12 columns

Column width auto

Gutter width 32px (16px on each side of a column)

Breakpoints

Extra small (mobiele telefoons) smaller than 768px
Max container width none (auto)
Small (tablets) bigger or equal to 768px
Max container width none (auto)
Medium (desktops) bigger or equal to 992px
Max container width 922px
Large (desktops) bigger or equal to 1200px
Max container width 1152

Verticale layout

Voor de verticale layout en hiƫrarchie wordt het 8px grid gebruikt. Het 8px grid betekent het volgende: Gebruik increments van 8px om de grootte van en ruimte tussen de elementen te tonen op een pagina. Dus height, width, padding, margin bestaan allemaal uit increments van 8.

Voorbeeld grid layout

xs-12
xs-6
xs-6
xs-4
xs-4
xs-4
xs-3
xs-3
xs-3
xs-3
xs-12 sm-12 md-10 md-offset-1 lg-8 lg-offset-2