4 Keys to Responsive Sizes in Webflow

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ม.ค. 2025

ความคิดเห็น • 31

  • @Itslogicee
    @Itslogicee 11 หลายเดือนก่อน +8

    You don't know how much I appreciate your content, brother. After going through so much of your material I need to say thank you!

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน +2

      That’s really kind of you to say! Thank you for joining in!

  • @CameronGallagher96
    @CameronGallagher96 หลายเดือนก่อน +1

    Stumbling on your channel might have been the find of 2024! GREAT content, keep up the amazing work!

  • @chuckc19
    @chuckc19 11 หลายเดือนก่อน +7

    Man, everytime I need you, you show up for me. Grateful. You the man my guy. 💪🏾

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน +1

      Thank you, Chuck!

  • @danielabaigorri
    @danielabaigorri 9 หลายเดือนก่อน

    I am a graphic designer, self taught on web design. And watching your content has helped me SO MUCH. Many things I find hard to follow due to my lack of technical knowledge, but I'm working on that lol. But even that has inspired me to learn more, get better and improve. Thank you!!

    • @timothyricks
      @timothyricks  9 หลายเดือนก่อน

      I’m so glad to hear that! Thank you!

  • @phntomlily
    @phntomlily 18 วันที่ผ่านมา +1

    This is exactly what I'm looking for. Thank you!

  • @calebraney
    @calebraney 11 หลายเดือนก่อน +2

    Love the update, definitely a big improvement from the previous version in lumos v1, and I think keeping the adaptive spacing variables makes working with variables like section padding a lot smoother

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน

      Thanks so much, Caleb! I really appreciate all your feedback on V1 to get to this point. Yes, setting small, medium, large section spacing is so much easier now. Also, grid gaps or any other reusable size variables can be linked to the adaptive spacing variables. The system really came together well

  • @irafis
    @irafis 11 หลายเดือนก่อน +1

    Love your content Timothy. I'm learning a lot! Thank you!

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน

      Thanks so much!

  • @FloNocode
    @FloNocode 11 หลายเดือนก่อน +1

    In this time Timothy you are on FIRE !!! Thanks for your Huge content about webflow !

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน

      Thank you!! I'm really glad this helps

  • @timdaff
    @timdaff 11 หลายเดือนก่อน

    Fantastic video and explanation. Right on time for me!

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน

      Thank you, Tim!

  • @danielmaina4942
    @danielmaina4942 3 หลายเดือนก่อน

    This is quite interesting... There's systems for spacing? Wow

  • @DANNYFIGDESIGNS
    @DANNYFIGDESIGNS 11 หลายเดือนก่อน

    Thank you Timothy! I get it now! 🤪🙏🏼

  • @LennyMaroni
    @LennyMaroni 11 หลายเดือนก่อน +1

    Great videos.
    One thing. At the end, you don't need to write 0px. No need for the "px". 0 pixels is the same as 0 elephants 😊

  • @anilsoilih8659
    @anilsoilih8659 11 หลายเดือนก่อน +1

    Great update 😁 Seems more natural ! and just perfect explanation as usual.
    Is there a doc with changelogs as the notion page for V1 ?

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน +1

      Thank you! No docs yet. Once V2 is finished, I'll build those out.

    • @anilsoilih8659
      @anilsoilih8659 11 หลายเดือนก่อน

      @@timothyricks Okay! I'll stay tuned. If there's somewhere i could give you a feedback, it'll be with pleasure. Lumos is a game changer :)

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน +1

      @@anilsoilih8659 Thank you! Yes, I'd love any feedback you have. Either through LinkedIn or Instagram would be great instagram.com/timricks/

  • @TheScootermac315
    @TheScootermac315 9 หลายเดือนก่อน +1

    So helpful, thanks!

  • @jo69123
    @jo69123 11 หลายเดือนก่อน

    I notice that you started using REMs for everything, instead of EMs, what was your thought process for making this shift in your framework?

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน +2

      I switched to REM so we can set the default body font size to match the paragraph size. If we increased the body font size when using EM font size headings, everything inside would have increased. Using REM, we can set the body font size to a default of 18px or whatever the design calls for without it affecting the size of the headings and everything else inside.

  • @ARRuiz
    @ARRuiz 10 หลายเดือนก่อน +1

    You're amazing!

  • @vlastimilslechta8927
    @vlastimilslechta8927 11 หลายเดือนก่อน

    So you need to create all these variables and then decide what to use or how does it work please?

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน +2

      Yes, we create a Webflow variable like space/14 set to 14rem. And add css in an embed to change its value on tablet and landscape.
      /* tablet */
      @media screen and (max-width: 991px) {
      :root {
      --space--14: 12rem;
      --space--16: 14rem;
      }
      }
      /* landscape */
      @media screen and (max-width: 767px) {
      :root {
      --space--14: 7rem;
      --space--16: 8rem;
      }
      }
      I have a cloneable styleguide here with the whole spacing system in it.
      webflow.grsm.io/tricks?path=lumos-v2-beta

  • @何圳穎
    @何圳穎 11 หลายเดือนก่อน +1

    Thank you so much , I'm looking for it for long time🥲

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน

      I’m so glad this helps!