Видео

Hi, did you hit enter after removing the last word? If so and it's still showing the error, then the class might actually already exist as a combo class on that element. That happens if we accidentally remove a utility and add a different one instead of renaming the original utility. Clearing unused classes can solve it if the class isn't used anywhere else.

Oh, good question! When component slots are released, this will be much easier. But in the mean time, we would need to have every icon option already inside the component and just show / hide the icons we need by using component fields.

@@timothyricks That's what I've been doing! Glad to know haha keep up the amazing content 🔥

Thank you! I try to apply overrides to the base class when possible. It still overrides the utility styles since the base class was created after the utilities. Most utilities will never be removed though, only renamed, like .hero_contain.u-container, .footer_subheading.u-text-h6, or .blog_cms_list.u-grid-column-3 for example. Even if a utility did need to be removed, we could rename it to a combo class instead like "is-something". It would keep its overrides and lose its utility styles.

@@timothyricks love it. Thanks, highly appreciate your detailed responses :)

Oh, good question! What I usually do is create the combo class directly on top of the component class so .hero_layout.is-reversed and then I move "is-reversed" to a class attribute so it can be linked to a component field and continue stacking utilities directly on top of the component class. If the combo class was created on top of the utility classes, it would still work when the utilities get renamed so that method is fine also, but creating the combo on the component class results in cleaner code.

@@timothyricks Thanks for the detailed response :)

Welcome back! Thank you for watching!

Thanks so much! After this video, Figma released typography variables natively. So all the typography styles are now saved in the right panel under styles and in the variable panel.

@@timothyricks Legend, thanks so much - that makes a lot of sense now 😅

Oh, good question! When we apply a style to any class, Webflow adds that class and its styles to our css file. And it runs that css file on every page. So even if a page doesn’t have the .about_img on it, it still has to load the styles created for that about_img. So instead of this… .hero_img { border-radius: 0.5rem; } .about_img { border-radius: 0.5rem; } .contact_img { border-radius: 0.5rem; } We can create one class and use it across all of those images. So we have one line of css instead of three. The larger a site becomes, the more lines of code this can save. It’s especially helpful for utilities that apply a lot of styles instead of a single style. .u-radius-small { border-radius: 0.5rem; }

@@timothyricks Makes sense. Lumos has been a blessing to me. Thanks for all you do for the community. I'm constantly rooting for you. ✨

@@reymiahthesun Thank you so much!!

Thanks so much for the kind words! Will do!

Thanks so much for the helpful feedback! Are there any topics specifically you feel could use more course coverage?

Yay! Glad to hear that!

Haha, thanks so much!! Glad to hear that

@@timothyricks It should've been us who thank youu for making this neat system! Btw, I notice, now you have 2 way of managing responsiveness, 1st is the adaptive, and 2nd is the Fluid. Which one of these 2 that you're often use? and why? Sorry for asking too much lol! Thanks again sir Tim!

@@bamoj I love the questions! I use fluid now because it makes the sizes between breakpoints look better. Like right before the tablet breakpoint, things don’t look as cramped with fluid enabled. Fluid is also a better experience for people who use zoom because the font size consistently gets larger with each zoom. With adaptive sizes, zooming in can actually make the font size smaller when the zoom crosses between a breakpoint, and then the user has to keep zooming to bring it back up.

@@timothyricks Ah that make perfect sense, I feel like Fluid is better too. Thank you so much for such detailed answer!

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

I like to use the SVG Import App for Webflow. It sets fills and strokes to currentColor so they respect both light and dark mode automatically.

So glad this helps! The dense button is still there. It just looks different now. It’s the third, final button under "Direction" in the style panel.

Thank you for the feedback!

Thank you!

Hi, great question! In the latest version, there’s already a u-grid-column-3 class by default. So instead of duplicating the u-grid-custom, we can just use or edit the 3 column grid that already exists. The new var(--grid-3) and other grid variables make the settings easier to recall when adjusting the grid across breakpoints, they create slightly less code than referencing the full repeat function each time, and in the rare instance that we’d want to globally update the repeat function across all grids, it gives that flexibility.

Thank you so much! Yes, H2 is the default heading, but we can change that tag per instance without unlinking the component. We just need to open the component rich text, select over the text, and then all the tag options appear in the rich text block. Usually we would use H1 for the first heading on the page.

@@timothyricks amazing, thank you. I will be subbing to your Patreon over the next couple of weeks - your content is gold.

​@@Itslogicee Glad to help! Oh, thank you! I hope to see you in the Discord chats

My pleasure!! Glad you enjoyed it!

Hi, to make an individual change to something like the display heading’s font size while still keeping it fluid, that change would need to be made inside the fluid builder. It could handled like the --padding-horizontal--main variable is handled in the builder where we apply a custom desktop and mobile size.

@@timothyricks good morning and thanks. Making changes now :)

Oh, cool! Glad it was helpful!

Thanks so much! Sounds good!

So glad to hear that! Thank you!

Oh, awesome! So glad this helps! The breakpoint grid utilities are newer additions.

Thank you! For the flex class, we could copy the div that holds them on the style guide page and paste them into any project. This is part of a larger framework I created called Lumos so it’s better to start a new project by cloning the whole framework when possible so that the variables and components transfer over also. webflow.grsm.io/tricks?path=lumos-v2-beta

@@timothyricks thank you so much for your reply will look into it!

Haha, thank you!

I still use data attributes for theme and section padding. If we tried to use section padding with the class attribute, we would likely need two classes in one component field which isn't very user friendly. class="padding-top-small padding-bottom-large" We can only apply the class attribute once per element, so I like to keep that attribute freed up for adjusting multiple elements from one field like the "is-reversed" example in this tutorial.

@@timothyricks That makes total sense. Thank you for the reply Tim!

Glad to help! Thank you for asking!

Thank you! Great suggestion. An updated components video would definitely be helpful. Now that Webflow allows us to duplicate components, we don’t have to setup the fields from scratch each time. For that specific component though, this video might help. It explains how the class attribute works with components. ruclips.net/video/HQB6-RhiIlo/видео.htmlsi=TC34YDvB1AzAag9M

Perfect, I will look over the video link. I will let you know when my site is done 😊