Grid & Breakpoints
Grid
- the content is organized in 12 columns through all breakpoints
- the grid has a dynamic width, which scales in correspondence to viewport width throughout all breakpoints
- breakpoints and their specific spacing rules are defined below
col 1
col 2
col 3
col 4
col 5
col 6
col 7
col 8
col 9
col 10
col 11
col 12
Breakpoints
- 320-519: burger navigation
20px fixed gutters (10px on each side of column)
20px fixed margin outside grid (10px on each side of grid)
vertical spacing modules: S/M/L = 30px/50px/70px - 520-763: burger navigation
20px fixed gutters (10px on each side of column)
20px fixed margin outside grid (10px on each side of grid)
vertical spacing modules: S/M/L = 30px/50px/70px - 764-1009: burger navigation
30px fixed gutters (15px on each side of column)
30px fixed margin outside grid (15px on each side of grid)
vertical spacing modules: S/M/L = 30px/60px/90px - 1010-1920: full size navigation
30px fixed gutters (15px on each side of column)
dynamic margin: the dynamic margin comes into play above 1010. It grows with increasing viewport width. The growth speed of this margin is exactly 1/3 the speed of viewport growth. Therefore, for every one 3px the viewport increases the margin increases by 1px. The starting point of this growth is the standard 15px margin defined for breakpoint below 1010.
vertical spacing modules: S/M/L = 30px/60px/90px
Behaviour
col 12
col 10
col 2
col 9
col 3
col 8
col 4
full size inbetween
col 7
col 5
col 6
col 6
col 3
col 3
col 6