3 modern CSS techniques for responsive design

3 modern CSS techniques for responsive design

HomeKevin Powell3 modern CSS techniques for responsive design
3 modern CSS techniques for responsive design
ChannelPublish DateThumbnail & View CountDownload Video
Channel AvatarPublish Date not found Thumbnail
0 Views
My free course, Conquering Responsive Layouts: https://courses.kevinpowell.co/conquering-responsive-layouts

A look at how we can use CSS comparison functions min(), max(), and clamp() for responsive layout techniques, plus a look at Utopia, a fluid type scale we can use in our projects!

Links
Utopia Fluid Type Scale: https://utopia.fyi
SmolCSS – minimal snippets for modern CSS layouts and components: https://smolcss.dev
Modern CSS: https://moderncss.dev
vmin and vmax: https://youtu.be/IWFqGsXxJ1E

Timestamps
00:00 – Introduction
00:47 – widths with min()
02:53 – padding and margin with max()
06:50 – typography with clamp()
09:10 – liquid scale with Utopia

#C.S.S

Come hang out with other developers in my Discord Community
https://discord.gg/nTYCvrK

Stay up to date with everything I'm doing
https://www.kevinpowell.co/newsletter

Come hang out with me live on Twitch every Monday!
https://www.twitch.tv/kevinpowellcss

Support my channel
‍ Take a course: https://www.kevinpowell.co/courses
Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
Support me on Patreon: https://www.patreon.com/kevinpowell

My Editor: VS Code – https://code.visualstudio.com/
The theme I use: Atom One Dark

I'm in other places on the internet too!

If you want a behind-the-scenes look and a taste of what's on my YouTube channel, follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

And whatever you do, don't forget to make your corner of the internet a little more fun!

Please take the opportunity to connect and share this video with your friends and family if you find it helpful.