Webflow’s New Custom CSS Properties 🤯

Get the cloneable for this project (affiliate link)
webflow.grsm.i...
Check browser support at
caniuse.com/
ClipPath Visualizer at
bennettfeely.c...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...

[@ajhoyhoy]

Hi Timothy, great video, do you have a video to learn more about cqw properties? What was significant about 24.9 cqw for the hero heading? If I had a Figma design with a font size set how would I translate that to cqw so it matches my design? Thank you

[@timothyricks]

Thank you! CQW works similar to VW, but it's based on the size of a parent container instead of the entire screen size. So a width: 10cqw; would be 10% of the width of its parent container. From a figma design, we could do heading font size divided by heading width times 100 to get the cqw unit. Example: 300 / 1227 * 100 = 24.44cqw Kevin Powell has a great video also on cqw. kzbin.info/www/bejne/kITEcnuYasmFrbM

Wow, I just saw the notification and your video is already out! Thanks, Tim!

[@Itslogicee]

This update is next level. Looking forward to seeing what wizardry you come up with this update!

[@jansleyreal]

I didn't realize they added this, thanks for sharing this!

[@timothyricks]

Glad to share! This is one of Webflow’s biggest updates

[@dimka_tregubov]

Does this mean that there will be an update for Lumos soon?😌

[@timothyricks]

Yes, Lumos v2.0.1 is coming soon. I've already started updating the cloneable to move a lot of custom code out of the embeds. I should be able to wrap up the updates soon

[@Directorkf]

If i'm currenly working on a site using 2.0, what is the best way to go about trying to get the updated version? @@timothyricks You're the best

[@timothyricks]

@@Directorkf The changelog will show the updates line by line as soon as it's released. The updates won't change the way Lumos works. It's just moving code from the embeds to the style panel. github.com/lumosframework/lumos-v2/releases

[@zeminem35]

@@timothyrickswhat is the difference in moving css from the embeds to the new native properties, could you elaborate a bit more on that?

[@timothyricks]

@@zeminem35 There's no functional difference. We're just not using custom code as much now. Example: this custom code can be moved to the all H1 tag in Webflow now. h1 { font-weight: var(--h1--font-weight); text-transform: var(--h1--text-transform); }

[@webflowandcode]

From a content creator perspective this is an epic tutorial. Showing the feature but using really creative examples. Well done dude!

[@timothyricks]

Thanks so much! Your video on this is really great also

[@timdaff]

Some epic use cases for an awesome release!

[@artworthi]

dude Timothy wishing you all the success - these are amazing tips. I am using the process you created for some other no Code apps because your approach is so scaleable!

[@timothyricks]

Oh, awesome! Thank you! It’s really cool to hear this is helping across platforms

[@edjejimi]

You're my best reference ! Good job

[@HORDERARII]

Thanks Tim for this explanation.

[@carltongordon]

Webflow has peaked

[@lifipp]

Amazing Webflow content as always Timothy! Do you know if the custom CSS properties also support CSS animations?

[@kylepitocchelli1738]

So fast! Love this and can't wait to see a deeper dive from you! Thanks Tim!

[@PlayerParticle]

This is great! Thank you, Tim :)

[@timothyricks]

So glad this helps! Thank you for watching

[@pawewroblewski4624]

Great work , thx Tim

[@DANNFIGDESIGNS]

🥳🎉👏🙏🏼 It’s all moving so fast!

[@wwxstackdeveloper]

I appreciate the video and the work that you do providing wisdom with the community.

[@timothyricks]

Thank you so much!

[@Vimalanvijay]

You sir are a legend!

[@divonci-world]

Timothy Ricks at it again boys!! Idk about you lot but I level up after each video and tbh I actually saw myself as a webflow expert ERM NO not when Timmys about hahah! Besides liking, commenting and subscribing how else can we support the big dawg man like HOMERTON T?

[@hadiaslam7801]

I think you know custom properties better then the guys who build this👏

[@Anhtaihuman1]

I wouldn’t be surprised!!! 😁

[@tomascech6772]

Thanks Timothy for letting us know and being so DAMN cute at the same time! Love the update.

[@spencerknisely4272]

This is really great. This new Webflow capability is really requiring some brain cycles to understand the possibilities and how this changes the application of some frameworks like LumosV2. One question I have is about how Webflow is implementing these properties. Are they inline in the HTML element or are these properties being added to the class and included in the stylesheet? I'm not clear on that. Also, you mention at the end of the video that there are some properties to set on each project and to watch a vid for tips on that. I just don't see a link to that vid? Great work as always T.Ricks.

[@timothyricks]

Thank you, Spencer! Webflow's adding these styles in the stylesheet attached to the class. They're not inline styles. Also, here's the video on the top default styles to set in Webflow. kzbin.info/www/bejne/mJ2pmGCpgM1gpM0

[@jdanielortega]

Hi Tim, awesome content as always. Do you know where can we get a list of all the possibilities?

[@timothyricks]

Thank you! The Mozilla docs have a list of all the properties we can use. I believe that list is also displayed in webflow’s style panel under the custom property dropdown. New css properties are just one piece of this. We can also set new values now on properties that we’ve always had in Webflow like display, overflow, color, and more. The values are nearly countless so it’s hard to list them all. developer.mozilla.org/en-US/docs/Web/CSS

[@jdanielortega]

@@timothyricks Thank you very much, keep rocking!

[@MichaelJohnBurns]

Good morning Tim. Thanks for always sharing your knowledge. Appreciate it a lot!

[@timothyricks]

Thanks so much, Michael!

[@patrickvg298]

We cannot create a custom variable with, for example, 'clamp' in the variable panel, but we can do so in the designer. It would be great if this functionality could also be available there.

[@timothyricks]

For sure! Variable values are somewhat limited right now unless we override them with custom code. Hopefully Webflow continues to add support for more values

[@patrickclough1685]

Always awesome content!

[@Bars_Sl]

Doesn't Webflow add "will-change" by itself? I often saw this property on animated elements.

[@timothyricks]

Webflow only adds it once the animation starts which doesn't give the browser much time to prepare for the animation. Applying it by default can make animation smoother, but I'd only add the style to problematic elements.

[@badboujee]

banger video, as per usual.

[@plushcad]

As always very informative.

[@yash7630]

Amazing as always

[@nickdemore1697]

In regards to 1:26: wouldn't using the font size units as a % or rem do the same thing?

[@timothyricks]

Good question! It isn’t the same thing. REM is usually based on the browser default font size (16px) so it’s not fluid. Even if we changed the html font size to include viewport width (VW), it wouldn’t be the same because VW is based on the width of the browser while CQW is based on the width of the container. Using % for font size means it’s based on the font size of its parent, not the width of its parent. So if the parent had a font size of 16px, a child with a font size of 200% would be equal to a 32px font size, which also isn’t fluid.

[@marcusfrancis24]

Incredible!

[@danielapro9755]

Yaaayy!!! 🔥

[@Muzamalhussain155]

Great

[@artytc]

game changer!

[@oggvorbiis]

Great video as always, Tim! Is that correct that not all CSS properties are supported? After watching Kevin Powell's video today, I went on to try background-repeat, but it was not to be found in the list. :(

[@timothyricks]

Thank you! Yes, Webflow's still working on support for some properties that were problematic for them like background.

[@hal-zeitlin]

Hug

[@blender_tom]

Not related to the topic, but more about your videos. How do you achieve mouse click effect, where every time you click the course scales down a bit.

[@timothyricks]

I use an app called Screen Studio. It’s super smooth and user friendly. www.screen.studio

[@brainybitesOfficial035]

It's amazing

[@MrNissii]

You can remove all your custom CSS tutorials now...

[@timothyricks]

Not quite! There’s still a lot that can’t be done natively, but this is a great step in the right direction