Fluid Responsiveness in Webflow (New Tool)

Fluid Builder Tool (affiliate link)
webflow.grsm.io/tricks?path=f...
Join my Webflow Wizards Community
/ timothyricks

[@kylepitocchelli1738]

Duddeee!! Yes! A behind the scenes peak at how you built the tool itself could be really cool!

[@timothyricks]

Great idea! I almost live streamed building it the other night but thought my computer might crash again. A recap of the build could be cool though

[@kylepitocchelli1738]

@@timothyricks Yes please! I would love to see the function you built to handle the math on the backend.

[@timothyricks]

@@kylepitocchelli1738 Oh, sure thing! Here it is. function getSizes(minFontSize, maxFontSize, minScreenSize, maxScreenSize) { let rem = ((minScreenSize * maxFontSize - maxScreenSize * minFontSize) / (minScreenSize - maxScreenSize)).toFixed(4); let cqw = (((maxFontSize - minFontSize) / (maxScreenSize - minScreenSize)) * 100).toFixed(4); console.log("clamp(" + minFontSize + "rem, " + rem + "rem + " + cqw + "cqw, " + maxFontSize + "rem);"); } getSizes(4, 8, 20, 90); There's also a great article that explains it here. www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/

[@Directorkf]

You are, in fact, a wizard. Thanks Timothy!

[@timothyricks]

Thanks so much!

[@mohitmitra]

Thank you t.wiz, you always come up with the most innovative functions ❤

[@j.espinosa]

Awesome resource, thanks Tim for taking the time to build these valuable resources for us!

[@timothyricks]

Thank you!! I’m so glad this helps

[@perderlaprisa]

for a moment i got super excited thinking this was a new native webflow tool -- even though it's not, yours it's amazing! been using others fluid text tools before but seems like yours is gonna be my way to go from now on

[@madgraphix87]

As always great job! and thanks for sharing your amazing work with us!

[@timothyricks]

Thanks so much!

[@kerber19]

Aaaaaaw Tim, I was wondering when you were gonna release something like this for Lumos, and here we are! Thanks a lot!

[@timothyricks]

Thank you! So glad to finally share this

[@camerond.a.7402]

Amazing tool brother - great work!

[@timothyricks]

Thank you!

[@pavel538]

That is POWERFUL!!! Thank you very much!

[@akzabowtme]

Legendary content Tim, been following you for a while now and just a big thanks to everything you do!! You've helped me a lot!

[@timothyricks]

Thank you so much! Really glad to hear that!

[@gmcwhinney]

Another freaking amazing tool and method, thank you l! This makes it even easier to embrace Lumos as if you needed another reason 🙌

[@timothyricks]

Thank you! I’m really glad to hear that

[@davidacreates]

this is sooooo useful. really appreciate it.

[@zanekrumanocker1711]

I've been hoping you'd figure something out like this for Lumos. Thank Tim!!

[@timothyricks]

Thank you! It’s been on my mind for a while.

[@vladimirpetroski7089]

This is awesome Tim! I'd love to see a video of how you set up your Webflow projects, starting from the variables and style guide, if you use one. I'd watch hours of that 🙌

[@timothyricks]

Thanks so much! I use a styleguide and framework I created called Lumos. Here's the docs, tutorials, and cloneables for it. www.notion.so/timothyricks/Lumos-v2-Docs-6d1139068f7442d49494ec3b581cf09d?pvs=4

[@Itslogicee]

I knew you were working on something epic 🔥

[@designbus]

So friggin awesome!

[@louissmithbmx]

Thank you! 🙏

[@joshbrown0]

This would be awesome as a Webflow app! 🤯

[@DANNFIGDESIGNS]

Thank you, thank you, thank you! Maybe Webflow will have it native one day. I see some more changes coming. It would be nice to have this fluid builder in Webflow, but your solution works fine for now. Thier variables UI could use an overhaul as well. Lol. Growing pains. 😏

[@AndrewE8001]

This is AMAZING! 😃

[@timothyricks]

Thank you, Andrew!

[@khadijahashmi4002]

Our favorite webflow wizard, great video! Question I have, is there any way to integrate v3 captcha with webflow?

[@madarauchiha5433]

Yes fluid scaling is back!

[@moroccan_iracer257]

Aaaaamazing, thx

[@sltho]

Do all agencies develop like this? This is so advanced I love it. This is my style where prep work is 80percent

[@kameraadthomas]

Awesome stuff, just a suggestion to create a reset/clear button (clearing the url) would be a nice qol.

[@timothyricks]

Thank you! Great suggestion! I’ve just been clicking on the logo for now, but something more clear would be nice

[@mohitmitra]

I am a beginner with webflow and I find lumos is the best structure to follow especially with the variable integrations in 2.0 it’s just mind blowing

[@timothyricks]

Thanks so much! I’m really glad it’s been helpful for you

[@wisssse]

That's amazing! Does this work with fluid container sizes as well? I like to use percentages instead of REM to set up a container size, so the design looks the same on all desktop breakpoints.

[@timothyricks]

Thank you! With clamp, the text has to stop scaling up at some point. We could still use this with fluid containers, but it’s usually best to give each text block its own max width in that case so the lines don’t become too long and hard to read.

[@MohamedReda-vx3nw]

thankssss :D

[@kerimallami]

Tim, this is incredible! Will defo give it a try. Why did you switch from using EMs to REMs?

[@timothyricks]

Thank you! I switched mainly to avoid issues of font sizes multiplying based on their parent’s font size. For a while, I used EM for fluid and REM for fixed so that smaller sizes could be set to REM units that don’t scale. But this new workflow with variables solves all that and more.

[@tylercjbradshaw]

Anyone know how to disable microsoft visual search on a logo being used as the home button for a site? I'm going nuts and can't find anything on google.

[@charantejadornala]

By Any chance how can we integrate this to a visual builder in Wordpress?

[@hdzi.]

nice

[@corneromme]

This is awesome Tim, really useful. Quick question though: can we also use this system when we have an existing design that doesn't use these font scales? So let's say you work with a designer that doesn't use the Lumos framework to design, can we still make the site fluid responsive using this tool?

[@timothyricks]

Thank you! Yes, this works with any system. The font scales part is optional, and those variables can be removed in the builder. The heading styles can be added as regular size variables in the top part of the builder or the headings can even reference any of the other size variables in the builder.

[@alexisdesplas777]

Hi! I have an error when copy code in my editor. It say : "Custom code is not validated. Incorrect code may cause issues with the published page. And highlighted clamp in red in line 70. Anyone have an idea to fix this ? Thanks.

[@IkevanGerven]

Another fantastic solution Mr. T!! I was wondering if there is also a solution for Internet Explorer users, since CSS clamp() is not supported there? But I already see - in the article you mentioned - something about a fall-back solution. font-size: [value-fallback]; /* Fallback value */ font-size: clamp([value-min], [value-preferred], [value-max]); Could you also use a similar calc() function as a fall-back or would that be too complex?

[@timothyricks]

Thank you! The article wasn't written by me, but it's where I found the formula for checking if a fluid font size is accessible. My fluid builder falls back to adaptive breakpoint sizes in older browsers in order to support the most browsers possible. A fallback using calc wouldn't cover every browser.

[@IkevanGerven]

@@timothyricks Many thanks for sharing!👍

[@nikp1381]

Hi Tim, Thanks for sharing this man, was wondering when you'd have it worked out. Had a quick question to run by you. Generally, speaking, the Webflow Container Max Width and Min Screen size set the range of where the font starts scaling down & up from, correct? I'm not using containers on my website, only 'divs' with responsive values. Max container width is set to 120rem and min screen to 20rem, and "--display--font-size" heading variable to 4rem-2.08rem. The output from the fluid says to scale past 4rem ===> --display--font-size: clamp(2.08rem, 1.532rem + 2.74vw, 4.822rem); Is this normal behaviour here? It happens only when max container is set to 120rem

[@timothyricks]

Hi, the heading variable will be 4rem at the size you defined in the "Figma Design Width" field and it will scale up from that point to be 4.822rem at the "Webflow Container Max Width" field value. You could set both fields to the same value if you'd like the heading to not grow above 4rem.

[@nikp1381]

@@timothyricks Cheers Tim!

[@ajhoyhoy]

Hi Timothy can you please give this webflow site a custom lumos webclip and favicon so booking marking is easy to identify? thank you

[@timothyricks]

Oh, good call! Just updated it. Thank you!

[@jefimijekrstic1855]

Hello Timothy, what do you think about Additional sizing and layout controls that Webflow has added recently?

[@timothyricks]

Hi, do you mean overflow: clip and box-sizing? It’s always nice to have ui for more properties, but it’s less important now that we have custom css properties.

[@mateuszkawczyk2677]

Hey Timothy, is it possible to "update" the version of Lumos I am currently using in my webflow project? My site's got Lumos 2.0.1 I think, and I saw you've updated the framework to 2.0.4 currently. Any way I could copy some elements from Lumos cloneable to my webflow project to make it happen or do I need to clone webflow project every time it gets an update? Btw. am grateful for all your work, life changing.

[@timothyricks]

Hi, good question! The new flexbox, gap, and grid utilities could all be copied from the style guide of a current cloneable into your existing project. The grid utilities use a little custom code now at the top of the base embed. The changelog has all the version differences. github.com/lumosframework/lumos-v2/releases

[@mateuszkawczyk2677]

@@timothyricks Great, I will try that. Thanks!

[@kai_t7031]

Hey Timothy, great video!!! What can i do if i don't want a max scaling width? The design of my client depends on the website to scale all the up with no limit? what are your thoughts on this?

[@timothyricks]

Thank you!! The container’s max-width can be removed for full width designs, but the font sizes will still stop scaling at whichever width we define. This is mainly for accessibility since fonts that scale up infinitely usually don’t meet accessibility requirements.

[@kai_t7031]

​@@timothyricks Hey Timothy, another small question. My design has a 1440 witdh but my client wants it so scale up to 1920. how can i achive this?

[@timothyricks]

I just added an option to the builder for this!

[@MaxWeir]

Question on the css snippet, do I need to insert that on every page or is there a more global way to approach this

[@timothyricks]

Yes, it needs to be inside every page. Usually I create a Webflow component for all my css so that any future code changes apply to every page. If your site’s already built out, you could add the css embed inside your navbar instead or any other global component. We don’t want to add this css in site settings because site settings css only applies on the published site, not in designer view.

[@sannagranqvist7373]

Wow, so cool! could this be used with Framer?

[@timothyricks]

Maybe so! I’m not sure how Framer handles css variables

[@delaro32]

Man this is amazing! From my understanding, this wouldn't work with full width designs that don't have a max width container. Can this be adjusted so the scaling stops at a certain screen width like it did for Wizardry?

[@timothyricks]

Yes, the scaling can start and stop at any width we'd like by using the Content Max Width and Content Min Width fields. Ideally the container would have a max width, but this will still work for full width containers. With full width containers, the fluid sizes would stop growing at the size we define while the container keeps growing infinitely.

[@delaro32]

@@timothyricks Amazing, can't wait to try this out!

[@matthiasgustavpan]

I am wondering, is it supposed to be that the custom code of the Fluid Builder overwrites the native webflow variables values? Because I still need the native variables set up to be able to select them from the style panel, right? Or am I missing something? :) Thanks for this great tool. It is a great help!

[@timothyricks]

Yes, the custom code is supposed to overwrite the native Webflow variable values, and those native variables are still needed for selecting from the style panel like you mentioned. The values in the variable panel don't matter though since they will be overwritten anyway.

[@matthiasgustavpan]

@@timothyricks Thank you so much Timothy!

[@HowToDrip]

@Timonth Ricks, this video has made me want to learn Lumos. But, do you have a video for newbies to learn it from the very beginning? I could not find one in your video list.

[@timothyricks]

Thank you! I don't have a whole beginners tutorial yet. The closest thing would be this full build that walks through every part of Lumos. kzbin.info/www/bejne/h2iZeIOrbsR3pKs

[@KevinJSXM]

I'd also watch.

[@HowToDrip]

@@timothyricks lumos newbie video ---> send users to your Webflow Wizard subscription.....ahhhh yeah.

[@Noormohammed_1414]

I am trying to use lumos framework for one of my client and I am finding it a bit confusing using the fluid builder tool!

[@timothyricks]

I’m sorry to hear that! What’s been confusing so far?

[@nkdeus]

Hoooo, that a amazing tools !! good job Remember when we was talking about REM vs EM on messenger, you finnaly understand my point of view about global controller for the fluid UI :D "CQW" work on firefox ?

[@timothyricks]

Thank you! I’m still wouldn’t apply fluid font sizes to the html element, but thanks to Webflow variables, we don’t have to do that anymore. And yes, cqw works in Firefox too. :) caniuse.com/?search=cqw%20unit

[@nkdeus]

@@timothyricks sweet !! yes, global var() and html{ font-size:100% } works like a charm.

[@spencerknisely4272]

Bro. Where do you find the time? Seriously? This is such a nice add-on to Lumos. I guess the question is, why would't ALL websites be designed as fluid? What's the disadvantage?

[@timothyricks]

Thank you! I think it takes a while for people to abandon old practices. Apple's website is still built with px font sizes, and MailChimp's website uses vw for headings. I'm starting to see more developers talk about and use clamp font sizes though. When done right, I believe it can even have accessibility benefits over traditional breakpoint-based font sizes.

[@delaro32]

I started a new project using this method and I am facing an issue. My original design is at 1440px and everything works at that size and below. My issue is that above 1440px, nothing scales up and my design ends up being too small. I tried making the max width bigger with no success. I am used to Wizardry where my design scales up and down from 1440px instead of down only. Any solution for this? As stoked as I am about this new method, not being able to scale the design above the original design size is a deal breaker for me as it looks bad on anything above 1440px :(

[@timothyricks]

Thank you for the feedback! I just added an option to the builder for scaling up above the design width also.

[@delaro32]

@@timothyricks Wow thank you! Can't wait to give it another try!

[@sachinRao15]

Hi Tim, great job but was wondering have you tried this in a real client project cause I'm curious about browsers support especially macOs and iOS :)

[@timothyricks]

Thank you! I haven’t yet, but I’ll likely use this on my next project. Browser support seems solid, and I just added a fallback to the builder for older browsers. Clamp support is 95.94% caniuse.com/?search=clamp()

[@delaro32]

@@timothyricksWhat would be a solution for users on an outdated browser or one that doesn't support the feature? How can we prevent a broken website for these users?

[@timothyricks]

​@@delaro32 Good question! I just added a fallback to the builder to support older browsers. If clamp or cqw aren't supported, it will use regular breakpoint-based sizes based on the min and max sizes we provide instead of being fluid.

[@delaro32]

@@timothyricks You are a legend!

[@muhammadsaad8678]

Min scale is for mobile devices?

[@timothyricks]

Yes, by default it’s set to stop scaling down at 20rem (320px) which is the smallest mobile device we usually see today. But that min scale could be set to stop at any size we’d like.

[@davidfitcher2953]

wait... what?

[@GRNM-ro6hu]

What the F...ONT!