In a project for a client, we focused heavily on fluid design, which meant that font sizes, images, and other elements would scale linearly with the width of the screen within different intervals. To achieve this, we used CSS clamp, but to facilitate the calculations, I created a “view-clamp” calculator. This allowed us to efficiently and quickly adjust the values based on user feedback and the UX team’s input. With the help of the calculator, we could ensure a consistent and responsive design that smoothly adapted to various screen sizes.
Technologies used
- Tailwind
- Preact
Feel free to check it out in action or view the code on Github.