Webflow Hack: Unlock Multiple Variants With Nested Components

Поділитися
Вставка
  • Опубліковано 5 гру 2024

КОМЕНТАРІ • 30

  • @skylartkitchen
    @skylartkitchen День тому +4

    Somehow you read my mind every time a new feature gets released 😍

    • @timothyricks
      @timothyricks  День тому

      Thanks so much, Skylar! I'm really glad this helps!

    • @WoodwardOge
      @WoodwardOge День тому

      @@timothyricks How would you control the Visibility of the Icon slot if you don't want an Icon?

    • @timothyricks
      @timothyricks  20 годин тому +2

      @@WoodwardOge We would just need a visibility prop on the icon slot inside the layout component. I added that to the cloneable.

    • @WoodwardOge
      @WoodwardOge 6 хвилин тому

      @@timothyricks Might want to add LINK prop to the cloneable as well.

  • @rickbossenbroek
    @rickbossenbroek 20 годин тому +2

    timothy rocks 🤘🏻

  • @vladimirpetroski7089
    @vladimirpetroski7089 День тому +1

    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!

    • @timothyricks
      @timothyricks  День тому

      Thank you! It's really exciting to see how Webflow is evolving!

  • @johanvanwambeke723
    @johanvanwambeke723 23 години тому

    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.

    • @timothyricks
      @timothyricks  23 години тому +1

      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.

  • @EthanSuero
    @EthanSuero День тому +1

    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.

    • @timothyricks
      @timothyricks  День тому

      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

  • @jelenajovanovic1472
    @jelenajovanovic1472 День тому +2

    Thank you Timothy!

  • @nazone4492
    @nazone4492 День тому +1

    Thanks, awesome as always!
    Would love to see how nested variants could be handled with whole sections

    • @timothyricks
      @timothyricks  День тому

      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

  • @andresochoa3040
    @andresochoa3040 День тому +3

    Wow! this is great! Are you planning to add this new future to your lumos styleguide?

    • @timothyricks
      @timothyricks  День тому +1

      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.

    • @andresochoa3040
      @andresochoa3040 День тому

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

    • @timothyricks
      @timothyricks  День тому

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

  • @allblue1120
    @allblue1120 День тому +4

    Just one thing I ran into with Webflow Variants. You can't use separate interactions for each Variant

    • @timothyricks
      @timothyricks  День тому

      Good point! We can create custom CSS or GSAP interactions for each variant, but it's not possible with native interactions currently.

  • @Infernus-n1z
    @Infernus-n1z День тому

    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.

    • @timothyricks
      @timothyricks  День тому

      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

  • @Hamdouche.M
    @Hamdouche.M День тому

    Can you make a video on how to create an SEO-friendly accordion FAQ?

  • @daniel_q40
    @daniel_q40 День тому +1

    Brilliant

  • @GermanLazarev
    @GermanLazarev День тому +1

    I call you Nikola Tesla from Webflow🙌

  • @NoahShreve
    @NoahShreve 11 годин тому

    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

  • @oviSavescu
    @oviSavescu День тому

    EDIT: Nevevermind, Mr. Ricks has a much better solution (see his reply to this post. Leaving here for posterity:)
    Original Comment:
    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! ❤

    • @timothyricks
      @timothyricks  День тому +1

      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

    • @oviSavescu
      @oviSavescu Годину тому

      @@timothyricks I actually was thinking about a similar solution, but for some reason I brain-farted into thinking it wouldn't work because it would break the hover state (which of course it wouldn't, since it's a child). I watched the video about the accessible links on cards, it's pure genius. You are bringing more value than the rest of the webflow "gurus" put together. I just subscribed on Patreon ❤.