Add narrow/regular/wide viewport range utilities #1995
Conversation
🦋 Changeset detectedLatest commit: 6314d8d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| } | ||
| } | ||
|
|
||
| @media (min-width: $width-md) { |
There was a problem hiding this comment.
Something I'm wondering... should this be limited to
| @media (min-width: $width-md) { | |
| @media (min-width: $width-md) and (max-width: $width-xl - 0.02px) { |
so that these utilities only kick in when between the $width-md and $width-xl breakpoint and not from $width-md upwards.
There was a problem hiding this comment.
@simurai That's in fact how we're considering our viewport ranges to go. Take a look at https://github.com/github/primer/issues/580#issuecomment-1076890831 to see the media queries we're proposing. You can also see a visual of these breakpoint/viewport considerations here in this Figma frame. (only available for hubbers) 😁
The idea is for Narrow to wrap all "mobile"-friendly design patterns, and Regular all the "desktop"-friendly ones, including wider scenarios. The Wide viewport range in that case is a subset of Regular, applied on top of it.
✌️
There was a problem hiding this comment.
@simurai your comment made me thing of a scenario I haven't considered: when some area needs visibility on Regular but not on Wide scenarios.
I think we can support it like this:
<div class="show-whenRegular hide-whenWide">
...
</div>I've played with CSS specificities (in a way that doesn't try to reinvent the wheel in regards to the use of !important in our Primer CSS utilities) in this prototype, and have updated the PR accordingly.
Thank you! 🙇
There was a problem hiding this comment.
I see. Narrow is a range (0 - 768), but Regular and Wide behave more like "breakpoints" (from ... to infinity).
Ok, yeah.. that is probably safer and you don't have to remember to add both Regular and Wide. 👍
What are you trying to accomplish?
This PR adds viewport range utilities alongside our visibility/display options. It builds on the new Narrow/Regular/Wide nomenclature we're starting to adopt, which will be needed for new components such as
PageHeader.This proposal has been described as part of https://github.com/github/primer/issues/580 (only available for hubbers).
Are additional changes needed?