cedricss / elm-css-systems / Css.Systems.Spacing

Spacing and sizing system

Use space values to set padding, margin, width and height to UI elements:

element =
    div
        [ css
            [ marginTop space8
            , padding space2
            , width space32
            ]
        ]

Spacing systems

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

Spacing

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

Sizing

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