A simple, tiny alternative to element/container queries
npm install eqio

A simple, tiny alternative to element/container queries
eqio allows you to attain the holy grail of responsive web development/design systems: components that can adapt their styling based on their width, not the browser‘s.
It uses IntersectionObservers under-the-hood (so is well supported in “good” browsers and easily polyfilled in others) to apply appropriately named classes to the component when necessary.
- Demo
- Installation
- npm
- Direct include
- Usage
- The HTML
- The CSS
- The JavaScript
A complete demo is available here: https://codepen.io/stowball/pen/zPYzWd
``sh`
npm install eqio --save
`html`
1. Add a class of eqio to the element.data-eqio-sizes
2. Add a attribute whose value is a JSON-serializable array of sizes.data-eqio-prefix
3. Optionally add a attribute whose value is used as the prefix for your class names.
`html
class="media-object eqio"
data-eqio-sizes='["<400", ">700"]'
data-eqio-prefix="media-object"
>
…
The above component will:
be able to be customised when its* width is 400 or smaller (
"<" is a synonym for max-width, not “less than”).
be able to be customised when its* width is 700 or greater (">" is a synonym for min-width, not “greater than”).
* apply the following classes media-object-eqio-<400 and media-object-eqio->700 as appropriate. If data-eqio-prefix had not been specified, the applied classes would be eqio-<400 and eqio->700.Note: Multiple classes can be applied at once.
$3
In your CSS, write class names that match those applied to the HTML.
`scss
.media-object-eqio-\<400 {
/ customizations when less than or equal to 400px /
}.media-object-eqio-\>700 {
/ customizations when greater than or equal to 700px /
}
`Note:
eqio classes include the special characters
< & >, so they must be escaped with a \ in your CSS.*
eqio elements are position: relative by default, but your component can override that to absolute/fixed etc as required.*
eqio elements can't be anything but overflow: visible.*$3
If using a module bundler, such as webpack, first import
Eqio.`js
import Eqio from 'eqio';
`In your JS, tell eqio which elements are to be made responsive by passing a DOM reference to
Eqio.`js
var mediaObject = new Eqio(document.querySelector('.media-object'));
`Should you need to stop this element from being responsive, you can call
.stop() on your instance:`js
mediaObject.stop();
``This will remove all observers and eqio internals, except for the class names that were applied at the time.
---
Copyright (c) 2018 Matt Stow
Licensed under the MIT license (see LICENSE for details)