dzuk-mutant/nice-screen-buckets/2.0.0

NOTE: the latest version is 6.0.1

Screen.Bucket

A module for creating sets of screen boundaries (here, called 'buckets') for comparing against the user's screen size.

Types

type alias Bucket =
{ min : Boundary
, max : Boundary
, axis : Axis
}

A single bucket. Can only be used for one dimension (as defined by it's axis).

= NoLimit
| Defined Int

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

  • NoLimit: Represents either zero (if min) or infinity (if max).
  • Defined: A definite value (in px, represented as Ints).
type Axis
= Width
| Height

Defines what axis a bucket is for.

Functions

create : Axis -> Boundary -> Boundary -> Bucket

A function that creates a Bucket using the normal values that Buckets contain.

Consider using stepBelow in conjunction with this function to create buckets that neatly slot next to each other.

mobile : Bucket
mobile = Bucket.create Width NoLimit (stepBelow tablet) 

tablet : Bucket
tablet = Bucket.create Width (Defined 412) (stepBelow desktop) 

desktop : Bucket
desktop = Bucket.create Width (Defined 1052) NoLimit
stepBelow : Bucket -> Boundary

Will produce a Boundary that is -1 of the minimum boundary of the given Bucket, if that Boundary is Definite.

If the minimum is NoLimit instead, then it will just return NoLimit.

Useful when you want to create buckets that neatly slot next to each other.

tablet : Bucket
tablet = Bucket.create Width (Defined 512) (stepBelow desktop) 

desktop : Bucket
desktop = Bucket.create Width (Defined 1052) NoLimit

Conversions

toMediaQuery : Bucket -> MediaQuery

A function that converts a Bucket into an elm-css MediaQuery.

This function exists for possible edge cases that you might have. If you want to use buckets as media queries in a typical way, you'll probably want to look at Screen.withMedia instead.