# custom-media-queries

> Some custom media queries shortcuts

## Install

```sh
$ npm install cssrecipes-custom-media-queries
```

## Usage

```css
/* for desktop first approch */
@media (--r-maxS) {
  /* rules here will be active when viewport will be <= "s" size */
}

/* for mobile first approch */
@media (--r-minS) {
  /* rules here will be active when viewport will be > "s" size */
}
```

### Available custom media queries

#### `--r-maxS` <= 30em

#### `--r-minS` > 30em

#### `--r-maxM` <= 50em

#### `--r-minM` > 50em

#### `--r-maxL` <= 65em

#### `--r-minL` > 65em

#### `--r-maxXL` <= 80em

#### `--r-minXL` > 80em

---

## Testing

To generate a build:

```sh
$ npm run build
```

To generate the testing build.

```sh
$ npm run build-test
```

Basic visual tests are in `test/index.html`.

## Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

```sh
$ git clone https://github.com/cssrecipes/custom-media-queries.git
$ git checkout -b patch-1
$ npm install
$ npm test
```

## [Changelog](CHANGELOG.md)

## [License](LICENSE)