Brew-Brew/css-in-js-mediaPublic

NotificationsYou must be signed in to change notification settings
Fork6
Star141

🎨 Deal with responsive design simply when use CSS-in-JS (styled-components,emotion.js)

License

MIT license

141 stars 6 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 124 Commits
dist		dist
docs		docs
.babelrc		.babelrc
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
cssinjs-include-media.test.ts		cssinjs-include-media.test.ts
cssinjs-inlclude-media.ts		cssinjs-inlclude-media.ts
index.d.ts		index.d.ts
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
yarn-error.log		yarn-error.log
yarn.lock		yarn.lock

Repository files navigation

css-in-js-media 🎨

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 thiscss-in-js-media which is similar withinclude-media and support type system(ts)

If you think this library is helpful, Support by give ⭐

Migrate to Typescript at version V2 🎉

Introduced at

https://styled-components.com/ecosystem helpers section
https://github.com/emotion-js/emotion#ecosystem

📖 documentation

https://css-in-js-media.netlify.app/#/

🚀 install & default usage

npm install css-in-js-mediaimport media from "css-in-js-media";

example incode-sandbox-link :https://codesandbox.io/embed/k28q2nv2w7

media-query break-point (default breakpoint)

smallPhone: 320phone: 375tablet: 768desktop: 1024largeDesktop: 1440

🎒 size

❓ how-to-use

with css-in-js library (ex: emotion.js , styled-component)

example withemotion.js

importmediafrom"css-in-js-media";exportconstexampleClass=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 withstyled-component

importmediafrom"css-in-js-media";constexampleClass=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)

import{setBreakPoints}from"css-in-js-media";setBreakPoints({desktop:1440,largeDesktop:1500});// or string sizesetBreakPoints({desktop:"140rem",largeDesktop:"calc(30 * 50px)"});

get breakpoints (optional)

import{getBreakPoints}from"css-in-js-media";getBreakPoints();// default breakpoints// {//   smallPhone: 320;//   phone: 375;//   tablet: 768;//   desktop: 1024;//   largeDesktop: 1440;// }