useBreakpoint value names are hard to comprehend about egghead-next HOT 6 CLOSED

i wouldn’t recommend (or even consider) patching tailwind to use a different system, and i understand “md” etc were probably trying to match tailwind, but it’s two different contexts IMO

We are talking about the same context imo, because we use these "js-defined" (formerly md, named as isMinMD in my PR) breakpoints to render or not certain components depending on viewport sizes (as we usually do with CSS) in situations when just hide/show with CSS is not appropriate. So keeping names of these js-breakpoints similar to tailwindcss naming seems good idea to me.

from egghead-next.

I think I like bpMinSM (or some form of it) approach the most — it’s descriptive thanks to the bp keyword, extendable with max-width breakpoints (if we ever need them), while still resembling Tailwind's responsive classes.

Device names would need a separate function exported for max-width breakpoints. Tailwind does support custom breakpoint names which allows for consistency across the board.

I also find idea of ergonomic breakpoint variables interesting.

from egghead-next.

from egghead-next.

from egghead-next.

Related PR: #307
What about “ergonomic” names - I think that keep bpMinXX will allow us to stay consistent (keeping in mind we use tailwindcss with its xx:-like breakpoint classnames).
What do you think?

from egghead-next.

Demo of how this approach works: https://share.getcloudapp.com/NQuKyD0r

usage:

from egghead-next.