🔵 CSS Clamp Overview 🔵
The clamp function in CSS is a great way to create responsive and flexible designs efficiently and effectively.
If you haven't heard of the clamp function before, this is the thread for you. 😄
Let's get started. 🧵 👇 1/7
1️⃣ What is the Clamp function?
The Clamp function:
👉 Allows for the clamping of a value between an upper and lower bound. 👉 It allows for the selecting of a middle value within a range of values between a minimum and maximum defined by the user.
Here are a couple of examples of how we use the clamp function in CSS.
We replace the traditional value of the property with the clamp function which will automatically resolve to the correct value.
Let's look at the parameters taken next. 👇 3/7
The Clamp function takes 3 parameters:
1️⃣ Minimum - The lowest the value can be. 2️⃣ Preferred - The value that will be used providing its > minimum value and < maximum value. 3️⃣ Maximum - The highest the value can be.
Let's see how clamp works. 👇 4/7
4️⃣ Under the Hood
Underneath the clamp function, CSS is taking the values we entered and converting them into using the max and min functions.
clamp(1rem, 2.5vw, 5rem)
max(1rem, min(2.5vw, 5rem))
CSS takes a workaround & makes it easy to use. 5/7
5️⃣ Read More
❓ Interested in reading more?
You can check out my public notes on CSS Clamp over at my blog:
Alternatively, you can check out the MDN doc below:
🔗 Links in this Tweet:
Did you enjoy this thread? If so please consider doing one of the below to show your support:
❤️ Like these tweets 🔄 Retweet the first tweet in this thread so others can see it. 👤 Follow me for more content like this. 7/7