Do you use clamp() in production? PS: Check out the new designcourse.com to enter your email. It will be released shortly!

@yogeshdevaggarwal

3 жыл бұрын

Yes!!

@AmandaLucaseu

3 жыл бұрын

I will now 👌🏻

@LabhamJain

3 жыл бұрын

So Awesome 😍

@k-techdev8992

3 жыл бұрын

where is Trad Braversy avatar ?

@Anton-cv2ti

3 жыл бұрын

It's not supported on iPhone 5 and 6, so not quite, but soon.

The 90 percent property was line clamp not the clamp function. Min and max have more support, and clamp resolves as max( x, min(y, z)) per mdn.

This is hands down the simplest and best solution I've found. Thank you so much.

Seriously man, I love how you upload these tutorials just as I'm learning something related to it. It's like you're watching my progress. Kinda creepy, but helpful LOL..

EXACTLY what I was looking for! Thanks Mate!

At right this moment I was learning fluid typography, but in other methods. This one seems best of them. Thanks dude.

Thanks Gary! you always awesome!

Finally, I understand! Thank you very much.

simple and effective! using it for my portfolio right now!

Extremely useful and a must have.

I loved it Gary, thanks.

Wow its really amazing thanks bro u helped me alot with responsive web hope u will upload more videos.

I'm rebuilding my website and this new feature is really good. Thank you for the tip. :)

Finally i will stop using calc() in sass, greetings from Mexico.

@helloestouaqui3438

3 жыл бұрын

Search the min() and max() functions in CSS

This is cool! Thanks for sharing. Now I gotta update my landing page and marketing pages.

Damn bro, the new intro is sick 🔥

Helpfull video as usual.

I never thought it was that easy HAHAHAHA, thank you man, you saved me hours

Hi! first of all congrats for your scrimba excellent courses. Just one question: if I put margin in 'ems shouldn't the follow the varying font size already?

Really coool stuff!

Helpful so thank you guy

Wow that's cool I will be using that a lot in my new code.

Awesome 🔥🔥🔥 thanks a lot

Really useful!

Amazing feature great video just when I was wondering if we gonna really have an easier way to do a responsive web design 😁

Very useful and clearly presented (as usual... grin). Pretty soon and we'll be able to have totally responsive pages and sites with no breakpoints.

@migueldomingos4570

3 жыл бұрын

With grid, flexbox and clamp you rarely need to use media queries

Good shit. Keeping up with css is something most of us don't do enough...

thanks, very helpful

It makes my live a lot easier 👌🏾

Thank you

Wow I love this

Thanks

Nice one Gary! Great video!

Wow, I like it new chanel logo

Wow, thx!!

Gary you have taken over from brad traversy hah. I love your videos man you've helped me tons thank you!

Whoa! New logo? Intro? Damn

What editor font do you use? I just switched from consolas to cascadia and I like it after 4 years with consolas.

clamp is a game changer!!

Clamp() sounds great, but what happens if I want to make a zoom-in of the entire browser? If I working with VW I don't have access to the root font-size. So, need I to sacrifice the possibility of zoom-in/zoom-out if I want to have a dynamic font-size?

@rafaelperes4140

2 жыл бұрын

I think you can add a + 1rem or whatever on that vw and it will allow it, like that h1 { font-size: clamp(40px, 5vw + 1 rem, 70px }; This might work for the zoom-in thing

On what basis will decide how much vw use? If I wanted to fit font size between 1000px to. 1920px screens with 16px to 28px accordingly. If I use rem for both value is it possible to limit font size even I change browser appearance font settings ?

YESSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSs, this will help so much

Is it possible to use the clamp property und its parameters for variables inside scss for example? So you could set a variable like $header: clamp();

My best channel just uploaded…

insane!

Thank you for the tutorial! Btw, I am completely new to programming ( i am learning adobe photoshop/xd to become ui designer). What kind of coding program should I learn first? Is css a good place to start? Or are there something easier I can try? 🤔

@frizm1543

3 жыл бұрын

css and html are the easiest to start off with

if I may, I'm not a fan of how you laid this out. I'd explain it this way: the actual size clamp is assigning to the property is the middle value (in this case 5vw), that is how it gets fluid. Then clamp says that it should stop resizing when it hits the low or the high value. I like it better this way.

@lourenxoweb6348

3 жыл бұрын

Thanks for the clarification, I got so confused.

Browser support? Can I use this in react project without worrying of clamp works or not for all browsers? Is there a css pollyfill?

Calc(12px +2vw) ; calc() is also a great way to make typography fluid 👍

@kobod

3 жыл бұрын

So that would be the same like clamp, but without a maximum size, right?

@shashwatgupta_

3 жыл бұрын

Yes without the maximum size . Honestly i haven't faced any issues with the maximum size my headings never really gets too big when i use this calc() i usually play around with values . But nevertheless clamp is better

I've been using calc(16px+1vw) or something similar. I like this clamp version tho..

Fluid typography has been driving me crazy lately.

aaah...so good

Does middle unit has to be View Port(vw) width? Can it be PX or % ?

what difference does it make if we used max and min width just asking to clear my concept

is there a polyfill or prefix for ie11?

I swear if you say linod... Oh.. scrimba. I love scrimba🥰

really really cool...just 1 line to fix this big problem.

What if you set your base font size with clamp and then use rem-s and em-s for all the different properties throughout your code (margin: 2rem; font-size: 1.5em)?

@anon5992

3 жыл бұрын

that is a greate idea

This is cool but its really hard to have fine control. The middle value which is the preferred value. It's really hard to understand exactly what pixel value is the vw is. I think this is great for a quick fix

Very cool indeed! The 'caniuse' that you looked at however is for 'line-clamp' which is something completely different. Clamp is included in here: caniuse.com/css-math-functions with browser support currently at 88%

Is line-clamp the same as clamp()? The first has 95% support, the second 77%. The syntax you're using looks like the second.

@Anton-cv2ti

3 жыл бұрын

Nope, he showed the wrong support table. Support for clamp() is 77%, but it is supported in all browsers, so that number will soon be 95% The only real slowdown is missing support on Iphone 6 and earlier.

I'll see you size 😂, This video is cool ❤

@martin_E79

3 жыл бұрын

The man got CSS (font-size) on his mind you know ;)

great hack

media query without js?

Please also upload how to make the ReactJS website responsive.

Clamp recently saved me bc our main client is blocking style tags so I can’t use media queries any more.

5th New intro need more effects

hail to the algorithm gods!

life saver jesus

I see you size soon!

Your voice was clamp() 🤣

vw is good but causes issues when zooming in and out

The thing is .... smaller viewports don’t need smaller fonts. And making a header super large on a large viewports is just filling space for filling space sake.

@castlemoyle

3 жыл бұрын

Of course not. He was just showing you what you could do, not what you necessarily should do. (edited to change the 2nd could to should, which is what I meant.)

I don't really get the middle parameter

1:30 "in case you've been living under a rock" So why are you telling me about it? since I'm supposed to know anyways... hmm

Ah, now life has a meaning!

@Zero-oq1jk

3 жыл бұрын

I'm not sure if your sentence have a right scale. Try to use clamp() on it.

Oh, and it's not a beta CSS feature either - already supported in Chrome, Edge and FF.

looks like my IDE doesnt recognize this function in scss files

@soorajkj1564

3 жыл бұрын

Also my vs doesn't recognise this function

truly fluid typography is possible since years without clamp and without any javascript. just use 2 breakpoints for the min and max values and calc for the rest. but the clamp() makes it much easier :)

Where is Linode ??!!

hah its really works

667k subscribers and so few views?

I think you showed the wrong caniuse, it's actually this, and the support is 80% for clamp 88% for min/max: caniuse.com/css-math-functions

Eh! You’ve been able to produce fluid values and font sizes using sass for years. I have a mixin I’ve used on projects for the last 3 years. No doubt this is slightly easier as you don’t need scss

@TomHermans

3 жыл бұрын

You could do it even without sass, just with calc. Clamp is even better though.

Not a game changer...but pretty cool

I thought this was gna be about Line clamping...

Response typography? impossible!

To scale the text properly in a smart way was one of most annoying issues during the last years. This property was more than necessary.

This is good but I deduce it can be a fuckery when clamping multiple inline elements..

IE still a problem in 2020 🤣

It's nice to have on your backpocket, but I really don't see any use for it. It's not like a regular user's gonna resize the browser window enough to notice that it's even there at all.

@BC-zl3ez

3 жыл бұрын

Not for people resizing the browser, but instead different resolutions. Nice alternative to media query hard break

I think that the total percentage of IE users are no one but developers and companies only who want to make their websites IE compatible. The real users might not even care about IE. Whatever the statistics shows, maybe it's just the developers

151st Liker

This seems good in the surface but is a horrible poor mans fluid typography. Unfortunately there is no right way to do it. Using viewport units should be bad practice. Because not everyone has text just in the viewport container. That's the problem. The size of the container is irrelevant, so it'll be too small or too large in a container depending in the viewport. What if almost identical items had different sized containers? What if the site was responsive and shifts more content to the sides as the viewport width increases to a threshold making the main content container smaller than before. All this would be solved if there was a unit representing the container size but there isn't. Using clamp($, 3vw, $) is bad practice and should only rarely be used (if the text is definitely using the entire viewport as its container which is very uncommon). The solution ive come up with so far is using em units, and then the ResizeObserver js lib to read if the container changed size, read container width, divide by 10, and set it as the inline container font size to influence the text child elements use of em. Its the closest option and its horrible, but at least it actually does its job. Stop using vw as font sizes.

First

I am just wondering, are the people behind CSS just allergic to good, meaningful, appropriate names ? Clamp ? wth...

@jamieprescott100

3 жыл бұрын

Clamp describes exactly what the function does so I don't see what the problem is?

@titoriano1

3 жыл бұрын

Clamp is a common term for many languages that have this behavior....

Thanks

very cool stuff. if only it had support on that blasted IE.. :|

@jamieprescott100

3 жыл бұрын

Microsoft are telling everyone not to use IE so you shouldn't be using it anymore :-)

@alex-suciu

3 жыл бұрын

@@jamieprescott100 it's not me who is using it. but rather clients of that certain company website. ( 2-3% but they still are )