Related:
Bricks vs Elementor – why we switched
Web page layout – with CSS flexbox and Bricks
Website Mockup Size Guide
Overview
When building fluid mobile responsiveness into a website, values are scaled down as the device’s viewport width approaches the minimum device size, somewhere between 320px and 375px.
However not everything scales at the same rate. For example large heading sizes scale down at a greater ratio when compared with paragraph sizes which often don’t scale at all. Therefore several different scales using different ratios are needed.
The system outlined here uses a small set of ratios which can be applied to any value to achieve fluid responsive sizing.
Demo usage
For example to achieve borders which start at 30px on a laptop and end at 18px on a phone, you would choose the base-6 variable and multiply it by the larger value, like so:
calc(var(--base-6) * 30)
We’re using the base-6 variable because 18 / 30 = 0.6.
Setting it up
We’ll start by setting up a few ratio variables: base-6, base-7, base-75, base-8, base-9
The reason we only need a few of these formulas is because there are relatively few needed.
Looking at the ratios for the font sizes below we can see that by rounding the ratios off to 0.6, 0.7, 0.75, 0.8, and 0.9, this would be sufficient to scale sizes down to values at, or very close to the required mobile sizes.
Creating the variables
Starting with the 0.6 ratio variable which we’re calling base-6, go to the Utopia Clamp Calculator and make sure your viewport min and max widths are set correctly. We’re using 320px for min and 1292px for max in our case.
Now set your @max value to 1, and the @min value to 0.6.
Add this variable to the website :root in the main stylesheet with the name base-6 and the value copied from the output. It’s important not to have a full-stop (period) character in the name, so make sure not to use the generated names. Repeat this for each ratio needed.
Here is a complete set for the values mentioned in this tutorial with a few extra values thrown in.
:root {
--base-6: clamp(0.0375rem, 0.0293rem + 0.0412vw, 0.0625rem);
--base-65: clamp(0.0406rem, 0.0334rem + 0.036vw, 0.0625rem);
--base-7: clamp(0.0438rem, 0.0376rem + 0.0309vw, 0.0625rem);
--base-75: clamp(0.0469rem, 0.0417rem + 0.0257vw, 0.0625rem);
--base-8: clamp(0.05rem, 0.0459rem + 0.0206vw, 0.0625rem);
--base-85: clamp(0.0531rem, 0.05rem + 0.0154vw, 0.0625rem);
--base-9: clamp(0.0563rem, 0.0542rem + 0.0103vw, 0.0625rem);
--base-95: clamp(0.0594rem, 0.0583rem + 0.0051vw, 0.0625rem);
}
If you’re using a page builder with variables manager like Bricks, then you can add these one by one.
Using the variables
Divide the required min (mobile) value by the max (laptop) value to get the ratio. Select the base- variable that comes closest to this.
For example if you have a font sizeof 72px on laptops that needs to be 54px on mobile, then divide 54 by 72. The ratio is 0.75, so select base-75 as the variable.
Now modify the variable as follows:
calc(var(--base-75) * 72)
We hope you find this system useful!
Related:
Bricks vs Elementor – why we switched
Web page layout – with CSS flexbox and Bricks
Website Mockup Size Guide
