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