Feature debug

[willemvb]

Proof of concept for #24 with an $av-enable-debug flag to show the current breakpoint.

[colourgarden]

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

[willemvb]

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 screen, print media types for now.

[colourgarden]

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 content property on :before is the correct way to go and I tried to work with CSS custom properties to see if I could concatenate the breakpoint aliases but custom properties don't really inherit. Feels like there should be a way to achieve this...

[willemvb]

Hey Tom,

I pushed a small demo to this branch /demo/index.html to see overlapping queries in action.

To fix the overlapping mediaqueries, I needed to make all possible combinations for all mediaqueries and fill out the content property accordingly for each combination.

This is, unfortunately, not that straight-forward, the result is quite some code :)

To test yourself:

• npm install
• Adapt /demo/style/scss
• Compile with npm run demo
• Refresh /demo/index.html