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.
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)Sometimes in a project you might want to establish consistent metrics for certain things across your interface, but because of how elm-css measurement values work, you can't use normal math operators on Rem values. So these functions let you apply some basic math to Rems.
paddingLeft <| Rpx.subtract focusBorderWidth (blc 6)Adds one Rem-based value (rem, rpx, blc) to another.
width <| Rpx.add thing (blc 10)Subtracts one Rem-based value (rem, rpx, blc) from another.
paddingLeft <| Rpx.subtract focusBorderWidth (rpx 2)Multiplies one Rem-based value (rem, rpx, blc) by a Float value.
width <| Rpx.multply cellWidth 3Divides one Rem-based value (rem, rpx, blc) by a Float value.
width <| Rpx.divide (blc 100) 10 -- 10blcsNegates a Rem value (does the equivalent of Elm Core Basics.negate).
marginTop <| Rpx.negate importantMeasurement
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.