css breakfast #1

clamp()

starting a mini blog series where i take a css concept and do a little dive onto how to use it and why i like it!!

calling the series "css breakfast" because like the most important meal of the day, it is important to learn how to use the tools of the web without relying on JS or utility frameworks... >.< ( ok ok ok i will put away my soapbox now)

we are starting off the blog series strong with a new favorite clamp()!! it takes three params: min, current, and max.

things we like:

• replaces media queries for dynamic typography!
• good browser support! ( whatevs IE )

things we don't like:

• you gotta be careful when using a relative unit for the current param as it affects manual zooming in and zooming out ( aka the size does not change when you do that )

^^^ in order to fix that problem it is best to mix the units for the current param: clamp(50px, calc(7vw + 1 rem), 100px)

imho the coolest thing you can do with this is set css variables with all your font sizes!! look at how gorgeous that is <333

  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

as with anything you gotta play around with the best sizes for your site! but say goodbye to those old dusty media queries and say hello to clamp!

resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
https://www.youtube.com/watch?v=erqRw3E-vn4
https://www.youtube.com/watch?v=U9VF-4euyRo
https://www.youtube.com/watch?v=pbD55DJgOlw

---

if anything is wrong lemme know! i aint perfect.