Easy Responsive Typography (CSS-only)

No video

Easy Responsive Typography (CSS-only)

Рет қаралды 12,849

Күн бұрын

In this video, I'll show you how to set up a fluid responsive typography scale with the CSS clamp property.
🔗 Key Links 🔗
- CodePen: codepen.io/Cod...
- MDN docs on clamp(): developer.mozi...
- Caniuse.com: caniuse.com/?s...
- Open Props: open-props.sty...
- Utopia Font scaling: utopia.fyi/
- Modern Fluid Typography: modern-fluid-t...
---------------------------------------
📹 Related Videos 📹
- Get Started with Open Props: • Open Props CSS Framewo...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned

Пікірлер: 41

@jimmyj.6792 2 жыл бұрын

Thanks Chris for this responsive presentation 🙏👌

@CodinginPublic 2 жыл бұрын

You’re welcome!

@anuj7286 2 жыл бұрын

This makes my life easier thank you so much sir!

@CodinginPublic 2 жыл бұрын

You’re welcome! Glad it was a help!

@humbulanimunyai6320 2 жыл бұрын

Always awesome content, happy coding

@CodinginPublic 2 жыл бұрын

😊

@ahmetdijitaldönüşüm 2 жыл бұрын

I newly discovered you. This is awesome thank you 🙇

@CodinginPublic 2 жыл бұрын

So glad you’re enjoying the channel ☺️

@shovadas01915 Жыл бұрын

Good Content. And much informative. I'll learn new thinks. Thanks for everything.

@CodinginPublic Жыл бұрын

Glad it was a help!

@technotoyou4209 Жыл бұрын

This was absolutely brilliant. Many thanks.

@CodinginPublic Жыл бұрын

Glad it was a help!

@CephalonShohan Жыл бұрын

Found it quite helpful. Thanks

@CodinginPublic Жыл бұрын

Glad it helped!

@anonymouseverx 2 жыл бұрын

Very informative like always. Thanks, Chris.

@CodinginPublic 2 жыл бұрын

🙏

@lvekua 2 жыл бұрын

Love it ❤ Thanks for the awesome content!

@CodinginPublic 2 жыл бұрын

Glad it was a help! 🙌

@DTUSEM 2 жыл бұрын

Good content. We need more like this that can be used in our websites also. धन्यवाद ।

@CodinginPublic 2 жыл бұрын

You’re welcome! Thanks for saying something!

@nitinsoni9956 2 жыл бұрын

Your videos are AAA ( Awesome As Always).

@CodinginPublic 2 жыл бұрын

🙏

@sindupratama8966 2 жыл бұрын

thans bro you save my day

@CodinginPublic 2 жыл бұрын

Glad to help!

@Talel_kraiem 2 жыл бұрын

Very helpful may god bless you for this

@CodinginPublic 2 жыл бұрын

🙏

@JohnBartmannMusic 2 жыл бұрын

sweet, thanks for this

@CodinginPublic 2 жыл бұрын

You’re welcome! Glad you enjoyed it!

@Mashael_96 Жыл бұрын

Thank you

@CodinginPublic Жыл бұрын

You're welcome!

@maruko8324 Жыл бұрын

This is very great! Thank you for introducing Modern Fluid Typography Editor. Btw why is it at some point of viewport width (let's say 700px) my h1 and h2 has the same size until 800px or higher? Obviously my h1 settings is higher than my h2. Is this some kind of bug?

@CodinginPublic Жыл бұрын

Hey! Sorry for my delay. Hmm…I'm just thinking it was the math between the two. If I remember correctly, I set the small screen size to grow at a different rate than the larger screen size. So at some point they may overlap a bit or look very similar, but it should all be correct according to the math?

@RajSidhux 6 ай бұрын

Hey, i am using this for my fluid fonts - calc(8px + 0.390625vw) - which would you say is better to use, Calc or Clamp?

@CodinginPublic 6 ай бұрын

Clamp would be better. It uses a calc, but you also can set a min and max size. On very small or very big screens a pure calc can have odd results. So the clamp sets min and max values nicely.

@moneyfr 2 жыл бұрын

So strange your videos were not showing on my KZfaq for so long

@CodinginPublic 2 жыл бұрын

Weird. KZfaq hasn’t been showing my content much and I’m not sure why? But glad this one found you!

@codewithfarhad8594 2 жыл бұрын

hello good sir, what VS theme and font, color schemes etc you are using? It looks really refreshing and I would like to copy the styles for my home setup 👍

@CodinginPublic 2 жыл бұрын

My VSCode Theme and Font Setup kzfaq.info/get/bejne/a9t1h7eJ3bzOaKc.html

@codewithfarhad8594 2 жыл бұрын

@@CodinginPublic thank you so much for sharing all this awesome content 👍

@wentallout 2 жыл бұрын

I think the open prop way is too bloated. If I need a typescale I will use utopia. I dont need a giant css framework that has too many variables I cant remember

@CodinginPublic 2 жыл бұрын

Yeah, I think it’s supposed to be used more selectively, just when you want some spacers or perhaps a transform, etc. But it’s great to have options and no worries if you’d prefer Utopia. It’s awesome, too!