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.
Table of Contents
A complete demo is available here: https://codepen.io/stowball/pen/zPYzWd
npm install eqio --save
- Add a class of
eqioto the element.
- Add a
data-eqio-sizesattribute whose value is a JSON-serializable array of sizes.
- Optionally add a
data-eqio-prefixattribute whose value is used as the prefix for your class names.
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->700as appropriate. If
data-eqio-prefixhad not been specified, the applied classes would be
Note: Multiple classes can be applied at once.
In your CSS, write class names that match those applied to the HTML.
- eqio classes include the special characters
>, so they must be escaped with a
\in your CSS.
- eqio elements are
position: relativeby default, but your component can override that to
fixedetc as required.
- eqio elements can't be anything but
If using a module bundler, such as webpack, first import
In your JS, tell eqio which elements are to be made responsive by passing a DOM reference to
var mediaObject = document;
Should you need to stop this element from being responsive, you can call
.stop() on your instance:
This will remove all observers and eqio internals, except for the class names that were applied at the time.