Lumos Fluid Responsive | Webflow Framework

Get the Lumos Cloneable (affiliate link)
try.webflow.com/tricks?path=lumos-v2-beta
Fluid Builder
fluidbuilder.webflow.io/
Lumos Docs
lumos.timothyricks.com/
Join my Webflow Wizards Community
www.patreon.com/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 KZbin 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!

[@magpieradio]

Timothy, you rock buddy. What would be killer is to add output examples in your application page so users can see the live font as you adjust things. eg; select google font, turn on preview.

[@RockstahRolln]

Absolutely Brilliant!!

[@danielapro9755]

Beautiful✨

[@brendinventer6407]

This is just mindblowing thank you mate. Quick question though I know you half mentioned it but the default v2 Lumos project uses adaptive sizes for each breakpoint and NOT fluid correct? I find Fluid is obviously alot better but I guess like you said alot of designs are not made with a fluid type or size scaling in mind? Could we then use maybe fluid sizes for all sizes while keeping the fonts adaptive? I hope that makes sense.

[@timothyricks]

Thanks so much! Yes, Lumos by default uses adaptive sizes just so people have that option, but I use fluid in every project. Mixing adaptive font sizes with fluid sizes for everything else can lead to some weird results. But we can use fluid font sizes without having to use the font size type scales. By default in Lumos, the font sizes are applied from the size variable folder. So as long as we make that core size folder fluid, all the font sizes will become fluid while still allowing us to select any size we want for the font size. 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

[@brendinventer6407]

@@timothyricks cheers man that makes sense I appreciate you taking the time to respond so thoughtfully.

[@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.

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

[@bjarnithors]

This is amazing stuff you are building, thank you so much! I have a question about if I think H1 default is too large than I scale down the H6 to maybe 1rem. It changes the H1 to 3,18 rem but I dont have that value in the scaling tablet (Styleguide) so if Im doing this in Figma do I have to just manually go through all the scaling tablet (size variables) and change the values for each in the variable styles panel? No reason to spend time changing the graphic you built displaying this for small website, right? and why are all the graphics in size grading tablet displaying the size for each size value 1 pxl larger than the actual value. Is there a reason for that?

[@timothyricks]

Thank you! Have you tried reducing the type scale instead of reducing the h6 font size? In Figma, we would just type in the exact font size instead of linking it to a size variable. Which size is 1px larger for you? Is that something in Figma or in the Fluid Builder?

[@bjarnithors]

@@timothyricks ahh of course that worked very nicely ty!! 😁 the beautiful table you built in your styleguide which displays the scaling of the sizes from 0 to 16. The colored boxes on right of the rem value are always 1pxl larger than the variable. Like box for 16 rem is 257px but the variable for 16 rem is 256 px. I think this is a moo point but I wanted to ask if there was a reason. Dont wanna bother you too much with non important matter!

[@timothyricks]

Oh, thank you for letting me know! I’ll look into what’s going on there

[@timothyricks]

I think it might have something to do with me setting their size in Figma using padding instead of width. But the actual padding value being applied is correct.

[@72grey]

Hello Tim, could you explain where to paste the code as I haven't installed or have prior knowledge of Lumos. I'm simply trying to trying to implement this part on my existing project. Thank you!

[@timothyricks]

Sure thing! This code would go inside any embed on your page. That embed should be turned into a component and used on every page so that any future changes made to the code inside the embed will update across every page that uses the component. The fluid code makes the size variables in Lumos fluid so you could either recreate those variables manually or import them using the CutCopy Webflow App.

[@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.

[@professional.yappatron]

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.

[@professional.yappatron]

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

[@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. kzbin.info/www/bejne/boOlpGVtbdShg6Msi=3O7Nm7nJuRPiVQfg&t=124