dzuk-mutant / nice-screen-buckets / Screen.Bucket

A module for creating sets of screen boundaries (here, called 'buckets').

These buckets can then be used to compare against the user's screen size directly or converted to CSS Media queries.

Types


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

A bucket. Can only be used for one specific dimension as defined by it's axis value.


type Boundary
    = NoLimit
    | Defined Basics.Int

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

When creating a minimum boundary of zero, use NoLimit instead of Defined 0.


type Axis
    = Width
    | Height

Defines what axis a bucket is for.

Creating buckets

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

A function that creates a Bucket.

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

encompass : Axis -> Bucket -> Bucket -> Bucket

Creates a bucket that encompasses the minimum of the first bucket and the maximum of the second bucket.

Useful when you want to create buckets that are larger groupings of smaller buckets.

wide1 : Bucket
wide1 = Bucket.create Width (Defined 1056) (stepBelow wide2)

wide2 : Bucket
wide2 = Bucket.create Width (Defined 1440) NoLimit

wide : Bucket
wide = Bucket.encompass Width wide1 wide2
-- creates a bucket between 1056 and 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 -> Css.Media.MediaQuery

A function that converts a Bucket into an elm-css MediaQuery that covers the boundaries given by the bucket at the correct axis.

These media queries can be stacked in a list wth functions such as withMedia, so you can cover larger areas with multiple contiguous buckets.

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.

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

tabletMq : MediaQuery
tabletMq = Bucket.toMediaQuery tablet
-- produces: only screen [ minWidth (px 512), maxWidth (px 1051) ]

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

desktopMq : MediaQuery
desktopMq = Bucket.toMediaQuery desktop
-- produces: only screen [ minWidth (px 1052) ]