eqio — A simple, tiny alternative to element/container queries

A demo of eqio running in CodePen: https://codepen.io/stowball/full/zPYzWd/

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

The CSS

.media-object-eqio-\<400 {
/* customizations when less than or equal to 400px */
}
.media-object-eqio-\>700 {
/* customizations when greater than or equal to 700px */
}
  • 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/fixedetc as required.
  • eqio elements can’t be anything but overflow: visible.

The JavaScript

import Eqio from 'eqio';
var mediaObject = new Eqio(document.querySelector('.media-object'));
mediaObject.stop();

--

--

--

I design digital, craft and board games. I write code, fiction andreviews. I play games, guitar and football.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matt Stow

Matt Stow

I design digital, craft and board games. I write code, fiction andreviews. I play games, guitar and football.

More from Medium

Blow away your styles with Tailwind CSS!

From Global CSS to Component Library

Intro to FlatifyCSS — Modern flat design framework for the web

Use breackpoints as css classes in emotion react