{"id":15487626,"url":"https://github.com/ahmadawais/styled-responsive-media-queries","last_synced_at":"2025-07-15T11:10:28.115Z","repository":{"id":56571478,"uuid":"156698525","full_name":"ahmadawais/Styled-Responsive-Media-Queries","owner":"ahmadawais","description":"Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.","archived":false,"fork":false,"pushed_at":"2020-11-11T12:12:48.000Z","size":83,"stargazers_count":32,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-23T10:52:54.055Z","etag":null,"topics":["css-in-js","emotion","media-queries","responsive","styled","styled-components"],"latest_commit_sha":null,"homepage":"https://NodeCLI.com/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=ahmadawais/Styled-Responsive-Media-Queries","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahmadawais.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":".github/funding.yml","license":null,"code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://github.com/ahmadawais/sponsor","https://NodeCLI.com","https://VSCode.pro","https://NextjsBeginner.com"]}},"created_at":"2018-11-08T11:44:55.000Z","updated_at":"2025-06-16T14:56:34.000Z","dependencies_parsed_at":"2022-08-15T21:10:31.298Z","dependency_job_id":null,"html_url":"https://github.com/ahmadawais/Styled-Responsive-Media-Queries","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/ahmadawais/Styled-Responsive-Media-Queries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadawais%2FStyled-Responsive-Media-Queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadawais%2FStyled-Responsive-Media-Queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadawais%2FStyled-Responsive-Media-Queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadawais%2FStyled-Responsive-Media-Queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmadawais","download_url":"https://codeload.github.com/ahmadawais/Styled-Responsive-Media-Queries/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadawais%2FStyled-Responsive-Media-Queries/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265430487,"owners_count":23764003,"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":["css-in-js","emotion","media-queries","responsive","styled","styled-components"],"created_at":"2024-10-02T06:41:11.780Z","updated_at":"2025-07-15T11:10:28.091Z","avatar_url":"https://github.com/ahmadawais.png","language":"JavaScript","funding_links":["https://github.com/ahmadawais/sponsor","https://NodeCLI.com","https://VSCode.pro","https://NextjsBeginner.com"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://twitter.com/MrAhmadAwais/\"\u003e\n    \u003cimg src=\"https://on.awais.dev/jkur9j68/c\" width=\"120\"/\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eStyled-Responsive-Media-Queries \u003ccode\u003estyled-rmq\u003c/code\u003e\u003c/h1\u003e\n\n  \u003cp align=\"center\"\u003e\n    Styled Components Responsive Media Queries — Standard sizes from Chrome DevTools.\n  \u003c/p\u003e\n\n[![DOWNLOADS](https://img.shields.io/npm/dt/styled-rmq?label=DOWNLOADS%20%20❯\u0026colorA=6A788D\u0026colorB=6A788D\u0026style=flat)](https://www.npmjs.com/package/styled-rmq) [![Node.js CLI](https://img.shields.io/badge/-NodeCLI.com-gray.svg?colorB=6A788D\u0026style=flat)][n] [![Learn VSCode](https://img.shields.io/badge/-VSCODE.pro-gray.svg?colorB=6A788D\u0026style=flat)][v] [![Sponsor](https://img.shields.io/badge/-Sponsor-gray.svg?colorB=6A788D\u0026style=flat)](https://github.com/ahmadawais/sponsor?utm_source=FOSS)\n[![Follow @MrAhmadAwais on Twitter](https://img.shields.io/badge/FOLLOW%20@MRAHMADAWAIS%20%E2%86%92-gray.svg?colorA=6A788D\u0026colorB=6A788D\u0026style=flat)](https://twitter.com/mrahmadawais/)\n\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n[![📟](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/install.png)](./../../)\n\n## Install\n\n```sh\nnpm install --save @emotion/core @emotion/styled styled-rmq\n\n# OR\nnpm install --save styled-components styled-rmq\n```\n\n\u003cbr\u003e\n\n[![⚙️](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/usage.png)](./../../)\n\n## Usage\n\n```js\nimport styled from '@emotion/styled'; // OR import styled from 'styled-components';\nimport rmq from 'styled-rmq';\n\nconst YourComponent = styled.div`\n    background: tomato;\n\n    ${rmq('xl')} { background: tomato; }  /* xl: 2560px : 4K */\n    ${rmq('ll')} { background: hotpink; } /* ll: 1440px : Laptop Large */\n    ${rmq('ls')} { background: orange; }  /* ls: 1024px : Laptop */\n    ${rmq('t')}  { background: skyblue; } /* t:  768px  : Tablet */\n    ${rmq('ml')} { background: purple; }  /* ml: 425px  : Mobile Large */\n    ${rmq('mm')} { background: silver; }  /* mm: 375px  : Mobile Medium */\n    ${rmq('ms')} { background: green; }   /* ms: 320px  : Mobile Small */\n    /**\n     *  Custom Media Queries\n     * — Think of elements instead of size\n     * — Make them look good on all sizes.\n     *\n     * E.g. Small tablet size 585px.\n    */\n    ${rmq('585')} { background: hotpink; } /* custom: 585px */\n`;\n\nexport const Component = (\n  \u003cYourComponent\u003eBeing Used Here!\u003c/YourComponent\u003e\n);\n```\n\n## Some Context + Examples\n\nAll of the sizes used in the responsive media queries in `styled-rmq` come directly from the Chrome Dev Tools. I prefer `px` and [don't use `em` for media queries](https://adamwathan.me/dont-use-em-for-media-queries/). I'll collect a list of sites using this package below.\n\n- [VSCode Power User Course][n]\n- [Node CLI Course][n]\n\n![RMQ](https://on.awais.dev/JruAKpw9/c)\n\n\u003cbr\u003e\n\n[![📝](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/log.png)](changelog.md)\n\n## Changelog\n\n[❯ Read the changelog here →](changelog.md)\n\n\u003cbr\u003e\n\n\u003csmall\u003e**KEY**: `📦 NEW`, `👌 IMPROVE`, `🐛 FIX`, `📖 DOC`, `🚀 RELEASE`, and `🤖 TEST`\n\n\u003e _I use [Emoji-log](https://github.com/ahmadawais/Emoji-Log), you should try it and simplify your git commits._\n\n\u003c/small\u003e\n\n\u003cbr\u003e\n\n[![📃](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/license.png)](./../../)\n\n## License \u0026 Conduct\n\n- MIT © [Ahmad Awais](https://twitter.com/MrAhmadAwais/)\n- [Code of Conduct](code-of-conduct.md)\n\n## Sponsor\n\nMe ([Ahmad Awais](https://twitter.com/mrahmadawais/)) and my incredible wife ([Maedah Batool](https://twitter.com/MaedahBatool/)) are two engineers who fell in love with open source and then with each other. You can read more [about me here](https://ahmadawais.com/about). If you or your company use any of my projects or like what I’m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.\n\n[![Ahmad on Twitter](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social\u0026label=Follow%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/)\n\n### [NodeCLI.com][n] — Learn to build Node.js CLI Automation\n\n\u003e This repository is part of the [NodeCLI.com][n] course.\n\nAfter building hundreds of developer automation tools used by millions of developers, I am sharing exactly how you can do it yourself with minimum effective effort. Learn to build Node.js \u0026 JavaScript based CLI (Command Line Interface) apps. Automate the grunt work, do more in less time, impress your manager, and help the community.\n→ I'm sharing it all in this online video course. [Node CLI Automation\nwithout wasting a 1,000 hours][n] →\u003c/p\u003e\n\n[![Node CLI Course](https://raw.githubusercontent.com/ahmadawais/stuff/master/nodecli/featured.jpg)][n]\n\n[![Node CLI](https://img.shields.io/badge/-NodeCLI.com%20%E2%86%92-gray.svg?colorB=488640\u0026style=flat)][n]\n\n[n]: https://NodeCLI.com?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=ahmadawais/styled-rmq\n\n[![Awais on Twitter](https://raw.githubusercontent.com/ahmadawais/stuff/master/sponsor/sponsor.jpg)](https://github.com/AhmadAwais/sponsor)\n\n[v]: https://VSCode.pro/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=ahmadawais/Styled-Responsive-Media-Queries\n[n]: https://NodeCLI.com/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=ahmadawais/Styled-Responsive-Media-Queries\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadawais%2Fstyled-responsive-media-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadawais%2Fstyled-responsive-media-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadawais%2Fstyled-responsive-media-queries/lists"}