A simple, tiny alternative to element/container queries
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 IntersectionObserver
s 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.
A complete demo is available here: https://codepen.io/stowball/pen/zPYzWd
npm install eqio --save
<script>
include<script src="https://unpkg.com/eqio/umd/eqio.min.js"></script>
eqio
to the element.data-eqio-sizes
attribute whose value is a JSON-serializable array of sizes.data-eqio-prefix
attribute whose value is used as the prefix for your class names.<div
class="media-object eqio"
data-eqio-sizes='["<400", ">700"]'
data-eqio-prefix="media-object"
>
…
</div>
The above component will:
"<"
is a synonym for max-width
, not “less than”).">"
is a synonym for min-width
, not “greater than”).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.
In your CSS, write class names that match those applied to the HTML.
.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:
<
& >
, so they must be escaped with a \
in your CSS.
position: relative
by default, but your component can override that to absolute
/fixed
etc as required.
overflow: visible
.
overflow-x: hidden
. It is recommended to apply this to body
.
If using a module bundler, such as webpack, first import Eqio
.
import Eqio from 'eqio';
In your JS, tell eqio which elements are to be made responsive by passing a DOM reference to Eqio
.
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:
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)