Skip to content

Latest commit

 

History

History
101 lines (74 loc) · 2.4 KB

README.md

File metadata and controls

101 lines (74 loc) · 2.4 KB

eo-css-tools

🛠 CSS tools that built to simplify CSS-in-JS styling.

build status npm bundlephobia minzip npm version

Tools

Install

# npm
npm i eo-css-tools

# yarn
yarn add eo-css-tools

Compatibility

💅 Styled Components
👩‍🎤 Emotion
🌸 Linaria

Tested only with the libraries above. However, it must be compatible with any CSS-in-JS library.

Usage

Breakpoints

Generates media query with min/max-width conditions.

Method name Breakpoint type Media query
breakpoint([min, max]) Custom
mobile() Mobile devices in portrait orientation < 479px
mobileLandscape() Mobile devices in landscape orientation < 767px
tablet() Tablet devices in portrait orientation < 991px
tabletLandscape() Tablet devices in landscape orientation < 1199px
desktop() Laptops and larger 1200px >

Example

import { css } from 'YOUR_BELOWED_CSS_IN_JS_FRAMEWORK';
import { breakpoint, brk, mobile } from 'eo-css-tools';

const LARGE_TO_INFINITY = ['2000px', Infinity];

const style = {
  root: css`
    height: 200px;

    /* Mobile portrait custom */
    ${breakpoint([undefined, 400])} {
      height: 400px;
    }

    /* Large screens */
    ${brk(LARGE_TO_INFINITY)} {
      height: 600px;
    }
    
    /* Mobile portrait predefined */
    ${mobile()} {
      height: 800px;
    }
  `,
};

Result

.root_xk292ls {
  height: 200px;
}

@media only screen and (max-width: 400px) {
  .root_xk292ls {
    height: 400px;
  }
}

@media only screen and (min-width: 2000px) {
  .root_xk292ls {
    height: 600px;
  }
}

@media only screen and (max-width: 479px) {
  .root_xk292ls {
    height: 800px;
  }
}