4 Keys to Responsive Sizes in Webflow

[@chuckc19]

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

[@timothyricks]

Thank you, Chuck!

[@Itslogicee]

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]

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

[@danielabaigorri]

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]

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

[@calebraney]

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]

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

[@FloNocode]

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

[@timothyricks]

Thank you!! I'm really glad this helps

[@irafis]

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

[@timothyricks]

Thanks so much!

[@HeywoodJeblomi]

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 😊

[@danielmaina4942]

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

[@timdaff]

Fantastic video and explanation. Right on time for me!

[@timothyricks]

Thank you, Tim!

[@DANNYFIGDESIGNS]

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

[@TheScootermac315]

So helpful, thanks!

[@anilsoilih8659]

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

[@timothyricks]

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

[@anilsoilih8659]

@@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]

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

[@ARRuiz]

You're amazing!

[@jo69123]

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]

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.

[@vlastimilslechta8927]

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

[@timothyricks]

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

[@何圳穎]

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

[@timothyricks]

I’m so glad this helps!