-
Notifications
You must be signed in to change notification settings - Fork 24
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Additional range selectors #848
Comments
@iRyanBell, good time. Thanks for using style-breakpoints. All of the above problems only arise because you ignore the mobile first approach. The existing api is enough to cover all your needs. |
Can you elaborate more on the mobile first approach? It's not quite clear to me why |
@iRyanBell if you have any difficulties with solving existing problems, please send a link with an example code to codesandbox / stackblitz. I will gladly help you. |
How would you ideally query down from
|
@iRyanBell take a look at this example. |
Mobile first - from smallest to largest. |
Ah, I see what you mean now by the mobile first approach! That works, just using So, from this perspective, you can't write a media query < sm (or your lowest breakpoint) with |
@iRyanBell "Desktop first" has many drawbacks. If following the "mobile first" principle you add the functionality you need, then in "desktop first" you need to hide what you already have and you constantly have to write display: none; |
@iRyanBell maybe these videos will help you think mobile first. |
I'm totally on board with a mobile-first mindset for cascading styles by additive viewport width. My complaint here was largely around the naming convention of |
@iRyanBell, I understand you, but I didn’t come up with the names for these functions myself. The styled-breakpoints API completely copies the media query api from bootstrap (145k stars). So we can say with complete confidence that this is the standard for the industry. Yes, English is not my first language, but bootstrap was invented in San Francisco. For some reason, I have no doubts about the correctness of the name.)) Thanks again for your interest.)) Perhaps, to fix the problem with down, you need to add another breakpoint
similar to Zurb Foundation media queries. Then your problem will be solved. Hmm ... Perhaps this is a great reason to think. |
Conceptually, I like to think of a breakpoint as a threshold value. If the breakpoint value is
500px
I would expect anabove
query to be >500px and abelow
query to be <500px.In the example:
up('md')
makes complete sense as being greater than or equal to md.only('md')
also makes total sense as selecting[md, lg)
.down('md')
I don't agree with, as it seems like it should be <md. Instead, it is <lg.between('md', 'lg')
follows this same logic asdown
, querying from[md, xl)
, when I would prefer[md, lg)
As this is currently written, there is no way to select
down()
from the lowest breakpoint, which is often the most useful breakpoint, as things are most likely to break the layout at this extreme value.down('xs')
is currently interpreted as <Sm (not <Xs).Proposed solution:
The names for this new query could be
downFrom
orupTo
.Alternatively,
down('md', orientation, true)
could use a third argument to specify the max-width ofmd
rather than the next higher breakpoint (lg). RenamingcalcMinWidth
->getWidthAtBreakpoint
andcalcMaxWidth
->getWidthAtNextBreakpoint
also helps to clarify the functionality.Here's a feature proposal of how the latter could look with 3 additional unit tests: https://github.com/iRyanBell/styled-breakpoints/tree/feat/is-below-break-proposal
The text was updated successfully, but these errors were encountered: