Responsive style scale between breakpoints

[Regnalf]

Hello Theme.co team, the new responsive style system is great and i would like to suggest an extension:

If you take as an example a font size:

bp480/below - 10px
bp480/767- 12px
bp767/979 - 14px
bp979/1200 - 16px
bp1200/up - 18px

It would be great have an option to say it should automatically scale between the lowest and highest setting
for example:

(option set scaled)
bp480/below - 10px
bp480/767- notset
bp767/979 - notset
bp979/1200 - notset
bp1200/up - 18px

so anything between 480px and 1200 pixel should have scaled values like for example 14.67px near the bp767.
The difference would be that you don’t have jumpy breakpoints and it fits smoother to the browser dimension.

What you think?

[tristup]

Hi @Regnalf,

Thank you for the great suggestion with a proper explanation. I will inform our development team of this for further proceedings.

Thanks

[alexander]

Hi @Regnalf,

The current stacks have a root font scaling option similar to that, but it takes quite an extensive CSS hack to get everything scaling properly. We’re not planning on adding scaling like this as a native feature. What we would recommend for now is using the CSS clamp function. It works like this:

On any element, set your font size to this:

calc(clamp(1rem, 2.5vw, 2rem));

This will give you a min font size of 1em, a max font size of 2em and anywhere in-between the font size will be 2.5% of the device width.

Note: The wrapping calc statement isn’t needed in CSS - but Cornerstone doesn’t recognize clamp as a valid input yet and wrapping in calc will ignore anything inside.

[Regnalf]

Thanks @alexander for the info about clamp, I still think it would be a great feature, but I know it would take a lot of work. Maybe you can still put it at the bottom of the feature list

[ruenel]

Hello @Regnalf,

Thanks for the feedback. Yes, we will add it to our enhancement list for future development.

Cheers.