Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/zx6658/css-in-js-media below:

Brew-Brew/css-in-js-media: :art: Deal with responsive design simply when use CSS-in-JS (styled-components,emotion.js)

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

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

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

• example in code-sandbox-link : https://codesandbox.io/embed/k28q2nv2w7

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

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;
  }
`;

⚠️ 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)" });

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

• https://github.com/koansang
• https://github.com/yongdamsh

Issue

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4