mind-gym / elements / MG.Viewport

Viewport

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

Managing Viewport differences


type alias Viewport =
{ 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 
}


type Width
    = Default360
    | AtLeast768Wide
    | AtLeast1024Wide
    | AtLeast1440Wide

Default is 360px wide, no reason to guarantee anything will work below this.


type alias PerBreakpoint a =
{ 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.

Classifying Viewport

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.