CSS Clamp Simplified, with Fluid Responsive Typography Examples

Ғылым және технология

To create Responsive Typography in your websites, you might immediately want to reach for Media Queries. Well, the clamp function in CSS, is a powerful utility that allows you to easily create responsive typography without any media queries.
In this video, I simplify how this function works, and show you some examples.
_____
Subscribe to My Channel: bit.ly/deeecode
_____
🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.
_____
⚡️ Connect with me:
- Personal youtube: / dillionmegida
- Personal website: dillionmegida.com/
- Twitter: / iamdillion
- Instagram: / deeecode
- LinkedIn: / dillionmegida
- GitHub: github.com/dillionmegida

Пікірлер: 31

  • @afbelardi
    @afbelardiКүн бұрын

    Really great explanation! Thank you

  • @DatchGuest
    @DatchGuest3 ай бұрын

    You are good in explaining codes Bruuuh!!!!!!!!

  • @scottonanski4173
    @scottonanski41739 күн бұрын

    Nice and simple explanation. Good job, man. Thank you.

  • @martyjwalker
    @martyjwalkerАй бұрын

    Bravo. You've explained clamp better than the KZreadrs with a million followers.

  • @josiaharkson2615
    @josiaharkson26152 ай бұрын

    very well explaind my guy. thanks

  • @ademlayes9116
    @ademlayes91164 ай бұрын

    Very helpful, your explaining is very smooth and easy to understand even for a 5 year old... your channel needs more support and subs❤

  • @deeecode

    @deeecode

    4 ай бұрын

    Thank you for the kind feedback! I’m so glad you enjoyed this video

  • @harrisonjude7523
    @harrisonjude75233 ай бұрын

    This is so simple and to the point, you are killing it man! Thank you so much!

  • @deeecode

    @deeecode

    2 ай бұрын

    You're very very welcome! I'm glad to hear

  • @aphrodite6647
    @aphrodite66475 ай бұрын

    Thankss

  • @deeecode

    @deeecode

    4 ай бұрын

    You're very welcome!

  • @AlonsoLayena
    @AlonsoLayena2 ай бұрын

    I love your channel!!!!

  • @deeecode

    @deeecode

    2 ай бұрын

    So glad you do...you're welcome!

  • @phillymontana
    @phillymontana4 ай бұрын

    Yup yup. This is the kid. Great tutorial.

  • @deeecode

    @deeecode

    4 ай бұрын

    You're welcome!

  • @likandokayombo
    @likandokayombo5 ай бұрын

    Nice this is huge. I just used a Clamp function in my project 😅

  • @deeecode

    @deeecode

    4 ай бұрын

    Nice to hear :)

  • @akinsholaakinniyi2717
    @akinsholaakinniyi27174 ай бұрын

    Nice one🤝 I'll try using it in my upcoming projects From LinkedIn btw 🌚

  • @deeecode

    @deeecode

    4 ай бұрын

    Thanks for visiting :) Glad you enjoyed this video

  • @mathblend930
    @mathblend9305 ай бұрын

    Great

  • @deeecode

    @deeecode

    4 ай бұрын

    You're welcome!

  • @samgenerals4320
    @samgenerals4320Ай бұрын

    What about columns and rows..?? Can clamp be used for anything else apart from fonts..??

  • @50mm_
    @50mm_4 ай бұрын

    Excellent. I wonder when it will be adopted in tailwind…

  • @deeecode

    @deeecode

    4 ай бұрын

    I don't know tailwind enough to answer this soorry

  • @video724de
    @video724deАй бұрын

    Hi, what's this "browser" on the left side of the screen (I can't find out)? I didn't know about the clamp functionality (newbie), your explanation helps a lot. I just try to find my way into Bootstrap Studio. Thanks & regards

  • @video724de

    @video724de

    Ай бұрын

    I found the answer myself - it's simple. It's Google's Chrome browser. I had no need to use it before. Other browsers have comparable abilities (Safari, Firefox), but it seems easier (to me) to use Chrome for this task.

  • @deeecode

    @deeecode

    Ай бұрын

    You're welcome! Actually it's Edge I'm using

  • @rg-web-design
    @rg-web-designАй бұрын

    Great insight, thanks. I have a logo which the client wants to keep consistent to screen sizes, so I've used VW for the logo size. At 1100px viewport, the logo is 8vw, but down at 380px viewport, the logo size is 22vw. Is there a way to 'clamp' or 'calc' this so the vw increases as the viewport decreases? (I'm a total newbie with CSS). Thanks.

  • @deeecode

    @deeecode

    Ай бұрын

    If I get your question correctly, I think your solution here might still be clamp by doing something like clamp(minsize, 7vw, maxsize), you're able to ensure that the size of the logo never goes below minsize, and never goes above maxsize i don't think you can do a "if viewport increases, decrease the element, but if viewport decreases, increase the element" without javascript involved does this help?

  • @rg-web-design

    @rg-web-design

    Ай бұрын

    @@deeecode Thank for taking a look. I almost have this but it does jump on tablet sizes. Please give it a go and have a look. clamp(12vw, 12vw - 0.8vw, 5vw)

  • @rg-web-design

    @rg-web-design

    Ай бұрын

    @@deeecode The best way I can describe this is a 'reverse clamp'; Let's say on desktop I have an image which is 10vw. But on mobile, 10vw is too small. So on mobile I need the image to be 20vw. An increase from 10vw to 20vw as the screen gets smaller.

Келесі