Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/winston0410/bewater
A PostCSS plugin that helps you automatically apply `clamp()` to values to achieve a fluid design efficently.
https://github.com/winston0410/bewater
bewater postcss postcss-plugin postcss-sparrow
Last synced: 18 days ago
JSON representation
A PostCSS plugin that helps you automatically apply `clamp()` to values to achieve a fluid design efficently.
- Host: GitHub
- URL: https://github.com/winston0410/bewater
- Owner: winston0410
- Created: 2020-08-07T10:11:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-11T20:17:18.000Z (almost 3 years ago)
- Last Synced: 2024-10-12T13:17:03.846Z (about 1 month ago)
- Topics: bewater, postcss, postcss-plugin, postcss-sparrow
- Language: JavaScript
- Homepage:
- Size: 1.01 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Be water
[](https://www.codacy.com/manual/winston0410/bewater?utm_source=github.com&utm_medium=referral&utm_content=winston0410/bewater&utm_campaign=Badge_Grade) [](https://snyk.io/test/github/winston0410/bewater?targetFile=package.json) [](https://codeclimate.com/github/winston0410/bewater/maintainability) [](https://codeclimate.com/github/winston0410/bewater/test_coverage)
**Be water, be fluid, be responsive.**
A PostCSS plugin that helps you automatically apply `clamp()` to values to achieve a fluid design efficently.
This plugin uses [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow), [PostCSS Sparrow Units Filter](https://www.npmjs.com/package/postcss-sparrow-units-filter) and [PostCSS Sparrow Props Filter](https://www.npmjs.com/package/postcss-sparrow-props-filter) under the hood for filtering CSS declarations.
```css
/* Before transformation */
p {
font-size: 30px;
padding: 15px;
}
```
```javascript
//postcss.config.js
module.exports = {
plugins: [
//Other plugins...
require('postcss-sparrow')({
transformations: [
{
selectors: ['*'],
inclusion: true,
callbacks: [
require('bewater')(
{
props: {
props: ['font-size'],
inclusion: true
},
units: {
units: ['*'],
inclusion: true
},
scale: 1.5, //Multiplier for the original value, and the product will be used as the 3rd param for clamp()
changeRate: '4vw' //The rate for the value to change. This value will be used as the 2nd param for clamp()
}
)
]
}
]
})
]
}
```
```css
/* After transformation */
p {
font-size: clamp(30px, 4vw, 45px);
padding: 15px;
}
```
## Installation
This plugin require you to use [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow) for matching with selectors you want.
Download both `postcss-sparrow` and this plugin through NPM.
```shell
npm i postcss postcss-sparrow bewater
```
Then import this plugin as the callback for [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow).
## API Reference
### `options.props` : Object
Filter options for filtering CSS declaration by its prop. Read the API reference of [PostCSS Sparrow Props Filter](https://www.npmjs.com/package/postcss-sparrow-props-filter#api-reference) for more details. `props` defaults to `[*]` and `inclusion` defaults to `true`.
### `options.units` : Object
Filter options for filtering CSS declaration by its prop. Read the API reference of [PostCSS Sparrow Units Filter](https://www.npmjs.com/package/postcss-sparrow-units-filter#api-reference) for more details. `units` defaults to `[*]` and `inclusion` defaults to `true`.
### `options.scale` : Number
Multiplier for the original value, and the product will be used as the 3rd param for `clamp()`. Default to `2`.
### `options.changeRate` : String
The rate for the value to change. This value will be used as the 2nd param for `clamp()`. Default to `2vw`.