Add a way to emulate `min-width` instead of `max-width` alike media queries for breakpoints checks

[equinusocio]

Currently, when passing an object for breakpoints , the check emulates the CSS @media (max-width: <BREAKPOINT>). Would be useful having a prop to invert the operator from<= to >= to simulate @media (min-width: <BREAKPOINT>)

[paulcollett]

Hi @equinusocio, I'm curious to the reasoning behind this - is it because your project uses a "mobile first" breakpoint philosophy?

Also, how could you see this being implemented into Masonry (ie. what props / interface would this component have to support this)? Thanks!

[equinusocio]

Yes, I follow mobile-first approach with custom breakpoints. Right now I have to set the default columns to be the highest number of columns i need. Like this:

columns: {
    default: 6,
    980: 5,
    740: 4,
    480: 3,
    320: 1,
  }

Is a bit "controversial" when you work with mobile-first, where I would set the default number of columns to be the smallest one, on mobile:

columns: {
    1400: 6,
    980: 5,
    740: 4,
    480: 3,
    default: 1,
  }

Maybe a simple boolean prop like mobileFirst would be enought

[EricWVGG]

"controversial"? Mobile-first has been recognized as the "right way" for like fifteen years.

The reasoning, incidentally, is that when you go desktop first, the browser has to summarize the styles from the default values first, then the next largest, then the next largest, down the line until you get to the "small" screen.

That's more computation than "start from the default values, then stop because every succeeding query is bigger than you." Given that phones are more power-constrained than larger ones, it's more power and CPU efficient.

[equinusocio]

"controversial"? Mobile-first has been recognized as the "right way" for like fifteen years.

The reasoning, incidentally, is that when you go desktop first, the browser has to summarize the styles from the default values first, then the next largest, then the next largest, down the line until you get to the "small" screen.

That's more computation than "start from the default values, then stop because every succeeding query is bigger than you." Given that phones are more power-constrained than larger ones, it's more power and CPU efficient.

That's why setting desktop first breakpoints on this lib is controversial. But it seems abandoned like many other libs.