GitHub - Brew-Brew/css-in-js-media: :art: Deal with responsive design simply when use CSS-in-JS (styled-components,emotion.js) (original) (raw)
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 this css-in-js-media which is similar with include-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
🚀 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
🎒 size
❓ how-to-use
with css-in-js library (ex: emotion.js , styled-component)
- example with
emotion.js
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
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)
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)
import { getBreakPoints } from "css-in-js-media"; getBreakPoints(); // default breakpoints // { // smallPhone: 320; // phone: 375; // tablet: 768; // desktop: 1024; // largeDesktop: 1440; // }