-
Notifications
You must be signed in to change notification settings - Fork 40
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
Feature debug #31
base: master
Are you sure you want to change the base?
Feature debug #31
Conversation
Hi @willemvb. Thanks for submitting. My original proof of concept worked in a similar way using the content property on a pseudo element but the problem I encountered is that, by default at least, Avalanche has breakpoints that overlap each other. For example, if the viewport is 700px wide then it falls under the 'handheld', 'handheld-and-up' AND 'portable' breakpoints. Because 'portable' is last in the list (and so the generated code comes after the others) that is the one that gets shown but I really think that ALL applicable breakpoints should be shown. I haven't been able to come up with a workaround for this as yet. Maybe we try and list all the breakpoints somehow and then highlight the 'active' ones? Not sure how this could be accomplished though. Tom |
Hey Tom, thanks for reviewing. I have the habit of not letting media queries overlap, but you're absolutely right: it should combine all breakpoints one way or another. I think a CSS only solution is doable if we generate combinations of media queries, and set the content property accordingly to the combination of keys. The more complex combinations should come last to overwrite the simpler ones. The difficulty lies in the combination of queries: they can have and & or conditions, different media-types, ... Some sort of deconstruction of the original media queries is needed here. I made a new proof in Sassmeister http://www.sassmeister.com/gist/bcdff07e684a1f64d880f4d85207c5a5 Possibly not the shortest version, I tried to keep it readable. Might need a lot of real-life testing, and only handles |
I've revisited this a couple of times but still haven't been able to come up with a satisfactory solution. I think using the |
Hey Tom, I pushed a small demo to this branch To fix the overlapping mediaqueries, I needed to make all possible combinations for all mediaqueries and fill out the This is, unfortunately, not that straight-forward, the result is quite some code :) To test yourself:
|
Proof of concept for #24 with an
$av-enable-debug
flag to show the current breakpoint.