# postcss-responsive

> PostCSS plugin that improves developer experience of responsive design

Latest version **0.6.0** (published 2023-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-responsive
pnpm add postcss-responsive
yarn add postcss-responsive
bun add postcss-responsive
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2023-04-18 |
| First published | 2022-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=14.0.0 |
| Dependencies | 1 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Azat S. |
| Maintainers | azat-io |
| Keywords | css, postcss, postcss-plugin, responsive, clamp |

## Links

- npm: https://www.npmjs.com/package/postcss-responsive
- Repository: https://github.com/azat-io/postcss-responsive
- Homepage: https://github.com/azat-io/postcss-responsive#readme
- Issues: https://github.com/azat-io/postcss-responsive/issues
- npm.io page: https://npm.io/package/postcss-responsive

## Dependencies (1)

- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.6.0 (latest) — 2023-04-18
- 0.5.2 — 2023-04-11
- 0.5.1 — 2023-04-04
- 0.5.0 — 2023-03-07
- 0.4.0 — 2023-01-20
- 0.3.0 — 2023-01-19
- 0.1.1 — 2022-08-07
- 0.1.0 — 2022-07-27

## README

# PostCSS Responsive

<img align="right" width="120" height="120" title="PostCSS" src="http://postcss.github.io/postcss/logo.svg">

[PostCSS](https://postcss.org) plugin that simplifies the creation of adaptive design with custom `responsive()` function.

## Usage

**Step 1:** Install plugin:

```sh
npm install --save-dev postcss postcss-responsive
```

**Step 2:** Check your project for existing PostCSS config: `.postcssrc` in the project root, `"postcss"` section in `package.json` or `postcss` in bundle config.

If you do not use PostCSS, add it according to [official docs](https://github.com/postcss/postcss#usage)
and set this plugin in settings.

**Step 3:** Add the plugin to your PostCSS config:

```diff
{
  "plugins": {
+    "postcss-responsive": {
+      "minWidth": 480,
+      "maxWidth": 1280,
+    },
    "autoprefixer": {}
  }
}
```

**Step 4:** Just add `responsive()` function into your CSS code. This function can take 2 or 4 arguments: minimum and maximum value and minimum and maximum viewport width (You can set it in plugin settings).

## Options

### minWidth

The minimum value of the viewport, starting from which we will build a fluid layout. By default, it is not preserved.

### maxWidth

The maximum value of the viewport, ending with which we will build a fluid layout. By default, it is not preserved.

### funcName

You can set your own CSS function name. Default value is `responsive`

### legacy

Use `vw` units instead of `vi`. Default value is `false`

## Example

### Input

```css
.container {
  display: grid;
  grid-template-columns: responsive(180px, 240px) 1fr;
  grid-gap: responsive(8px, 16px);
  padding: responsive(16px, 32px) responsive(16px, 24px);
  font-size: responsive(1rem, 1.125rem, 400px, 800px);
  line-height: responsive(1.5rem, 1.75rem, 400px, 800px);
}
```

### Output

```css
.container {
  display: grid;
  grid-template-columns: clamp(11.25rem, 9rem + 7.5vi, 15rem) 1fr;
  grid-gap: clamp(0.5rem, 0.2rem + 1vi, 1rem);
  padding: clamp(1rem, 0.4rem + 2vi, 2rem) clamp(1rem, 0.7rem + 1vi, 1.5rem);
  font-size: clamp(1rem, 0.875rem + 0.5vi, 1.125rem);
  line-height: clamp(1.5rem, 1.25rem + 1vi, 1.75rem);
}
```

### Browser Support

`postcss-responsive` plugin uses `clamp()` function and `vi` units. So it works on all modern browsers. You can check browser support [here](https://caniuse.com/?search=clamp)

## Contributing

Pull requests are welcome.

## License

MIT &copy; [Azat S.](https://twitter.com/azat_io)

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