Nice Screen Buckets

A detailed, encapsulated way of tracking and storing browser screen size and comparing that with a series of boundaries (called buckets) so you can easily and precisely change functionality and presentation based on screen size.

You can implement this in a couple of different ways with the same data types:

As normal Elm model data

Html.div
    []
    -- show mobile menu if screen width is small enough
    [   ( if Screen.isIn [ handset, portable1 ] model.screen then
            Html.div [] [ Html.text "menu" ]
          else
            []
        )   
    ]

As elm-css Media Queries

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

In addition to making your own buckets, this package comes with a series of pre-built buckets. Each of the buckets have been thoroughly researched and designed around different categories of displays that keep recurring throughout different classes of devices.

Detailed information about the pre-built buckets. (You need to be on the GitHub repo to see this link.)

License

This package is licensed BSD-3-Clause.

Buckets