{"id":23788601,"url":"https://github.com/krosscode/elquery","last_synced_at":"2026-04-13T21:31:44.502Z","repository":{"id":116957897,"uuid":"200818398","full_name":"krosscode/elquery","owner":"krosscode","description":null,"archived":false,"fork":false,"pushed_at":"2019-08-06T13:23:13.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-21T12:22:40.806Z","etag":null,"topics":["css","javascript","media-queries","web-components"],"latest_commit_sha":null,"homepage":null,"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/krosscode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-06T09:18:43.000Z","updated_at":"2019-08-06T13:40:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"f55e157a-7d55-49eb-8c45-b009ba8df833","html_url":"https://github.com/krosscode/elquery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/krosscode/elquery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krosscode%2Felquery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krosscode%2Felquery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krosscode%2Felquery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krosscode%2Felquery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krosscode","download_url":"https://codeload.github.com/krosscode/elquery/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krosscode%2Felquery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31771813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","javascript","media-queries","web-components"],"created_at":"2025-01-01T16:32:50.667Z","updated_at":"2026-04-13T21:31:44.456Z","avatar_url":"https://github.com/krosscode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elquery\n\nElement based media queries, for easier dynamic elements! Very light, and super simple to use.\n\n## Compatibility\n\nElquery uses [`window.requestAnimationFrame()`](https://caniuse.com/#feat=requestanimationframe) which has very good browser support. The index.js file is in it's raw ES6 module form, you can do whatever you need to for your use case, like running it through babel.\n\n## Example Usage\n\n### HTML\n\nThe `data-elquery` attribute is where you define the breakpoints of the element. The breakpoints are comma-seperated. For example: `416,512,576`.\n\nOnce the element is more than or equal to a breakpoint width, the breakpoint is added as a class, so you can easily style it in CSS. For example 416 would be added to the element as `.elquery-416`.\n\nYou can optionally give a breakpoint an identifier by prefixing it with the name and a colon. For example: `md:416` will add the `.elquery-md` class once the element has a width of 416 or more. If you do not define a breakpoint identifier. This might be preferable so you don't have to replace every instance of the number in your code, if you change a breakpoint on the element.\n```html\n\u003cdiv class=\"contact-card\" data-elquery=\"md:416,lg:512,xl:576\"\u003e\n    \u003cdiv class=\"avatar\"\u003e\u003c/div\u003e\n\n    \u003cdiv class=\"info\"\u003e\n        \u003cp class=\"name\"\u003eWallace Smith\u003c/p\u003e\n        \u003cp class=\"job-title\"\u003eLead Developer\u003c/p\u003e\n\n        \u003cp class=\"email\"\u003e\u003cstrong\u003eE-mail:\u003c/strong\u003e wsmith@example.com\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### JS\n\nAll you need to do is import elquery and call the `.init()` method.\n\n```js\nimport elquery from 'elquery';\n\n// Initialize elquery\nelquery.init();\n```\n\nYou can initialize elquery at any point, but I recommend initializing it as early as you can, so the elements based media queries work right away.\n\n### CSS\n\nHere is some example CSS for the HTML above.\n\n```css\n/* md styling (md:416) */\n\n.contact-card.elquery-md {\n    text-align: left;\n    flex-direction: row;\n}\n\n.contact-card.elquery-md .avatar {\n    margin-bottom: 0;\n    margin-right: 8rem;\n}\n\n\n\n/* lg styling (lg:512) */\n\n.contact-card.elquery-lg .avatar {\n    width: 32rem;\n    height: 32rem;\n}\n\n\n\n/* xl styling (xl:576) */\n\n.contact-card.elquery-xl {\n    color: white;\n    background-color: rgb(58, 133, 184);\n}\n\n.contact-card.elquery-xl .avatar {\n    width: 48rem;\n    height: 48rem;\n}\n\n.contact-card.elquery-xl .name {\n    font-size: 8rem;\n}\n\n.contact-card.elquery-xl .job-title {\n    font-size: 6rem;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrosscode%2Felquery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrosscode%2Felquery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrosscode%2Felquery/lists"}