# eo-css-tools

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

Latest version **0.6.1** (published 2020-01-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install eo-css-tools
pnpm add eo-css-tools
yarn add eo-css-tools
bun add eo-css-tools
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.1 |
| Published | 2020-01-29 |
| First published | 2020-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | ibit-cy |
| Keywords | array, data, update, comparsion, composition |

## Links

- npm: https://www.npmjs.com/package/eo-css-tools
- Repository: https://github.com/ibitcy/eo-css-tools
- npm.io page: https://npm.io/package/eo-css-tools

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.6.1 (latest) — 2020-01-29
- 0.6.0 — 2020-01-29
- 0.5.1 — 2020-01-29
- 0.4.1 — 2020-01-29
- 0.4.0 — 2020-01-29
- 0.3.0 — 2020-01-27
- 0.2.0 — 2020-01-20
- 0.1.0 — 2020-01-20
- 0.0.5 — 2020-01-19
- 0.0.4 — 2020-01-19
- 0.0.3 — 2020-01-19
- 0.0.2 — 2020-01-19
- 0.0.1 — 2020-01-19

## README

# eo-css-tools

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

[![build status](https://badgen.net/travis/ibitcy/eo-css-tools?icon=travis)](https://travis-ci.org/ibitcy/eo-css-tools)
[![npm bundlephobia minzip](https://badgen.net/bundlephobia/minzip/eo-css-tools@latest?icon=awesome)
![npm version](https://badgen.net/npm/v/eo-css-tools?icon=npm&color=blue)](https://www.npmjs.com/package/eo-css-tools)

## Tools

- [Breakpoints](#Breakpoints)

## Install

```bash
# npm
npm i css-tools

# yarn
yarn add css-tools
```

## Compatibility

💅 [Styled Components](https://styled-components.com)  
👩‍🎤 [Emotion](https://emotion.sh)  
🌸 [Linaria](https://linaria.now.sh)

[Tested](https://1eq9w.sse.codesandbox.io) 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

```typescript
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

```css
.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;
  }
}
```

---
_Source: https://npm.io/package/eo-css-tools · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._