This highlights the shortcomings of current variants. Because this is exactly what we want to do. The variants should have a bubble-up property, and not require re-bind or the bonus slots.
Totally! There are many places though where I wouldn’t want props to bubble up. Maybe they could bubble up by default but also give us an option to opt out of that behavior for any field. The biggest inefficiency highlighted here is that we can’t have multiple variants on a single component.
Thanks Tim! I noticed you apply the flex directly instead of using utilities, was that for this video or would you do that in a project as well? Is Lumos updated for the variants already? I haven't updated my version in a while.
Hi Ethan, I wasn't using Lumos in this video. The flex utilities can help keep the css lighter but aren't required. The latest Lumos version uses Webflow's new unitless variables for things like font weight and line height, but I haven't included any variants in it by default. For now, those can be added as needed on a case by case basis. github.com/lumosframework/lumos-v2/releases/tag/v2.0.6
Thank you! Here's an example with variants applied to the whole section. It follows the same process as the button by using extra child components to control things like layout. preview.webflow.com/preview/component-variant-tricks-84570c3cbacfa9?preview=f07c5e53c484dc4a2ff403c58ea0c12e&workflow=preview
Thank you! I haven't included this by default since not every project needs multiple sizes of buttons or button layouts. To keep the base cloneable light, this feature can be added in as needed.
@@timothyricks Does this mean it’s better to manage button colors using CSS rather than relying on Webflow’s new functionality for components, to keep the cloneable style guide lightweight? I understand that creating multiple components for elements like buttons, layouts, and colors could make the page heavier. What’s your take on balancing this trade-off?
@@andresochoa3040 In most cases, using Webflow's native variant feature is worth the performance trade offs of heavier css and html because it makes the website easier for the client and future developers to manage. I'm also hoping for future updates from Webflow to reduce some of these limitations. I'm still trying to figure out myself which trade-offs are and aren't worth it because switching to native variants instead of attributes removes all global reusability from our styles.
Hi Tim, great video, thanks for everything you're doing. I have a question regarding the Lumos Nav component. Do you have any idea how we can create a link from the dropdown toggle, similar to the one on the Apple website? When hovering over it, we want it to act like a link block that can be clicked, while still opening the dropdown. If I explained this correctly, on mobile devices, the dropdown would be open by default.
Thank you! We can just add a link inside the dropdown toggle and then use an attribute to open the dropdown content on mobile. Here's an example. preview.webflow.com/preview/lumos-nav-with-link-in-dropdown-toggle?preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview
Man I'm just begging Webflow to make child component properties have an option to show if they are nested in a different component hahaha. I hate having to link things multiple times
⚠PSA: fix to turn these fake buttons into actual link blocks that have a slot inside for icons (Webflow won't allow you to add slots inside links): 1. just follow this video, but at the end, go into the top-level component called "Button" and edit it 2. select the top-level 'button_wrap' div 3. right-click it > Convert to > Link Block (or use CMD/CTRL+E and type 'convert to link block' 4.go into the settings of the component and map the new "Link" setting to a prop on the Button Component. 5. Profit! 🎉 The reason why he's not using a link block from the start is that WebFlow doesn't allow you to add slots inside of Links or Buttons. Thanks Mr. Ricks, for another amazing tutorial! ❤
Thank you! I don't turn the button_wrap into a link because we need to use a link tag if it goes to a new page but use a button tag if it opens a modal or triggers an interaction. To make the component work with both tag types, I use an absolute link and button tag inside of the wrap like shown in this tutorial. ua-cam.com/video/nSIBLGHAXsU/v-deo.html
Somehow you read my mind every time a new feature gets released 😍
Thanks so much, Skylar! I'm really glad this helps!
@@timothyricks How would you control the Visibility of the Icon slot if you don't want an Icon?
@@WoodwardOge We would just need a visibility prop on the icon slot inside the layout component. I added that to the cloneable.
timothy rocks 🤘🏻
So cool! Webflow is becoming so powerful, it's beyond me how far they've come! Great great video Tim, I love learning about variants! Thanks a lot!
Thank you! It's really exciting to see how Webflow is evolving!
This highlights the shortcomings of current variants.
Because this is exactly what we want to do.
The variants should have a bubble-up property, and not require re-bind or the bonus slots.
Totally! There are many places though where I wouldn’t want props to bubble up. Maybe they could bubble up by default but also give us an option to opt out of that behavior for any field. The biggest inefficiency highlighted here is that we can’t have multiple variants on a single component.
Thanks Tim! I noticed you apply the flex directly instead of using utilities, was that for this video or would you do that in a project as well? Is Lumos updated for the variants already? I haven't updated my version in a while.
Hi Ethan, I wasn't using Lumos in this video. The flex utilities can help keep the css lighter but aren't required. The latest Lumos version uses Webflow's new unitless variables for things like font weight and line height, but I haven't included any variants in it by default. For now, those can be added as needed on a case by case basis. github.com/lumosframework/lumos-v2/releases/tag/v2.0.6
Thank you Timothy!
Thanks, awesome as always!
Would love to see how nested variants could be handled with whole sections
Thank you! Here's an example with variants applied to the whole section. It follows the same process as the button by using extra child components to control things like layout. preview.webflow.com/preview/component-variant-tricks-84570c3cbacfa9?preview=f07c5e53c484dc4a2ff403c58ea0c12e&workflow=preview
Wow! this is great! Are you planning to add this new future to your lumos styleguide?
Thank you! I haven't included this by default since not every project needs multiple sizes of buttons or button layouts. To keep the base cloneable light, this feature can be added in as needed.
@@timothyricks Does this mean it’s better to manage button colors using CSS rather than relying on Webflow’s new functionality for components, to keep the cloneable style guide lightweight? I understand that creating multiple components for elements like buttons, layouts, and colors could make the page heavier. What’s your take on balancing this trade-off?
@@andresochoa3040 In most cases, using Webflow's native variant feature is worth the performance trade offs of heavier css and html because it makes the website easier for the client and future developers to manage. I'm also hoping for future updates from Webflow to reduce some of these limitations. I'm still trying to figure out myself which trade-offs are and aren't worth it because switching to native variants instead of attributes removes all global reusability from our styles.
Just one thing I ran into with Webflow Variants. You can't use separate interactions for each Variant
Good point! We can create custom CSS or GSAP interactions for each variant, but it's not possible with native interactions currently.
Hi Tim, great video, thanks for everything you're doing.
I have a question regarding the Lumos Nav component. Do you have any idea how we can create a link from the dropdown toggle, similar to the one on the Apple website? When hovering over it, we want it to act like a link block that can be clicked, while still opening the dropdown. If I explained this correctly, on mobile devices, the dropdown would be open by default.
Thank you! We can just add a link inside the dropdown toggle and then use an attribute to open the dropdown content on mobile. Here's an example. preview.webflow.com/preview/lumos-nav-with-link-in-dropdown-toggle?preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview
Can you make a video on how to create an SEO-friendly accordion FAQ?
Brilliant
I call you Nikola Tesla from Webflow🙌
Man I'm just begging Webflow to make child component properties have an option to show if they are nested in a different component hahaha. I hate having to link things multiple times
⚠PSA: fix to turn these fake buttons into actual link blocks that have a slot inside for icons (Webflow won't allow you to add slots inside links):
1. just follow this video, but at the end, go into the top-level component called "Button" and edit it
2. select the top-level 'button_wrap' div
3. right-click it > Convert to > Link Block (or use CMD/CTRL+E and type 'convert to link block'
4.go into the settings of the component and map the new "Link" setting to a prop on the Button Component.
5. Profit! 🎉
The reason why he's not using a link block from the start is that WebFlow doesn't allow you to add slots inside of Links or Buttons.
Thanks Mr. Ricks, for another amazing tutorial! ❤
Thank you! I don't turn the button_wrap into a link because we need to use a link tag if it goes to a new page but use a button tag if it opens a modal or triggers an interaction. To make the component work with both tag types, I use an absolute link and button tag inside of the wrap like shown in this tutorial. ua-cam.com/video/nSIBLGHAXsU/v-deo.html