Need help with eqio?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

stowball
420 Stars 8 Forks MIT License 11 Commits 4 Opened issues

Description

A simple, tiny alternative to element/container queries

Services available

!
?

Need anything else?

Contributors list

No Data

eqio logo

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

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.

Table of Contents

Demo

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

Installation

npm

npm install eqio --save

Direct
 include


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.

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-&gt;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)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.