{"id":13394293,"url":"https://github.com/stowball/eqio","last_synced_at":"2025-04-04T18:10:01.362Z","repository":{"id":57226492,"uuid":"130828239","full_name":"stowball/eqio","owner":"stowball","description":"A simple, tiny alternative to element/container queries","archived":false,"fork":false,"pushed_at":"2023-01-04T02:57:33.000Z","size":1194,"stargazers_count":428,"open_issues_count":11,"forks_count":11,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-12-24T09:34:07.061Z","etag":null,"topics":["container-queries","css","element-queries","javascript","media-queries","responsive-design"],"latest_commit_sha":null,"homepage":"https://codepen.io/stowball/pen/zPYzWd","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stowball.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-24T09:16:56.000Z","updated_at":"2024-09-21T12:40:00.000Z","dependencies_parsed_at":"2023-02-01T18:01:27.686Z","dependency_job_id":null,"html_url":"https://github.com/stowball/eqio","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Feqio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Feqio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Feqio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Feqio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stowball","download_url":"https://codeload.github.com/stowball/eqio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["container-queries","css","element-queries","javascript","media-queries","responsive-design"],"created_at":"2024-07-30T17:01:15.170Z","updated_at":"2025-04-04T18:10:01.343Z","avatar_url":"https://github.com/stowball.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/zgS1EBe.png\" height=\"150\" alt=\"eqio logo\" /\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://travis-ci.org/stowball/eqio\"\u003e\n      \u003cimg src=\"https://img.shields.io/travis/stowball/eqio/master.png?style=flat-square\" alt=\"Travis build status\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.org/package/eqio\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/eqio.png?style=flat-square\" alt=\"npm package\" /\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n\u003c/p\u003e\n\n# eqio\n\n**A simple, tiny alternative to element/container queries**\n\neqio 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.\n\nIt 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.\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Installation](#installation)\n  - [npm](#npm)\n  - [Direct `\u003cscript\u003e` include](#direct-script-include)\n- [Usage](#usage)\n  - [The HTML](#the-html)\n  - [The CSS](#the-css)\n  - [The JavaScript](#the-javascript)\n\n## Demo\n\nA complete demo is available here: **https://codepen.io/stowball/pen/zPYzWd**\n\n## Installation\n\n### npm\n\n```sh\nnpm install eqio --save\n```\n\n### Direct `\u003cscript\u003e` include\n\n```html\n\u003cscript src=\"https://unpkg.com/eqio/umd/eqio.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### The HTML\n\n1. Add a class of `eqio` to the element.\n2. Add a `data-eqio-sizes` attribute whose value is a JSON-serializable array of sizes.\n3. Optionally add a `data-eqio-prefix` attribute whose value is used as the prefix for your class names.\n\n```html\n\u003cdiv\n  class=\"media-object eqio\"\n  data-eqio-sizes='[\"\u003c400\", \"\u003e700\"]'\n  data-eqio-prefix=\"media-object\"\n\u003e\n  …\n\u003c/div\u003e\n```\n\nThe above component will:\n\n* be able to be customised when *its* width is 400 or smaller (`\"\u003c\"` is a synonym for `max-width`, not “less than”).\n* be able to be customised when *its* width is 700 or greater (`\"\u003e\"` is a synonym for `min-width`, not “greater than”).\n* apply the following classes `media-object-eqio-\u003c400` and `media-object-eqio-\u003e700` as appropriate. If `data-eqio-prefix` had not been specified, the applied classes would be `eqio-\u003c400` and `eqio-\u003e700`.\n\n*Note: Multiple classes can be applied at once.*\n\n### The CSS\n\nIn your CSS, write class names that match those applied to the HTML.\n\n```scss\n.media-object-eqio-\\\u003c400 {\n  /* customizations when less than or equal to 400px */\n}\n\n.media-object-eqio-\\\u003e700 {\n  /* customizations when greater than or equal to 700px */\n}\n```\n\n*Note:*\n* *eqio classes include the special characters `\u003c` \u0026 `\u003e`, so they must be escaped with a `\\` in your CSS.*\n* *eqio elements are `position: relative` by default, but your component can override that to `absolute`/`fixed` etc as required.*\n* *eqio elements can't be anything but `overflow: visible`.*\n* *To prevent accidental creation of horizontal scrollbars, a parent element is required to `overflow-x: hidden`. It is recommended to apply this to `body`.*\n\n### The JavaScript\n\nIf using a module bundler, such as webpack, first import `Eqio`.\n\n```js\nimport Eqio from 'eqio';\n```\n\nIn your JS, tell eqio which elements are to be made responsive by passing a DOM reference to `Eqio`.\n\n```js\nvar mediaObject = new Eqio(document.querySelector('.media-object'));\n```\n\nShould you need to stop this element from being responsive, you can call `.stop()` on your instance:\n\n```js\nmediaObject.stop();\n```\n\nThis will remove all observers and eqio internals, except for the class names that were applied at the time.\n\n---\n\nCopyright (c) 2018 [Matt Stow](http://mattstow.com)  \nLicensed under the MIT license *(see [LICENSE](https://github.com/stowball/eqio/blob/master/LICENSE) for details)*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Feqio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstowball%2Feqio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Feqio/lists"}