Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/azat-io/postcss-responsive
📐 PostCSS plugin that improves developer experience of responsive design
https://github.com/azat-io/postcss-responsive
css postcss postcss-plugin
Last synced: 3 months ago
JSON representation
📐 PostCSS plugin that improves developer experience of responsive design
- Host: GitHub
- URL: https://github.com/azat-io/postcss-responsive
- Owner: azat-io
- License: mit
- Created: 2022-07-04T22:42:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-06T23:31:56.000Z (11 months ago)
- Last Synced: 2024-07-23T10:14:55.804Z (3 months ago)
- Topics: css, postcss, postcss-plugin
- Language: TypeScript
- Homepage:
- Size: 961 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license
Awesome Lists containing this project
README
# PostCSS Responsive
[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 © [Azat S.](https://twitter.com/azat_io)