search

grapp-dev / stacks

A set of components for building layouts in React Native. Powered by React Native Unistyles.
https://stacks.grapp.dev
MIT License
985 stars 24 forks source link

What about breakpoints? #4

Closed julienrondeau closed 4 years ago

julienrondeau commented 4 years ago

hey there,

really nice work and I look forward to test it...

Just to know : is there a way to use breakpoints for having grids with other screens sizes?

thanks

mobily commented 4 years ago

@julienrondeau thanks for the feedback! 😊 breakpoints support is on my TODO list as well, not sure how it will look like eventually, but I was thinking about adding a similar thing as you may find in Braid Layout API (look for responsive prop), for instance:

<Stack space={[2, 4]}>…</Stack>
// 2 for mobile screen size
// 4 for tablet screen size

WDYT?

julienrondeau commented 4 years ago

@mobily thanks for this quick answer :)

well it 's a good idea, but may be for more readability something like : <Stack space={[xs: 1, s: 2, m:4]}>... ? or <Stack space={[smallMobile: 1, mobile: 2, tablet: 4]}>... ?

with may be a way to customize breakpoints names and sizes ....?

just ideas...

thanks

mobily commented 4 years ago

@julienrondeau breakpoints support has been added, however, I picked out Braid approach, I believe 3 primary breakpoints should be enough for most apps (especially for mobile apps) and shorter syntax using an array of values for different screen sizes might reduce a redundant noise in code, and might be more developer-friendly as well ;)

anyway, thank you for your suggestion 💯

you may want to take a look on updated docs here: https://mobily.github.io/stacks/docs/breakpoints