Is there an inconsistency with "mobile first" with some components and not others?

[dallanlee]

It seems like Mantine follows the mobile first development approach as seen in Grid - Responsive columns (and other components?). There is the initial span value for <Grid /> and the sm, md, lg, etc values change the column span at that size and up. However, in SimpleGrid - Breakpoints, cols sets the starting number of columns but is changed in breakpoints with maxWidth values, going down rather than up (i.e. not mobile first). Either I'm missing something or this is backwards, isn't it?

[rtivital]

All components except Grid use max-width, I think grid can be changed also to use max-width, but it will be a breaking change and I do not think that we will make it until 4.0

[dallanlee]

That's an interesting choice to me. It feels very strange (backwards) that one should provide maxWidth to the breakpoints prop to define the "max-width at which media query will work" instead of providing a minWidth for the minimum width at which the media query will apply the props/styles. Is 4.0 on the roadmap with a general timeframe or anything? I would vote to think of things from 0px up and use min-width whenever possible.

[rtivital]

Is 4.0 on the roadmap with a general timeframe or anything?

Q2 2022

It feels very strange (backwards) that one should provide maxWidth to the breakpoints

It all depends only on your previous experience. If you used min-width to create media queries then, of course, you'll feel strange. I used max-width my whole life, and min-width feels super strange to me.

[dallanlee]

It all depends only on your previous experience. If you used min-width to create media queries then, of course, you'll feel strange. I used max-width my whole life, and min-width feels super strange to me.

Well I certainly understand that sentiment. But there's also a strive for "standards" or common-ground as an industry. And when developing mobile-first, we naturally start from 0 and set min-width media queries as we work up to the designs/layouts of the larger viewports. I could develop either way, absolutely. But 0px up with min-width feels both to be the most logical and agreed-upon in the industry today. So I have no plans to move away from it so far. I echo my previous comment to use min-width whenever and wherever it makes sense when developing from 0 up. I get that it feels backwards for you and you are the creator of Mantine so I'm not expecting to impose "my ways" on you. Just expressing my opinion. Thanks for all you do @rtivital

[dallanlee]

I would like to request that Mantine be changed to support mobile-first development. Here's my initial idea: Mantine can continue to support "desktop-first" development with the maxWidth props and add support for mobile first by including minWidth props for those components. Simple. For components like Grid that support a starting value and xs, sm, md, etc size values for responsive behavior, an optional mobileFirst prop or maybe a mobileFirst global value could determine how the size values are applied—either from a minimum width or a maximum width. I haven't given it a lot of thought but wanted to get your thoughts, @rtivital

[rtivital]

Grid component uses min-width already, no need to change anything there, the only other place where we need to add min-width is in SimpleGrid component which we can do without any additional props. I'll add it in 3.2.

[dallanlee]

So Mantine seems to take the "desktop-first" approach throughout the library except with Grid from what I've discovered so far. I think it should be made consistent one way or the other. Another example of Mantine's "desktop-first" approach is Navbar. It has the baseWidth prop and the breakpoints objects prop which overrides the base going down in viewport size. I think that being an open-source project meant for others to use, Mantine should be mobile-first. Either way, I think it needs to be mentioned in either the 'Getting Started' or 'Learn the Basics' section that Mantine is "desktop-first." Maybe I'm naïve or out of line but I don't know of any significant libraries (https://getbootstrap.com/docs/4.1/extend/approach/#responsive, https://mui.com/getting-started/usage/#responsive-meta-tag, https://ant.design/components/layout/#components-layout-demo-responsive, https://chakra-ui.com/docs/features/responsive-styles) that don't take the mobile-first approach and wish I would have known this about Mantine from Day One.

[rtivital]

Sounds fine, I'll make AppShell mobile first