How layouts work horizontally.
| Margin | Column | Gutter | Column | Gutter | ... | Gutter | Column | Margin |
There are two margins, on the extreme left and the extreme right.
There are gutters separating each column, so there is one fewer gutter than there are columns.
Default360 has 6 columns (and 5 gutters). All other sizes have 12 columns (and 11 gutters).
The margin widths and gutter widths are hard coded per viewport size. The remaining width is divided equally between each column.
A component will span n columns (and therefore also the n-1 gutters between).
{ size : Width
, height : Basics.Int
, width : Basics.Int
, marginWidth : Basics.Int
, gutterWidth : Basics.Int
, spanningColumnsWidth : Basics.Int -> Basics.Int
, contentWidth : Basics.Int
, columnCount : Basics.Int
}
Default is 360px wide, no reason to guarantee anything will work below this.
{ default360 : a
, atLeast768Wide : a
, atLeast1024Wide : a
, atLeast1440Wide : a
}
Helper to provide a different a
for each viewport size.
perBreakpoint : PerBreakpoint a -> Viewport -> a
Helper to retrieve a different a
for each viewport size.
classify : { width : Basics.Int, height : Basics.Int } -> Viewport
classifyDefault360 : { width : Basics.Int, height : Basics.Int } -> Viewport
Forces a viewport that always returns Default360 for its size.