Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stowball/eqio
A simple, tiny alternative to element/container queries
https://github.com/stowball/eqio
container-queries css element-queries javascript media-queries responsive-design
Last synced: about 1 month ago
JSON representation
A simple, tiny alternative to element/container queries
- Host: GitHub
- URL: https://github.com/stowball/eqio
- Owner: stowball
- License: mit
- Created: 2018-04-24T09:16:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T02:57:33.000Z (over 1 year ago)
- Last Synced: 2024-05-16T16:24:22.344Z (about 2 months ago)
- Topics: container-queries, css, element-queries, javascript, media-queries, responsive-design
- Language: JavaScript
- Homepage: https://codepen.io/stowball/pen/zPYzWd
- Size: 1.14 MB
- Stars: 427
- Watchers: 9
- Forks: 11
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-stars - eqio
- awesome-stars - eqio - A simple, tiny alternative to element/container queries (JavaScript)
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 [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)s under-the-hood (so is [well supported](https://caniuse.com/#feat=intersectionobserver) in “good” browsers and [easily polyfilled](https://github.com/w3c/IntersectionObserver) in others) to apply appropriately named classes to the component when necessary.
## Table of Contents
- [Demo](#demo)
- [Installation](#installation)
- [npm](#npm)
- [Direct `` include](#direct-script-include)
- [Usage](#usage)
- [The HTML](#the-html)
- [The CSS](#the-css)
- [The JavaScript](#the-javascript)
## Demo
A complete demo is available here: **https://codepen.io/stowball/pen/zPYzWd**
## Installation
### npm
```sh
npm install eqio --save
```
### Direct `<script>` include
```html
<script src="https://unpkg.com/eqio/umd/eqio.min.js">
```
## 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.
```html
…
```
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.
```scss
.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`.
```js
import Eqio from 'eqio';
```
In your JS, tell eqio which elements are to be made responsive by passing a DOM reference to `Eqio`.
```js
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:
```js
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](http://mattstow.com)
Licensed under the MIT license *(see [LICENSE](https://github.com/stowball/eqio/blob/master/LICENSE) for details)*