search

evrone / postcss-px-to-viewport

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
https://evrone.com/postcss-px-viewport
MIT License
2.99k stars 401 forks source link

Idea: utilizing min(), max(), and clamp() units #104

Open jz533 opened 3 years ago

jz533 commented 3 years ago

Curious, how anyone ever considered making some sort of option with this in which min(), max(), and clamp() units are utilized?

When I develop with this tool, I always set "replace" to "false". Then, I find the point where I want to switch my layout to its' mobile view. I find the calculated font size of every new vw unit at that point, and prevent it from shrinking further with a declaration like "max(12px, 3.125vw)". Often, I go ahead and go all the way, utilizing the clamp() operation to prevent it from growing beyond a particular font size.

So for example, let's say I have a

tag that I set at a font size of 18px while developing at a viewport width of 1920px. After converting it with postcss-px-to-viewport, the new font size becomes .9375vw. I decide that I want 1385px to be the viewport width in which I want most things to stop shrinking, and I find that at this point, the calculated font-size for said

is 13px. So I set the final font-size to be "max(13px, 0.9375vw)", which tells the browser "the font size is 0.9375vw, until it reaches 13px, at which point, stop shrinking it".

Perhaps we could improve on this tool to make it set min(), max(), and/or clamp() values automatically.

In this tool, I could imagine options like this:

{ shrinkStopPoint: 1385px, minMaxClamp: Max, minShrinkingValue: 12px }

shrinkStopPoint this would tell the tool the viewport width in which one wants things to stop shrinking shrinkStopPoint this would tell the tool which unit you want to utilize. In this post, obviously I am focusing on max() units. It would be interesting to see how the others could be implemented, but I am sure there are other ways that the other units could be implemented minShrinkingValue this would be a threshold of sorts, to let the tool know that "hey, if a particular declaration's calculated size would reach the set minShrinkingValue before the viewport reaches 1385px, don't let it shrink beyond this point"

So, therefore, the following code:

.example { font-size: 18px; }

.example2 { font-size: 13px; }

With the above theoretical options set would become:

.example { font-size: max(13px, 0.9375vw); }

.example2 { font-size: max(12px, 0.6770833333333334VW); }

The hardest part would be getting the math and operations to run correctly that would calculate what every new converted unit's calculated size in px would be at the shrinkStopPoint. Truly, this is all beyond me; I barely know how to use PostCSS myself, let alone code in it. But I wanted to share the idea and see if anyone else more knowledgeable would be interested in taking on such a project.

jz533 commented 3 years ago

EDIT:

It is not that hard to find what every new converted unit's calculated size in px would be at the shrinkStopPoint. I did some basic math, and this is the equation:

(converted unit / 100) * shrinkStopPoint = Calculated Size

So in the above .example class, that would work like this:

(0.9375vw / 100) * 1385px ≈ 13px

This solution of 13px being the lower value in the converted font-size: max(13px, 0.9375vw);

So all we would have to do is really figure out how to parse this equation through the file after everything is converted to vw (or whatever other unit is chosen under viewportUnit).