npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wingnpm/eqio

v0.1.5

Published

A simple, tiny alternative to element/container queries

Downloads

5

Readme

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

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)