Screen

A module for storing and interpreting screen dimensions using buckets.

Depending on the situation you need, you can either implement screen size-based functionality in the form of:

CSS Media Queries in elm-css.
Elm code with the data and data conversion.
Your own implementation using the raw bucket data.

All methods use the same core set of display buckets, but doing anything with data in Elm is slower because it relies on JavaScript. So when doing presentation-related things, always use the Media Queries wherever possible.

Storing and using Screen Buckets in the model

Use this array of tools when you need to store and update the screen size in your model, so you can change your app's functionality based on screen size.

General screen data

type alias Metrics =

{ width : WidthMetrics

, height : HeightMetrics

}

The type for storing all screen information.

Widths are generally more important than height for determining screen layout so there's both broad and fine buckets for width.

type alias WidthMetrics =

{ exact : Int

, broad : BroadWidthBucket

, fine : FineWidthBucket

}

The record for the width portion of Metrics.

Widths are generally more important than height for determining screen layout so there's both broad and fine buckets.

type alias HeightMetrics =

{ exact : Int

, broad : HeightBucket

}

The record for the height portion of Metrics.

Heights are generally less important than height for determining screen layout so there's only broad buckets.

Initialising and updating Metrics

zero : Metrics

Makes a starting metrics structure where all the values are 0.

Use this in your initial model, but the model must be properly initialised afterwards.

set : Int -> Int -> Metrics -> Metrics

Takes the width and height values that you'd get from functions like Browser.Events.onResize and updates the screen metrics structure based on those values.

Because bucket boundaries are in Ints while functions like Browser.Events.onResize produce Floats, the function rounds those values up when comparing against buckets.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ScreenResize w h ->
            ( { model | screen = Screen.set w h model.screen }, Cmd.none )

Bucket types

These are stored in Screen.Metrics and can also be converted to from raw Ints from functions in the raw numbers section.

These are ideal for using buckets for changing the basic functionality and elements of your app based on screen size. If you want to change your app's presentation, you should use CSS Media Queries instead.

Html.div
    []
    -- show mobile menu if screen width is Handset
    [   ( if model.screen.width.broad == Handset then
            Html.div [] [Html.text "menu"]
          else
            []
        )   
    ]

type BroadWidthBucket

= Handset

| Portable

| Wide

Custom type representing broad width buckets.

Check this package's readme for summaries of all the buckets.

type FineWidthBucket

= Handset1

| Handset2

| Handset3

| Portable1

| Portable2

| Portable3

| Wide1

| Wide2

Custom type representing fine width buckets.

Check this package's readme for summaries of all the buckets.

type HeightBucket

= Limited

| Medium

| Tall

Custom type representing height buckets.

Check this package's readme for summaries of all the buckets.

CSS Media Queries

Use these to create Media Queries to change your app's presentation in elm-css.

This is the most responsive way to change stuff based on screen size in the browser, so you should use it wherever you can.

You can stack these media queries in a list like below:

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

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

Width Buckets (broad)

handset : MediaQuery

CSS Media query covering all handset width buckets (handset1 - handset3).

portable : MediaQuery

CSS Media query covering all portable width buckets (portable1 - portable3).

wide : MediaQuery

CSS Media query covering all wide width buckets (wide1 - wide2).

Width Buckets (fine)

handset1 : MediaQuery

CSS Media query for the handset1 width bucket.

handset2 : MediaQuery

CSS Media query for the handset2 width bucket.

handset3 : MediaQuery

CSS Media query for the handset3 width bucket.

portable1 : MediaQuery

CSS Media query for the portable1 width bucket.

portable2 : MediaQuery

CSS Media query for the portable2 width bucket.

portable3 : MediaQuery

CSS Media query for the portable3 width bucket.

wide1 : MediaQuery

CSS Media query for the wide1 width bucket.

wide2 : MediaQuery

CSS Media query for the wide2 width bucket.

Height Buckets

limited : MediaQuery

CSS Media query covering the limited height bucket.

medium : MediaQuery

CSS Media query covering the medium height bucket.

tall : MediaQuery

CSS Media query covering the tall height bucket.

Raw data

Should you need access to the base metric numbers these buckets are made of.

Data types

type alias Bucket =

{ min : Boundary

, max : Boundary

, axis : BucketAxis

}

A single screen dimension bucket.

type Boundary

= NoLimit

| Defined Int

The value that the minimum or a maximum of a bucket can be at.

NoLimit: Either zero (for min) or infinity (for max).
Defined: A definite value (in px, represented as Ints here).

type BucketAxis

= Width

| Height

Defines what axis a bucket is for.

Convert data to buckets

toBroadWidthBucket : Int -> BroadWidthBucket

Takes an int representing screen width in pixels and converts it into a broad screen width bucket.

toFineWidthBucket : Int -> FineWidthBucket

Takes a Int representing screen width and and converts it into a fine screen width bucket.

toHeightBucket : Int -> HeightBucket

Takes an int representing a screen height in pixels and converts it into a screen height bucket.

Buckets boundaries are Ints, so this function rounds the screen width Int up.

https://github.com/dzuk-mutant/Helium/blob/master/docs/display.md#display-height-groups

Width Buckets (broad)

handsetBkt : Bucket

Raw values for the handset width bucket.

portableBkt : Bucket

Raw values for the portable width bucket.

wideBkt : Bucket

Raw values for the wide width bucket.

Width Buckets (fine)

handset1Bkt : Bucket

Raw values for the handset1 width bucket.

handset2Bkt : Bucket

Raw values for the handset2 width bucket.

handset3Bkt : Bucket

Raw values for the handset3 width bucket.

portable1Bkt : Bucket

Raw values for the portable1 width bucket.

portable2Bkt : Bucket

Raw values for the portable2 width bucket.

portable3Bkt : Bucket

Raw values for the portable3 width bucket.

wide1Bkt : Bucket

Raw values for the wide1 width bucket.

wide2Bkt : Bucket

Raw values for the wide2 width bucket.

Height

limitedBkt : Bucket

Raw values for the limited height bucket.

mediumBkt : Bucket

Raw values for the medium height bucket.

tallBkt : Bucket

Raw values for the tall height bucket.

Modules

Screen

dzuk-mutant/nice-screen-buckets/1.0.0

Screen

Storing and using Screen Buckets in the model

General screen data

Initialising and updating Metrics

Bucket types

CSS Media Queries

Width Buckets (broad)

Width Buckets (fine)

Height Buckets

Raw data

Data types

Convert data to buckets

Width Buckets (broad)

Width Buckets (fine)

Height

Modules