Two little packages for working with elm-css

[dzuk]

I’ve been using elm-css a lot and I ended up making a couple of design aids for it. They’re small but I’ve found them to be really useful in my regular interface work and I’ve been using them for more than a year now:

Responsive Pixels

Based on Aral Balkan’s Responsive Pixels, it provides a new measurement function (rpx) that lets you measure and develop in pixels but the resulting CSS output will be in rems, making your layouts both easy to edit and accessible. Because working in multiples of 8 is common in UI layouts, it provides another measurement function called a ‘block’ (blc), which is just 8rpx.

It also provides some helper math functions for Css.Rem values (which includes rpx, blc and Css.rem).

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

Screen Buckets

This lets you create a common set of screen buckets and evaluate whether the browser viewport fits them and make UI changes based on them.

You can do this both in normal Elm code - for instance, switching a navigation bar to a mobile layout…

Html.div
    []
    ( if Screen.isIn [ handset, portable1 ] model.screen then
            [ {- mobile nav -} ]
      else
            [ {- desktop nav -} ]
    )   

…as well as generate CSS media queries where possible for better performance.

css [ Screen.withMedia [ handset, portable1, portable2 ]
        [ height (px 32)
        , overflow hidden
        ]

    , Screen.withMedia [ portable3, wide ]
        [ width (px 192)
        , padding4 (px 64) (px 32) (px 32) (px 48)
        ]
    ]

It comes with a default series of buckets that have two different levels of granularity:

eg.

• handset represents all phone-like devices
  • handset1 represents phones that are especially small (eg. iPhone SE 1st generation)
  • handset2 represents the ~5-6" range (eg. iPhone 12/13 mini)
  • handset3 represents the ~6-7" range. (eg. iPhone 11+, Pro, Pro Max)

So you can make broad generalisations about a certain class of devices and then implement finer adjustments where needed, such as making a mobile layout for handset devices and then making margins very thin in handset1 devices. I think the portable buckets could do with some more work and testing though.

It also has functions for you to make your own custom buckets.