Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Brew-Brew/css-in-js-media
:art: Deal with responsive design simply when use CSS-in-JS (styled-components,emotion.js)
https://github.com/Brew-Brew/css-in-js-media
css emotion include-media styled-components
Last synced: 3 months ago
JSON representation
:art: Deal with responsive design simply when use CSS-in-JS (styled-components,emotion.js)
- Host: GitHub
- URL: https://github.com/Brew-Brew/css-in-js-media
- Owner: Brew-Brew
- License: mit
- Created: 2019-05-19T01:30:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T18:57:36.000Z (almost 2 years ago)
- Last Synced: 2024-11-11T18:54:57.250Z (3 months ago)
- Topics: css, emotion, include-media, styled-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/css-in-js-media
- Size: 1.4 MB
- Stars: 141
- Watchers: 3
- Forks: 6
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - css-in-js-media - in-JS (styled-components,emotion.js) | Brew-Brew | 105 | (TypeScript)
README
# css-in-js-media :art:
**Minified and Simplified include-media with CSS-in-JS**
when you style with css-in-js (emotion, styled-component) you can perfectly and easily deal with responsive design with this `css-in-js-media` which is similar with [include-media](https://eduardoboucas.github.io/include-media/) and support type system(ts)
If you think this library is helpful, Support by give :star:
**Migrate to Typescript at version V2 :tada:**
**Introduced at**
- https://styled-components.com/ecosystem helpers section
- https://github.com/emotion-js/emotion#ecosystem
---
### :book: documentation
- https://css-in-js-media.netlify.app/#/
---
### :rocket: install & default usage
```
npm install css-in-js-media
import media from "css-in-js-media";
```
- example in `code-sandbox-link` : https://codesandbox.io/embed/k28q2nv2w7
#### media-query break-point (default breakpoint)
```
smallPhone: 320
phone: 375
tablet: 768
desktop: 1024
largeDesktop: 1440
```
---
### :school_satchel: size
---
### :question: how-to-use
with css-in-js library (ex: emotion.js , styled-component)
- example with `emotion.js`
```javascript
import media from "css-in-js-media";
export const exampleClass = css`
color: red;
${media(">desktop")} {
font-size: 15px;
}
${media("<=desktop", ">tablet")} {
font-size: 20px;
}
${media("<=tablet", ">phone")} {
font-size: 25px;
}
${media("<=phone")} {
font-size: 30px;
}
`;
```
- example with `styled-component`
```javascript
import media from "css-in-js-media";
const exampleClass = styled.h1`
color: red;
${media(">desktop")} {
font-size: 15px;
}
${media("<=desktop", ">tablet")} {
font-size: 20px;
}
${media("<=tablet", ">phone")} {
font-size: 25px;
}
${media("<=phone")} {
font-size: 30px;
}
`;
```
#### set flexible breakpoints (optional)
⚠️ You should set this in entry point file (root file)
```javascript
import { setBreakPoints } from "css-in-js-media";
setBreakPoints({ desktop: 1440, largeDesktop: 1500 });
// or string size
setBreakPoints({ desktop: "140rem", largeDesktop: "calc(30 * 50px)" });
```
#### get breakpoints (optional)
```javascript
import { getBreakPoints } from "css-in-js-media";
getBreakPoints();
// default breakpoints
// {
// smallPhone: 320;
// phone: 375;
// tablet: 768;
// desktop: 1024;
// largeDesktop: 1440;
// }
```
---
### :heart: THANKS
- https://github.com/koansang
- https://github.com/yongdamsh
### :bug: Bug reporting
[Issue](https://github.com/Brew-Brew/css-in-js-media/issues)
### License
[MIT](./LICENSE)