fluid

Generates complex CSS clamp() functions for robust fluid units, used for Pollen's inbuilt fluid typography scale
fluid(
  minSize: number, 
  maxSize: number, 
  minWidth?: number, 
  maxWidth?: number
)
pollen.config.js
const { fluid } = require('pollen-css/utils');
​
module.exports = (pollen) => ({
  modules: {
    fluidFontSize: {
      '0': fluid(14, 16)
    }
  }    
});
Property
Default
Required
Description
minSize
​
Yes
Smallest value of the size (in px)
maxSize
​
Yes
Largest value of the size (in px)
minWidth
480
No
Screen width fluid range begins
maxWidth
1280
No
Screen width fluid range ends

Property	Default	Required	Description
`minSize`		Yes	Smallest value of the size (in px)
`maxSize`		Yes	Largest value of the size (in px)
`minWidth`	`480`	No	Screen width fluid range begins
`maxWidth`	`1280`	No	Screen width fluid range ends

Last modified 8mo ago