Additional range selectors about styled-breakpoints

[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, 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.

[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.

[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]

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.

[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, 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.