eo-css-tools
🛠 CSS tools that built to simplify CSS-in-JS styling.
Tools
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
;; ; ;
Result
{} {} {}