{"id":22944484,"url":"https://github.com/pinkhominid/wc-responsive-container","last_synced_at":"2025-06-30T13:40:13.789Z","repository":{"id":42692140,"uuid":"266430766","full_name":"pinkhominid/wc-responsive-container","owner":"pinkhominid","description":"Web component to allow an author to control styling based on the size of a containing element rather than the size of the user’s viewport","archived":false,"fork":false,"pushed_at":"2023-03-05T15:14:24.000Z","size":1552,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-15T23:32:44.299Z","etag":null,"topics":["component","container","layout","media","queries","query","responsive","wc","web","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/pinkhominid.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}},"created_at":"2020-05-23T22:36:24.000Z","updated_at":"2023-03-04T05:37:39.000Z","dependencies_parsed_at":"2022-08-23T23:00:25.188Z","dependency_job_id":null,"html_url":"https://github.com/pinkhominid/wc-responsive-container","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkhominid%2Fwc-responsive-container","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkhominid%2Fwc-responsive-container/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkhominid%2Fwc-responsive-container/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkhominid%2Fwc-responsive-container/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pinkhominid","download_url":"https://codeload.github.com/pinkhominid/wc-responsive-container/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229711429,"owners_count":18112130,"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":["component","container","layout","media","queries","query","responsive","wc","web","webcomponents"],"created_at":"2024-12-14T14:18:51.798Z","updated_at":"2024-12-14T14:18:52.237Z","avatar_url":"https://github.com/pinkhominid.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wc-responsive-container\n\nWeb component to allow an author to control styling based on the size of a containing element rather than the size of the user’s viewport.\n\nAn implementation based on Philip Walton's [Responsive Components: a Solution to the Container Queries Problem](https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/) using custom elements and resize observer.\n\n\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg width=\"600\" src=\"https://raw.githubusercontent.com/pinkhominid/wc-responsive-container/master/demo.gif\" alt=\"Demo gif\"\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n## Why?\nIf a container is within a dynamic app layout that can affect the container size, e.g. layout has closable drawers, it becomes difficult to encapsulate and localize the responsive logic within the container. Media queries as they exist today fall short. [Container queries](https://wicg.github.io/container-queries/) are a long desired CSS feature that could help, but unfortunately progress has stalled.\n\n## Install\n\n```js\nnpm i wc-responsive-container\n```\n\n## Example\n\n```html\n\u003cstyle\u003e\n  * {\n    box-sizing: border-box;\n  }\n  body {\n    margin: 0;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  article {\n    width: 76%;\n    height: 500px;\n  }\n  section {\n    background-color: lightgray;\n    outline: 3px dotted tomato;\n    padding: 2rem;\n  }\n  wc-responsive-container {\n    min-height: 100%;\n    display: grid;\n    grid-gap: 2rem;\n    padding: 2rem;\n    outline: 3px dotted skyblue;\n  }\n  wc-responsive-container.md {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  wc-responsive-container.md \u003e [md-colspan=\"2\"] {\n    grid-column: span 2;\n  }\n  wc-responsive-container.md \u003e [md-colspan=\"3\"] {\n    grid-column: span 3;\n  }\n\u003c/style\u003e\n\u003cscript type=\"module\"\u003e\n  // Using @web/dev-server or your favorite bundler...\n  import 'wc-responsive-container';\n\u003c/script\u003e\n\u003carticle\u003e\n  \u003cwc-responsive-container breaks='{\"sm\": 300, \"md\": 500, \"lg\": 700, \"xl\": 900}'\u003e\n    \u003csection md-colspan=\"1\"\u003e\n      1\n    \u003c/section\u003e\n    \u003csection md-colspan=\"2\"\u003e\n      2\n    \u003c/section\u003e\n    \u003csection md-colspan=\"3\"\u003e\n      3\n    \u003c/section\u003e\n  \u003c/wc-responsive-container\u003e\n\u003c/article\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinkhominid%2Fwc-responsive-container","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpinkhominid%2Fwc-responsive-container","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinkhominid%2Fwc-responsive-container/lists"}