Note: This package is now based on the dzuk-mutant fork of elm-css, not the original elm-css package.
Html.label
[ class "label"
, for id
, css [ display flex_
, 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.
]
]
[]
Rems are a really important measurement when creating web interfaces that are accessible. This is because rem-based measurements are scalable according to the user's font size preferences, while pixels are not.
The problem with rems however, is that the scale they operate on is not accessible for designers, often requiring a lot of mental calculation to translate it from pixels, which is a much more natural measurement to work with.
Responsive pixels are a quick and easy drop-in replacement for rems that let you think in pixels, while deploying to rems.
This package adds two new measurement functions for use in elm-css.
rpx- Responsive Pixel, which is equivalent to 1px on a display at standard zoom/text size. (1/16 rems)blc- Block, equivalent to 8rpx. Useful when creating layouts in multiples of 8. (1/2 rems)
Both of these functions produce Value { rem : Supported } values, so they are drop-in replacements for any elm-css property that can accept rem measurements (usually Length/LengthSupported).
This package is licensed BSD-3-Clause.
The original idea for responsive pixels came from Aral Balkan.