Use space values to set padding, margin, width and height to UI elements:
element =
div
[ css
[ marginTop space8
, padding space2
, width space32
]
]
Use fluid and size values to set width, height, maxWidth and maxHeight of layout blocks:
view =
div
[ css
[ displayFlex
, flexWrap wrap
, maxHeight size3XL
, width (fluid 2 3)
]
]
space0 : Css.Px
px 0
space1 : Css.Rem
rem 0.25
space2 : Css.Rem
rem 0.5
space3 : Css.Rem
rem 0.75
space4 : Css.Rem
rem 1
space5 : Css.Rem
rem 1.25
space6 : Css.Rem
rem 1.5
space8 : Css.Rem
rem 2
space10 : Css.Rem
rem 2.5
space12 : Css.Rem
rem 3
space16 : Css.Rem
rem 4
space20 : Css.Rem
rem 5
space24 : Css.Rem
rem 6
space32 : Css.Rem
rem 8
space40 : Css.Rem
rem 10
space48 : Css.Rem
rem 12
space56 : Css.Rem
rem 14
space64 : Css.Rem
rem 16
fluid : Basics.Float -> Basics.Float -> Css.Pct
Return a portion of 100%
fluid 2 3
is equivalent to pct (100 * (2/3))
(33.33333%)
el
[ css
[ height (fluid 2 3)
, width (fluid 1 2)
]
]
[]
sizeXS : Css.Rem
rem 20
sizeSM : Css.Rem
rem 24
sizeMD : Css.Rem
rem 28
sizeLG : Css.Rem
rem 32
sizeXL : Css.Rem
rem 36
size2XL : Css.Rem
rem 42
size3XL : Css.Rem
rem 48
size4XL : Css.Rem
rem 56
size5XL : Css.Rem
rem 64
size6XL : Css.Rem
rem 72
sizeFull : Css.Pct
pct 100