stowball/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.
• To prevent accidental creation of horizontal scrollbars, a parent element is required to overflow-x: hidden. It is recommended to apply this to body.

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)

eqio's Issues

Resizing container width via CSS or Script messes with the eqio classes

I have something like this:

<div class='prl-interface eqio' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>

And have CSS classes like these:

.prl-eqio-\<961\.98, .prl-eqio-\<1169\.98, .prl-eqio-\>962 etc

this does work fine when resizing the browser window so if I end up resizing to width 1000px I get:

<div class='prl-interface eqio prl-eqio->546 prl-eqio->738 prl-eqio-<1169.98 prl-eqio->962' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>

But if I resize using a Script or CSS where let's say I add a right margin of 230px to a 1230px width container to get the same 1000px I get:

<div class='prl-interface eqio prl-eqio-<1169.98' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>

So most of the classes are not added and I lose the styles I could've added on the prl-eqio->962 class for example.
The worst part is that as it could add prl-eqio-<1169.98, it could add prl-eqio->962 instead, making it totally random and unpredictable.

What can I do in this case to fix it?

thanks in advance.

eqio__trigger elements create horizontal scrollbars

Hi Matt,

I really like the simple approach to have something like container/element queries. While trying to adapt your approach to an Angular directive I realized that the trigger elements (.eqio__trigger) generate a horizontal scrollbar when the width doesn't fit into viewport anymore. As this element may only be visually hidden to make the IntersectionObserver working, the whole idea seems to be limited to some use cases.

Did you use eqio yourself in mobile first projects to build components that self adapt to their parents width?

Thanks,
Markus