1.0.4 • Published 6 months ago
@augustsson/width-modifier v1.0.4
width-modifier
See Philip Walton's Responsive Components: a Solution to the Container Queries Problem https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
Implementation based on https://github.com/pinkhominid/wc-responsive-container
How to use
Any elements with the class width-modifier will be evaluated
Add the custom property --width-modifier on the format
--width-modifier: class1 0 200, class2 200 500, class3 500;
To have width-modifer set class1 when the element is >= 0 and < 200, class2 when >= 200 and < 500 and class3 when >= 500
It is also possible to use custom properties as values
--width-modifier: class 0 var(--max);