Webflow Hack: Unlock Multiple Variants With Nested Components

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

КОМЕНТАРІ • 31

  • @skylartkitchen
    @skylartkitchen 5 днів тому +5

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

    • @timothyricks
      @timothyricks  4 дні тому

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

    • @WoodwardOge
      @WoodwardOge 4 дні тому

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

    • @timothyricks
      @timothyricks  4 дні тому +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 3 дні тому

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

    • @WoodwardOge
      @WoodwardOge 3 дні тому

      @@timothyricks You might want to add a LINK prop to the cloneable as well. :)

  • @jelenajovanovic1472
    @jelenajovanovic1472 5 днів тому +2

    Thank you Timothy!

  • @vladimirpetroski7089
    @vladimirpetroski7089 5 днів тому +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  4 дні тому

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

  • @rickbossenbroek
    @rickbossenbroek 4 дні тому +2

    timothy rocks 🤘🏻

  • @nazone4492
    @nazone4492 5 днів тому +1

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

    • @timothyricks
      @timothyricks  4 дні тому

      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

  • @johanvanwambeke723
    @johanvanwambeke723 4 дні тому

    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  4 дні тому +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 4 дні тому +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  4 дні тому

      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

  • @andresochoa3040
    @andresochoa3040 5 днів тому +3

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

    • @timothyricks
      @timothyricks  4 дні тому +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 4 дні тому

      @@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  4 дні тому

      @@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 5 днів тому +4

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

    • @timothyricks
      @timothyricks  4 дні тому

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

  • @GermanLazarev
    @GermanLazarev 5 днів тому +1

    I call you Nikola Tesla from Webflow🙌

  • @Infernus-n1z
    @Infernus-n1z 5 днів тому

    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  4 дні тому

      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

  • @daniel_q40
    @daniel_q40 5 днів тому +1

    Brilliant

  • @Hamdouche.M
    @Hamdouche.M 5 днів тому

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

  • @NoahShreve
    @NoahShreve 4 дні тому

    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 5 днів тому

    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  4 дні тому +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 3 дні тому

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