the answer for all question about Oxygen Builder plugin and WordPress

I’m developing Kevin Geary brilliant idea, which he told in the video “How to Se


I’m developing Kevin Geary brilliant idea, which he told in the video “How to Set up Oxygen”.
My idea is to simply specify the minimum and maximum font-size in the stylesheet.
And it works.
But in order for the formula to work, I have to specify not 2, but 4 variables. Because the formula requires a value purely in digits and a value in rem
Help optimize the code.

Here is the code –

h1 {
–min: 3rem;
–min2: 3;
–max: 4.5rem;
–max2: 4.5;
}

h2 {
–min: 3rem;
–min2: 3;
–max: 4.5rem;
–max2: 4.5;
}

h3 {
–min: 2.5rem;
–min2: 2.5;
–max: 4rem;
–max2: 4;
}

h4 {
–min: 2.1rem;
–min2: 2.1;
–max: 3rem;
–max2: 3;
}

h5 {
–min: 2.1rem;
–min2: 2.1;
–max: 3rem;
–max2: 3;
}

h6 {
–min: 2.1rem;
–min2: 2.1;
–max: 3rem;
–max2: 3;
}

h1, h2, h3, h4, h5, h6 {
font-size: clamp(var(–min), calc(var(–min) + ((1vw – 0.32rem) * (var(–max2) – var(–min2)))), var(–max));




Source

5 Comments
  1. Jason Eugene says

    If you join his “inner circle group. He already has that all built out and expanded on. Its awesome!

  2. Björn Evans says

    This is awesome!

  3. Mathew Murray says

    Seems a really convulted way to do this. You’re better off with something like this…

    https://utopia.fyi/type/calculator/

    You can set the font sizes for the smallest screensize and the large screens, then set the scale ratios for both. The below where it says css generator, click the use clamp checkbox. Then copy out the CSS to your :root and apply the variables to your H headers and P.

    It’s a quick and easy way to generate fluid type variables, and keeps your css clean and simple.

  4. Niko Strobel says

    This is awesome.
    You don’t need 4 variables; 2 are enough. The idea is that you only use numbers, and then multiply those by 1rem where needed, so the unit gets tacked on automatically. I am storing the unit as a variable as well instead of hardcoding it, so “rem” can be easily changed to another unit without touching the formula.

    :root {
    –unit: 1rem;
    }
    h1 {
    –min: 3;
    –max: 4.5;
    }
    h2 {
    –min: 3;
    –max: 4.5;
    }
    h3 {
    –min: 2.5;
    –max: 4;
    }
    h4 {
    –min: 2.1;
    –max: 3;
    }
    h5 {
    –min: 2.1;
    –max: 3;
    }
    h6 {
    –min: 2.1;
    –max: 3;
    }
    h1, h2, h3, h4, h5, h6 {
    font-size: clamp(calc(var(–min) * var(–unit)), calc(calc(var(–min) * var(–unit)) + ((1vw – 0.32rem) * (var(–max) – var(–min)))), calc(var(–max) * var(–unit))); 🤯

    What I don’t get though is where the viewport size comes into play here? The online calculators usually factor that in as well. 🧐

  5. Niko Strobel says

    Version with variables for min/max viewport to use this on setups other than 320/1280: 😊

    :root {
    –unit: 1rem;
    –min-viewport: 32;
    –max-viewport: 160;
    }
    h1 {
    –min: 3;
    –max: 4.5;
    }
    h2 {
    –min: 3;
    –max: 4.5;
    }
    h3 {
    –min: 2.5;
    –max: 4;
    }
    h4 {
    –min: 2.1;
    –max: 3;
    }
    h5 {
    –min: 2.1;
    –max: 3;
    }
    h6 {
    –min: 2.1;
    –max: 3;
    }

    h1, h2, h3, h4, h5, h6 {
    font-size: clamp(
    var(–min) * var(–unit),
    ((var(–min) * var(–unit)) + (var(–max) – var(–min)) * ((100vw – (var(–min-viewport) * var(–unit) )) / (var(–max-viewport) – var(–min-viewport)))),
    var(–max) * var(–unit) );
    }

    This is based on the longhand formula from https://websemantics.uk/tools/responsive-font-calculator/

Leave A Reply

Your email address will not be published.

Oxyrealm Docs