dzuk-mutant / elm-responsive-pixels / Rpx

Provides easy shorthands for designing in rems in elm-css.

Html.label
    [ class "label"
    , for id
    , css   [ displayFlex
            , boxSizing borderBox
            , minHeight (blc 3) -- 1.5 rems, or 24px at 'normal' font size.
            , paddingTop (rpx 1) -- 0.0625 rems, or 1px at 'normal' font size.
            , fontSize (rpx 14) - 0.875 rems or 14px at 'normal' font size.
            ]
    ]
    []

Units

All of these produce Css.Rem values for elm-css.

rpx : Basics.Float -> Css.Value.Value { provides | rem : Css.Value.Supported }

Responsive Pixels.

Write measurements in pixels that output to rems.

This gives you the easy to reason about unit of a pixel, but allows you to publish in rems, which is a responsive format that scales to user's browser font size preference.

fontSize (rpx 14)

blc : Basics.Float -> Css.Value.Value { provides | rem : Css.Value.Supported }

Block.

A measurement that's 8rpx (0.5rem). This is a handy shorthand if you're doing layout measurements in multiples of 8.

padding (blc 2)