Lumos Fluid Responsive | Webflow Framework

Get the Lumos Cloneable (affiliate link)
webflow.grsm.io/tricks?path=l...
Fluid Builder
fluidbuilder.webflow.io/
Lumos Docs
lumos.timothyricks.com/
Join my Webflow Wizards Community
/ timothyricks
00:00 - Intro
00:20 - Problem With Traditional Fluid Solutions
00:40 - Adaptive vs. Fluid Sizes
01:20 - Using The Fluid Builder
01:40 - Scaling Above Design Width
02:57 - Making The Size Folder Fluid
03:45 - Overriding An Individual Variable
04:21 - Red Accessibility Warning
04:51 - Yellow Zoom Warning
05:52 - Type Scales
09:03 - Adding The Code Into Webflow
09:51 - Removing Type Scales For Designs That Don't Use Them

[@kerber19]

I'm still speechless, after all you did for the Webflow community Timothy. It's a thrill to open TH-cam and see a new post, every single time. Thank you!!

[@timothyricks]

Thank you so much!! 😊 It’s a privilege to share things like this. I’m glad to hear it’s helping

[@ianfleming3768]

This commennt. I second it.

[@gmcwhinney]

Absolutely amazing. I'll be using this on my next big project. The fact you can swap out the adaptive CSS from your Webflow cloneable with the builder's CSS output and it simply works is perfection.

[@DANNFIGDESIGNS]

I especially appreciate that url to bring back the settings! I can’t imagine not having that. You have been my only true source when it comes to responsiveness!

[@timothyricks]

Oh, yes! That url is a must have. 😄 Thank you so much!

[@RockstahRolln]

Absolutely Brilliant!!

[@danielapro9755]

Beautiful✨

[@SilverSSS_roblox]

You're the best man! I want to use your Lumos framework. I love all of your tutorials and videos. They are very helpful! I am new to Webflow, I like using it, but, it has a lot of limitations; I can't add custom code, use JS scripts, or even make more than 2 projects. I've followed your crash-course and it was great! But how do we get around these flaws? I'm a young developer and I don't have the money to buy a hosting plan. Please make a video on a solution for this. Maybe you could host a giveaway? Also another thing, I believe it was cool that your name, when abbreviated in your old videos for your intro was T.RICKS. It spelt tricks, while still keeping your name. Maybe you could make it so that it says "Webflow T.RICKS" or something. Just some suggestions. Thanks.

[@timothyricks]

Thank you so much for the kind words and suggestions! As far as I know, there’s no workaround for editing custom code in Webflow without paying for a plan. We can clone a project that already has code in it but can’t edit that code on the free plan. For my first couple years of freelancing, I just used a free plan and would always get clients to pay for hosting on their own account. I had two free Webflow accounts to get four free sites and would delete test projects after I was finished learning with them.

[@SilverSSS_roblox]

@@timothyricks Ah. Thank you a lot, but I feel it's too limiting for my projects and I want to have full freedom, so though I will still follow your tutorials, I will be coding them myself. Your Figma designs are amazing for practice. Again, Thank you Timothy.

[@muhammadsaad8678]

Hi Timothy,
Any efficient way to use relume and lumos for speed build.

[@timothyricks]

Hi, we could paste Relume components into the Lumos styleguide. The margin classes would need to be replaced with flex gap classes though, and the outer container, section, and padding classes would need to be replaced with the Lumos section and container.

[@none1615]

@@timothyricks That would be amazing use case deserves video that many people using Relume but fall in love with Lumos efficiency .

[@delaro32]

Amazing update! So from my understanding, this doesn't use cqw anymore? There's no need to set the container to inline-size?

[@timothyricks]

Thank you! CQW and inline-size are not needed or used for this anymore. I learned that because the fluid type is using clamp, there's no issues with text growing larger than the container. This was only an issue with older techniques that use media queries for the max font size instead of using clamp.

[@jorgagostini1013]

Love it! I used it for my latest project, and it worked like a charm! I have one question though: is it possible to turn off the type scale for the headings and text variables? Basically, I'm too lazy to add them to the main variables by hand, but I don't want to use them with the type scales.

[@timothyricks]

Thank you! Yes, all of that is adjustable from the fluid builder....
Here's an example with no type scales and the heading variables added within the main variable group.
fluidbuilder.webflow.io/?design=90&max=90&min=20&g=--padding-horizontal--main,3,1_--size--2rem,2,1.75_--size--2-5rem,2.5,2_--size--3rem,3,2.25_--size--3-5rem,3.5,2.375_--size--4rem,4,2.5_--size--4-5rem,4.5,2.75_--size--5rem,5,3_--size--5-5rem,5.5,3.25_--size--6rem,6,3.5_--size--6-5rem,6.5,3.75_--size--7rem,7,4_--size--7-5rem,7.5,4.25_--size--8rem,8,4.5_--size--8-5rem,8.5,4.75_--size--9rem,9,5_--size--9-5rem,9.5,5.25_--size--10rem,10,5.5_--size--11rem,11,5.75_--size--12rem,12,6_--size--13rem,13,6.5_--size--14rem,14,7_--size--15rem,15,7.5_--size--16rem,16,8_--display--font-size,7,4_--h1--font-size,5,3_--h2--font-size,4,2.5_--h3--font-size,3,2.25_--h4--font-size,2,1.75_--h5--font-size,1.5,1.5_--h6--font-size,1,1_--text-large--font-size,1.25,1.25_--text-main--font-size,1,1_--text-small--font-size,0.875,0.875,t
And here's another example with no type scales enabled and no heading variables in the main variable group. In this case, the heading variables would reference the size folder natively in Webflow like shown in the tutorial.
fluidbuilder.webflow.io/?design=90&max=90&min=20&g=--padding-horizontal--main,3,1_--size--2rem,2,1.75_--size--2-5rem,2.5,2_--size--3rem,3,2.25_--size--3-5rem,3.5,2.375_--size--4rem,4,2.5_--size--4-5rem,4.5,2.75_--size--5rem,5,3_--size--5-5rem,5.5,3.25_--size--6rem,6,3.5_--size--6-5rem,6.5,3.75_--size--7rem,7,4_--size--7-5rem,7.5,4.25_--size--8rem,8,4.5_--size--8-5rem,8.5,4.75_--size--9rem,9,5_--size--9-5rem,9.5,5.25_--size--10rem,10,5.5_--size--11rem,11,5.75_--size--12rem,12,6_--size--13rem,13,6.5_--size--14rem,14,7_--size--15rem,15,7.5_--size--16rem,16,8

[@jorgagostini1013]

@@timothyricks perfect! Thanks so much! Going to save this as a template!

[@MaxWeir]

@@timothyricksin both examples there is a warning on the first main variable set, in that ok to ignore?

[@timothyricks]

It’s okay to ignore in this case since that first variable is only being used for left and right section padding. But if it was being used for font size, we would need to reduce the difference between the desktop and mobile sizes so it could pass accessibility requirements

[@corneromme]

Thank you for this video Timothy! I do have a question. Let's say you're working with a design that doesn't use the Lumos styleguide, how can you make sure that you get an exact match with the design when going from Figma to Webflow? Because if the designer used random numbers for the spacing (gaps, paddings, margins) all over the place, there is no way I'm going to make a variable for every single spacing to get an exact match of the design. How would you handle a situation like this? And can we also make this design fluid including the spacing just like we did with Wizardry's EM method?

[@timothyricks]

Oh, good question! I usually round the values up or down to fit within a system if they were set randomly. Senior designers typically follow a 4 or 8 point spacing system that can be set with variables. We can also use calc on a size variable with Webflow’s custom properties to get a specific size if absolutely necessary. calc(var(--size-4rem) * 0.968) returns 62px instead of the normal 64px. But we should avoid applying just one fluid font size to the html or body element to make the whole website fluid like Wizardry did because that puts the whole website on one scale where small sizes get too small and large sizes don’t get small enough. To remove the need for breakpoint sizes, larger sizes need to reduce at a greater rate.

[@corneromme]

@@timothyricks thank you, that really helps! It's a lot more clear to me now.

[@EmilyMarais]

This is so amazing. I'd love to implement it, but each time I watch your videos I feel that I'm missing some understanding of how to implement it. e.g. when you added the code in Webflow, I don't have those custom code modules, although I know I could add them, I'm unsure if I'd do it right / without missing something.
My understanding is: I should connect all sizes to a corresponding size variable, and use your tool to generate code to flow fluidly between the values set in Webflow. (I didn't design with type scales in mind)

[@timothyricks]

Hi Emily, thank you! The other custom code modules (embeds) aren’t needed for fluid responsiveness. They handle other parts of the Lumos framework like color or grids. The size variable folder is really the only thing needed, and it can either be created manually or copied from the Lumos cloneable by using the CutCopy Webflow App for copying variables. The H1 through H6 variable folders are really nice to have, but those aren’t required either since you could apply any of the size variables directly to your heading classes if you’re not using heading variables.

[@Binyamin1444]

I noticed on some of your builds using lumos, you sometimes end up using 3 classes on a single element, isn’t this typically shunned? Thoughts?

[@timothyricks]

Good question! A lot of the problems with over stacking classes can be solved by starting with a custom class before adding the utilities. It makes a cool hack possible in Webflow of renaming stacked utilities instead of removing them which makes a long list of classes much more manageable. I prefer to prioritize what’s going to create the less css and faster loading sites which usually means reusing more classes that already exists. This video and timestamp explains it best. th-cam.com/video/8RBs278onMA/w-d-xo.htmlsi=3O7Nm7nJuRPiVQfg&t=124