eo-css-tools v0.6.1

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.

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