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.
This module also contains optional premade Buckets.
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).When creating a minimum boundary of zero, use NoLimit instead of Defined 0.
Defines what axis a bucket is for.
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) NoLimitCreates 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 NoLimitWill 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) NoLimitA 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) ]Because width tends to be more important than height in creating responsive interfaces, width buckets have more detail, with two parallel levels of detail for convenience - broad buckets, which are not numbered, and fine buckets, which are numbered.
A width bucket that covers all 'handset' buckets (handset1,
handset2 and handset3).
A 'handset' here refers to a device that can be held in one hand. This usually means phones.
This bucket can also encompass particularly narrow browser windows in desktop and tablets.
A width bucket that's 351px and under.
This represents the smallest handsets available in recent memory. This typically means devices below 4.7" in screen size.
This has become quite a niche use case, but the users of these devices need particular catering to to make web layouts work, especially by making side margins not too big.
This is also relevant to web views in Apple Watch.
Device examples (in portrait):
A width bucket that's between 352 and 383px.
This typically represents devices that can be held in one hand but are not entirely operable with one hand. Nowadays, this typically means devices between 5" - 6" in screen size.
Device examples (in portrait):
A width bucket that's between 384 and 511px.
This represents devices that can be held in one hand, but are not operable with one hand. Nowadays this typically means devices between 6" - 7" in screen size.
Device examples (in portrait):
A width bucket that covers all 'portable' buckets (portable1,
portable2 and portable3).
'portable' buckets encompass these things:
A width bucket that's between 512 and 896px.
This encompasses smaller tablets (typically between 8-10" in size).
A width bucket that's between 896 and 863px.
This encompasses the most common tablet sizes in portrait. Typically between 8" and 11".
A width bucket that encompasses all 'wide' buckets
(wide1 and wide2).
Wide buckets encompass these things:
'wide' buckets are handy when you want to handle particularly wide interfaces for maximum productivity.
A width bucket that represents large tablets in landscape and small and budget laptops. (All in fullscreen.)
Example resolutions:
The widest width bucket this module offers. This represents typical desktop displays in fullscreen.
Desktop and other large displays. Example resolutions:
A height bucket representing handset devices (ie. phones) in landscape. The amount of vertical space is very limited.
The maximum of this bucket is the same as handset, but in height.
A height bucket representing small and regular tablets in landscape. The amount of vertical space is restricted.
This buckets bounds are the same as portable1 - portable2 but in height.
A height bucket representing large landscape tablet, laptop or desktop contexts. The amount of vertical space is generally ample.
The minimum of this bucket is the same as portable2, but in height.
A bucket. Can only be used for one specific dimension as defined by it's
axisvalue.