Refactored breakpoints #307
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/eggheadio/egghead-io-nextjs/62wh2w0pt |
…head-next into en/breakpoints-refactoring
|
in process of refactoring... |
| return keys | ||
| .map((key, ind) => ({['isMin' + key.toUpperCase()]: ind <= foundInd})) | ||
| .filter((_, ind) => ind) | ||
| .reduce((acc, cur) => ({...acc, ...cur}), {}) | ||
| } |
There was a problem hiding this comment.
Eventually we get the object like:
for the xl breakpoint
{
isMinXS: true,
isMinSM: true,
isMinMD: true,
isMinLG: true,
isMinXL: true,
isMin2XL: false,
isMin3XL: false,
}
"only mobile" breakpoint could be considered as !isMinXS or !isMinSM (portrait/landscape)
so, if we want to show some component on mobiles only we want to !isMinXS && <Component />
if we want to show component on md and bigger (768+) we should to isMinMD && <Component />
| const foundInd = keys.indexOf(breakpoint) | ||
| return keys | ||
| .map((key, ind) => ({['isMin' + key.toUpperCase()]: ind <= foundInd})) | ||
| .filter((_, ind) => ind) |
There was a problem hiding this comment.
Idea here is to filter out first zero value, because it's like default class in tailwindcss (flex-row vs sm:flex-row)
…kpoints-refactoring
…kpoints-refactoring
…kpoints-refactoring
…kpoints-refactoring
…kpoints-refactoring
Hopefully fixes this: #275
Used "mobile-first" approach to define breakpoints.
For CSS breakpoints (which we strive to use whenever it's possible) we use
bpMinXXnaming and I usedisMinXXfor the "js-defined" breakpoints.Demo of how this approach works: https://share.getcloudapp.com/NQuKyD0r