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