https://github.com/ahmadawais/styled-responsive-media-queries
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.
https://github.com/ahmadawais/styled-responsive-media-queries
css-in-js emotion media-queries responsive styled styled-components
Last synced: about 2 months ago
JSON representation
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.
- Host: GitHub
- URL: https://github.com/ahmadawais/styled-responsive-media-queries
- Owner: ahmadawais
- Created: 2018-11-08T11:44:55.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-11T12:12:48.000Z (over 4 years ago)
- Last Synced: 2024-10-19T07:53:43.253Z (6 months ago)
- Topics: css-in-js, emotion, media-queries, responsive, styled, styled-components
- Language: JavaScript
- Homepage: https://NodeCLI.com/?utm_source=github.com&utm_medium=referral&utm_campaign=ahmadawais/Styled-Responsive-Media-Queries
- Size: 81.1 KB
- Stars: 33
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Funding: .github/funding.yml
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
README
Styled-Responsive-Media-Queries styled-rmq
Styled Components Responsive Media Queries — Standard sizes from Chrome DevTools.
[](https://www.npmjs.com/package/styled-rmq) [][n] [][v] [](https://github.com/ahmadawais/sponsor?utm_source=FOSS)
[](https://twitter.com/mrahmadawais/)
[](./../../)
## Install
```sh
npm install --save @emotion/core @emotion/styled styled-rmq
# OR
npm install --save styled-components styled-rmq
```
[](./../../)
## Usage
```js
import styled from '@emotion/styled'; // OR import styled from 'styled-components';
import rmq from 'styled-rmq';
const YourComponent = styled.div`
background: tomato;
${rmq('xl')} { background: tomato; } /* xl: 2560px : 4K */
${rmq('ll')} { background: hotpink; } /* ll: 1440px : Laptop Large */
${rmq('ls')} { background: orange; } /* ls: 1024px : Laptop */
${rmq('t')} { background: skyblue; } /* t: 768px : Tablet */
${rmq('ml')} { background: purple; } /* ml: 425px : Mobile Large */
${rmq('mm')} { background: silver; } /* mm: 375px : Mobile Medium */
${rmq('ms')} { background: green; } /* ms: 320px : Mobile Small */
/**
* Custom Media Queries
* — Think of elements instead of size
* — Make them look good on all sizes.
*
* E.g. Small tablet size 585px.
*/
${rmq('585')} { background: hotpink; } /* custom: 585px */
`;
export const Component = (
Being Used Here!
);
```
## Some Context + Examples
All 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.
- [VSCode Power User Course][n]
- [Node CLI Course][n]
[](changelog.md)
## Changelog
[❯ Read the changelog here →](changelog.md)
**KEY**: `📦 NEW`, `👌 IMPROVE`, `🐛 FIX`, `📖 DOC`, `🚀 RELEASE`, and `🤖 TEST`
> _I use [Emoji-log](https://github.com/ahmadawais/Emoji-Log), you should try it and simplify your git commits._
[](./../../)
## License & Conduct
- MIT © [Ahmad Awais](https://twitter.com/MrAhmadAwais/)
- [Code of Conduct](code-of-conduct.md)
## Sponsor
Me ([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.
[](https://twitter.com/mrahmadawais/)
### [NodeCLI.com][n] — Learn to build Node.js CLI Automation
> This repository is part of the [NodeCLI.com][n] course.
After 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 & JavaScript based CLI (Command Line Interface) apps. Automate the grunt work, do more in less time, impress your manager, and help the community.
→ I'm sharing it all in this online video course. [Node CLI Automation
without wasting a 1,000 hours][n] →
[][n]
[][n]
[n]: https://NodeCLI.com?utm_source=github&utm_medium=referral&utm_campaign=ahmadawais/styled-rmq
[](https://github.com/AhmadAwais/sponsor)
[v]: https://VSCode.pro/?utm_source=github.com&utm_medium=referral&utm_campaign=ahmadawais/Styled-Responsive-Media-Queries
[n]: https://NodeCLI.com/?utm_source=github.com&utm_medium=referral&utm_campaign=ahmadawais/Styled-Responsive-Media-Queries