ResponsiveComponents - rcomps
Based on the script by Philip Walton, here in form of an NPM plugin (https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/). If you work with components you will often reach the limits with media queries. To increase reusability, however, you must be independent of the viewport. And this is exactly where container queries come into play.
Installation
npm i rcomps --saveyarn add rcomps --D
Usage
The simplest method is to mark the component with the tag data-observe-resizes
.
... <!-- Result --> ...
In this case, the predefined breakpoints are used (xs: 320, sm: 560, m: 768, l: 960, xl: 1200
). You can overwrite the breakpoints with a new object - important here is to specify the breakpoints in px.
However, you are even more flexible if you can define breakpoints directly at the component. Nice side effect, you can also trigger utility classes (e.g. from tailwind) via the breakpoints.
... <!-- Result --> ...
If you use utility classes, you can trigger them individually, depending on the breakpoint. Adding the data attribute data-utility
adds only one class at a time. This avoids the order around CSS when it comes to overwriting the declarations.
... <!-- Result --> ...
Browser Support
- Firefox 50+
- Chrome
- Internet Explorer 10+
- Edge
- Safari Desktop 10+
- Safari Mobile
License
MIT
Thanks
To Philip Walton @philipwalton