Additional range selectors

[iRyanBell]

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

[mg901]

@iRyanBell, good time. Thanks for using style-breakpoints. All of the above problems only arise because you ignore the mobile first approach. The existing api is enough to cover all your needs.

[iRyanBell]

Can you elaborate more on the mobile first approach?

It's not quite clear to me why up('md') is relative to md (up from md). And down('md') performs down from lg.

[mg901]

@iRyanBell if you have any difficulties with solving existing problems, please send a link with an example code to codesandbox / stackblitz. I will gladly help you.

[iRyanBell]

@iRyanBell if you have any difficulties with solving existing problems, please send a link with an example code to codesandbox / stackblitz. I will gladly help you.

How would you ideally query down from sm (ie. a width no greater than a max value of 576px), given the breakpoints definition of:

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

[mg901]

@iRyanBell take a look at this example.

[mg901]

Can you elaborate more on the mobile first approach?

It's not quite clear to me why up('md') is relative to md (up from md). And down('md') performs down from lg.

Mobile first - from smallest to largest.
Desktop first - from largest to smallest.

[iRyanBell]

@iRyanBell take a look at this example.

Ah, I see what you mean now by the mobile first approach! That works, just using up which references the supplied breakpoint rather than trying to use down which picks a different breakpoint value.

So, from this perspective, you can't write a media query < sm (or your lowest breakpoint) with down as a sort of "it's a feature, not a bug" mentality. Closing as resolved. Although, I still like the idea of a down by referenced breakpoint rather than the next-higher breakpoint by index.

[mg901]

@iRyanBell "Desktop first" has many drawbacks. If following the "mobile first" principle you add the functionality you need, then in "desktop first" you need to hide what you already have and you constantly have to write display: none;

[mg901]

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

Bootstrap

Zurb Foundation

[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, I understand you, but I didn’t come up with the names for these functions myself. The styled-breakpoints API completely copies the media query api from bootstrap (145k stars). So we can say with complete confidence that this is the standard for the industry. Yes, English is not my first language, but bootstrap was invented in San Francisco. For some reason, I have no doubts about the correctness of the name.)) Thanks again for your interest.)) Perhaps, to fix the problem with down, you need to add another breakpoint

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

similar to Zurb Foundation media queries.

Then your problem will be solved. Hmm ... Perhaps this is a great reason to think.