eo-css-tools

eo-css-tools

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

Tools

• Breakpoints

Install

# npm
npm i css-tools

# yarn
yarn add 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	0–479px
mobileLandscape()	Mobile devices in landscape orientation	0–767px
tablet()	Tablet devices in portrait orientation	0–991px
tabletLandscape()	Tablet devices in landscape orientation	0–1199px
desktop()	Laptops and larger	1200–Infinity

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