Be water
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, PostCSS Sparrow Units Filter and PostCSS Sparrow Props Filter under the hood for filtering CSS declarations.
/* Before transformation */
//postcss.config.jsmoduleexports = plugins: //Other plugins... transformations: selectors: '*' inclusion: true callbacks: props: props: 'font-size' inclusion: true units: units: '*' inclusion: true scale: 15 //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()
/* After transformation */
Installation
This plugin require you to use PostCSS Sparrow for matching with selectors you want.
Download both postcss-sparrow
and this plugin through NPM.
npm i postcss postcss-sparrow bewater
Then import this plugin as the callback for 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 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 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
.