# @powel/design-media-queries

> Media queries for Powel design primitives

Latest version **1.1.3** (published 2021-01-22) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @powel/design-media-queries
pnpm add @powel/design-media-queries
yarn add @powel/design-media-queries
bun add @powel/design-media-queries
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-01-22 |
| First published | 2020-01-27 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fima1 |

## Links

- npm: https://www.npmjs.com/package/@powel/design-media-queries
- Repository: https://github.com/PowelAS/design-primitives
- Homepage: https://github.com/PowelAS/design-primitives#readme
- Issues: https://github.com/PowelAS/design-primitives/issues
- npm.io page: https://npm.io/package/@powel/design-media-queries

## Recent versions

- 1.1.3 (latest) — 2021-01-22
- 1.1.3-1611318412866 (next) — 2021-01-22
- 1.1.3-1611317370457 — 2021-01-22
- 1.1.2 — 2020-11-20
- 1.1.2-1605872121029 — 2020-11-20
- 1.1.1 — 2020-11-20
- 1.1.1-1605869844951 — 2020-11-20
- 1.1.0 — 2020-01-27
- 1.0.0 — 2020-01-27

## README

# design-media-queries

Media query primitives/tokens to be used across Powel's products

![Screenshot](https://user-images.githubusercontent.com/927591/73183763-a405fe00-411b-11ea-8813-6ebf0c576e4c.png)

## Installation

```sh
npm install @powel/design-media-queries --save
```

## Usage

### JavaScript

In JavaScript, design token names are formatted in [lower camelCase](https://en.wikipedia.org/wiki/Camel_case).

```js
const tokens = require('@powel/design-media-queries');
console.log(tokens.mqLargeAndUp); // screen and ( min-width: 48.75em )
```

In JSON, design token names are formatted in [SNAKE_CASE](https://en.wikipedia.org/wiki/Snake_case).

```js
const tokens = require('@powel/design-media-queries/dist/index.json');
console.log(tokens['MQ_LARGE_AND_UP']); // screen and ( min-width: 48.75em )
```

### Sass

Sass variables and map keys are formatted in [kebab-case](https://en.wikipedia.org/wiki/Kebab_case).

```scss
// Using variables
@import '~@powel/design-media-queries/dist/index';

@media #{$mq-large-and-up} {
  body {
    padding: 1rem;
  }
}
```

---
_Source: https://npm.io/package/@powel/design-media-queries · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._