kni-labs / postcss-pxv

postcss-pxv

This plugin creates a new pixel-viewport unit of measurement called a pxv.

input:

div { width: 150pxv; }

output:

 div { width: clamp(1px, calc(150vw * (100 / var(--siteBasis))), calc(150px * var(--siteMax) / var(--siteBasis))); }

"Wow, that looks insane!" you might say. And you'd be right, but there is very good reason for it all, and we've used this very successfully on some large sites.

When to use

Use this when you want to reach for a px but need it to behave like a vw unit. Rule must support css clamp():

✅ Use with	❌ Don't use with
width	font-size*
height
padding (including neg values)
margin
left, right, top, bottom
box-shadow
border

• Note:font-size does support clamp but responsive typography needs a different solution to allow for the browser to still be able to use the zoom functionality. (Please see the 2.0 branch alpha release of kni-scss for this.)

Harnessing the power of css custom props

By using css custom properties we can live inject a new "basis" for the scaling.

The plugin requires two custom properties:

• --siteBasis - The size at which your layout was designed
• --siteMax - The size at which you want you comp to stop scaling

In an example implementation you may have a site comped at 1440px, 768px, and 375px for desktop, tablet, andd mobile respectively:

:root {
    --mobile: 375;
    --tablet: 768; 
    --desktop: 1440; 
 
    --mobileMax: 600;
    --tabletMax: 900;
    --desktopMax: 1900;

    --siteBasis: var(--mobileMax); 
    --siteMax: var(--siteMaxMobile);
  }

and in a very simple implementation we can handle 95% of all responsive elements with one media query:

@media (min-width: 768px) {
  * {
    --siteBasis: var(--tablet);
    --siteMax: var(--tabletMax);
  }
}
@media (min-width: 1024px) {
  * {
    --siteBasis: var(--desktop);
    --siteMax: var(--desktopMax);
  }
}

Installation

npm i postcss-pxv --save-dev

How to contribute

for now:

1. npm i
2. edit index.js or input.css
3. process css: node process-css.js

postcss-pxv's Issues

default vars

We Probably should make these default vars that you can change at the postcss plugin level but since they're so easy to change as css-custom-props it's not critical. more of a best practice sort of thing

--siteBasis: var(--mobileMax);
--siteMax: var(--siteMaxMobile);

decimals

Decimal pixels seem to break

Negative values break on large sizes

must fix for trevor

testing needed

jest?