open-props icon indicating copy to clipboard operation
open-props copied to clipboard

Add container fluid props

Open argyleink opened this issue 3 years ago • 2 comments

...
--cq-size-fluid-2: clamp(1rem, 10cqw, 2rem);
...

padding: var(--cq-size-fluid-2);

just like the viewport fluid sizes

also add?

font-size: var(--font-size-cq-fluid-2);
  1. make a new file src/props.container-sizes.js
  2. export new props like the viewport sizes
  3. add the js file you made here so it generates a source css file pair
  4. add a build step to bundle and minify for production the css file from step 3
  5. add export for the js (like this) and css file

tldr; make the props in a js file, generate a css file from that, bundle the file for production, add some exports for easy npm usage to package.json 😅

argyleink avatar Sep 13 '22 04:09 argyleink

fine with me :) have a separate file for them like props.container.css?

edit: oh just followed the link... I thought similar to props.media.css

Wondering if the container polyfill will also handle them. 🤔

WebMechanic avatar Sep 13 '22 13:09 WebMechanic

Wondering if the container polyfill will also handle them. 🤔

iirc it does

argyleink avatar Sep 13 '22 15:09 argyleink