Screen

A module that contains functions for comparing Screen Metrics against Screen Buckets so you can change your app's functionality or presentation based on how big the user's screen is.

This module also contains optional pre-built Buckets.

Checking Metrics against Buckets

Depending on the situation you need, you can either check via:

Checking the Metrics values in the model.
CSS media queries in elm-css.

All methods use the same Bucket data type, but doing anything with data in Elm is slower because it relies on JavaScript. So when doing presentation-related things with elm-css, always use the media queries wherever possible.

Checking with Elm data

isIn : List Bucket -> Metrics -> Bool

Checks to see if the screen size (represented by Metrics) matches any buckets that you provide.

Useful when you want to swap out functionality, layouts or interface elements based on screen size.

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

Checking with CSS media queries

withMedia : List Bucket -> List Style -> Style

Converts a list of buckets and a list of elm-css Styles into a Style that become active depending on whether or not the screen size is in the given buckets.

It performs the equivalent of Css.Media.withMedia.

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

This doesn't use your model's Metrics because CSS media queries don't get checked against the screen size within Elm, but by the browsers directly.

Default Buckets

These are the default buckets that come with this, but you can make your own with Screen.Bucket.

Details about what sizes these buckets are and what they're for can be found in the readme.

Width Buckets

Because width tends to be more important than height in creating responsive interfaces, width buckets have more detail, with have two different parallel levels of detail for convenience.

Broad buckets

handset : Bucket

A bucket that covers all 'handset' buckets (handset1, handset2 and handset3).

portable : Bucket

A bucket that covers all 'portable' buckets (portable1, portable2 and portable3).

wide : Bucket

A bucket that covers all 'wide' buckets (wide1 and wide2).

Fine Buckets

handset1 : Bucket

The handset1 width bucket.

handset2 : Bucket

The handset2 width bucket.

handset3 : Bucket

The handset3 width bucket.

portable1 : Bucket

The portable1 width bucket.

portable2 : Bucket

The portable2 width bucket.

portable3 : Bucket

The portable3 width bucket.

wide1 : Bucket

The wide1 width bucket.

wide2 : Bucket

The wide2 width bucket.

Height Buckets

limited : Bucket

The limited height bucket.

medium : Bucket

The medium height bucket.

tall : Bucket

The tall height bucket.

dzuk-mutant/nice-screen-buckets/2.0.0