Additional range selectors

Conceptually, I like to think of a breakpoint as a threshold value. If the breakpoint value is 500px I would expect an above query to be >500px and a below query to be <500px.

In the example:

{
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
}

up('md') => '@media (min-width: 768px) { ... }'
only('md') => '@media (min-width: 768px) and (max-width: 991.98px) { ... }'
down('md') => '@media (max-width: 991.98px) { ... }'
between('md', 'lg') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'

up('md') makes complete sense as being greater than or equal to md.

only('md') also makes total sense as selecting [md, lg).

down('md') I don’t agree with, as it seems like it should be <md. Instead, it is <lg.

between('md', 'lg') follows this same logic as down, querying from [md, xl), when I would prefer[md, lg)

As this is currently written, there is no way to select down() from the lowest breakpoint, which is often the most useful breakpoint, as things are most likely to break the layout at this extreme value. down('xs') is currently interpreted as <Sm (not <Xs).

---

Proposed solution:

The names for this new query could be downFrom or upTo.

downFrom('md') => '@media (max-width: 767.8px) { ... }'
upTo('md') => '@media (max-width: 767.8px) { ... }'

Alternatively, down('md', orientation, true) could use a third argument to specify the max-width of md rather than the next higher breakpoint (lg). Renaming calcMinWidth -> getWidthAtBreakpoint and calcMaxWidth -> getWidthAtNextBreakpoint also helps to clarify the functionality.

Here’s a feature proposal of how the latter could look with 3 additional unit tests: https://github.com/iRyanBell/styled-breakpoints/tree/feat/is-below-break-proposal

[iRyanBell]

@iRyanBell maybe these videos will help you think mobile first. video book

Bootstrap

Zurb Foundation

I’m totally on board with a mobile-first mindset for cascading styles by additive viewport width.

My complaint here was largely around the naming convention of up(Md) meaning “greater than the ‘md’ width definition”, while down(Md) translates non-symmetrically to “less than next higher definition after ‘md’” – I get the logic behind this model, seeing breakpoints as ranges, but I would prefer a more precise interpretation.

[mg901]

@iRyanBell maybe these videos will help you think mobile first. video book

Bootstrap

Zurb Foundation