weber / eqio

A simple, tiny alternative to element/container queries

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.

Table of Contents

• Demo
• Installation
  • npm
  • Direct <script> include
• Usage
  • The HTML
  • The CSS
  • The JavaScript

Demo

A complete demo is available here: https://codepen.io/stowball/pen/zPYzWd

Installation

npm

npm install eqio --save

Direct <script> include

<script src="https://unpkg.com/eqio/umd/eqio.min.js"></script>

Usage

The HTML

1. Add a class of eqio to the element.
2. Add a data-eqio-sizes attribute whose value is a JSON-serializable array of sizes.
3. Optionally add a 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:

• 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.

The CSS

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:

• 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.

The JavaScript

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)