min(), max(), and clamp() are CSS magic!

294,223
0
Published 2020-04-21
CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we've needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line is absolute magic!

Until Safari gets there too, we can use it, but with the help of feature queries, which I made a video on here:    • Using Feature Queries (@supports) to ...  

If you'd like to learn more about viewport units like `vw` and `vh`:    • CSS Units: vh, vw, vmin, vmax #css #r...  

#css #responsive #typography
--

Come hang out with other dev's in my Discord Community
discord.gg/nTYCvrK

---

Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter

---

Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: www.patreon.com/kevinpowell

---

My editor: VS Code - code.visualstudio.com/

How my browser refreshes when I save:    • How to automatically refresh your bro...  

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: www.instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

All Comments (21)
  • @MelTurner
    Maybe important to mention that SCSS can get confused if it encounters a CSS min or max function because SASS has conflicting functions. For example min(200px, 80%) will cause a SASS units error. The trick is to capitalize: Min and Max so they are ignored by SASS (CSS is case insensitive)
  • @mintran
    I thought I was pretty good at CSS until I discovered your channel.
  • @rc91249
    Whenever I have a issue with CSS or just want to learn a new property. I’m always so happy when I can find a video from Kevin explaining the subject! His a CSS magician ✨
  • @degagnemarc
    Just love it! Great for replacing some media query. .row { width: clamp( min( 95%, 414px ), 80%, 1200px ); } Thanks Kevin for making us better devs.
  • @GineetMehta
    I am absolutely baffled at the quality of content you put out, Kevin. Direct, crystal clear, practical videos of everything relevant. No BS. I have been working as a frontend developer for around 14 months now, and I stumbled on your channel while searching for Intersection Observers. Love the content! Subscribed to the channel and will sign up for the newsletter too. Thank you for your time and effort in giving back to the community. Much appreciated.
  • @codingtime3803
    I can't thank you enough kevin! I have learned so much about css and responsive design from your channel !! Your videos are gems!
  • @shvideo1
    Loved the usage of clamp() function with the font-size property and also learning about "vw" units. This is very handy and useful for web design. Thank you Kevin for this great video!
  • This, I've dreamt about for so so long. Not back in '94 when I started coding HTML3.2, but it's definitely been years.
  • @ukyo6195
    Works in all modern Browser: font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); e. g. font-size: calc(2.25rem + (36 - 20) * ((100vw - 300px) / (1600 - 300)));
  • Oh boy, I have an itch to go back to all my projects and use this! Thank you for such a clear explanation!
  • @crstfrdrnt
    I'm two weeks into seriously learning html and CSS and keep coming to your videos because they're awesome. You are one great teacher
  • Kevin, thanks so much for the great video!! I've recently started my web development journey and your channel has been a tremendous help. So much so that as I'm practicing my skills via YouTube video projects or Udemy course projects I'm not following along entirely and instead am inserting some of the new, cool CSS properties like clamp(). Thanks again!!!
  • @ra9r
    I've only recently discovered your channel but DAMN, great content. Thank you and keep it coming!
  • @spyrosp
    Thank you Kevin! Always up-to-date 💪
  • @gosnooky
    Really enjoy your videos. I spent most of my career from the 90's onward doing systems programming in C, C++ and Java, but now that the money is in front end, I'm digging all these modern toys and tooling.
  • @nikhiltyagi1080
    One of the best and most useful videos you have ever made. Thanks a lot boss!!
  • @patrickc.6183
    Wow! This is literally something I could use ALL the time when writing CSS! Thanks 😁!
  • @petarkolev6928
    Amazing video! Kevin, you just don't stop amazing me with each video, love your work!!!!
  • @markrm2212
    Started coding websites professionally about two years back. Your videos really helped me out back then and still do today :)