ibitcy / eo-css-tools

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

eo-css-tools

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

Tools

• Breakpoints

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