Applying overrides on base classes is going to make life so much easier 😭🔑

Starting my first Lumos build today, this is super sweet stuff man. Thanks for all the work you put into this for the community.

@timothyricks

13 күн бұрын

Oh, awesome! Thank you, Austin! Please keep me posted on how it goes. :)

Incredible, I'd been waiting for this one! Explained perfectly

@timothyricks

25 күн бұрын

Thanks so much! I’m glad to hear that

This is just perfect and logic -)

@timothyricks

26 күн бұрын

Thank you!

Timothy Ricks doing the Lebron James stuff again. Classical as always. 👏👏👏

Loooove this!

Thank you!!! This video explains so much

@timothyricks

25 күн бұрын

I’m so glad this helps!!

Timothy, thank you for such quality content and framework! I'd love to see how you use classes on multi-page sites. Are there any specifics in this case?

@timothyricks

25 күн бұрын

I’m so glad this helps! For multi-page sites, there’s no extra naming guidelines. Since any component can be used on any page, we don’t include page names in the class name. The naming guidelines in this lesson ensure we can globally update the style of any element especially when it’s used across multiple pages. Occasionally, we’ll need to override styles from page to page for specific instances of a component. Like tightening the hero’s text max width based on the amount of text used on that page. Or reducing the bottom section padding based on if there’s a light or dark section below it. Those page-specific tweaks are managed from attributes so they can be adjusted from component fields and work independently from the class name.

@user-hj5id7xp7b

25 күн бұрын

@@timothyricks Thank you!

I've been a bit confused with how to handle icons. Coming from Figma, my instinct is to make each icon a component itself. But that doesn't seem like the best way to handle it. Is it to load all of them up as assets, and then use unique classes to handle the size and any other styling that will come with the applications of those assets?

@timothyricks

25 күн бұрын

First, I use the SVG Import App for Webflow to import icons. It sets the icons color to inherit from their parent’s font color by default. It also allows us to link their stroke width to variables. I turn each icon into a component. For example if we need to change the arrow icon used throughout our whole site, we only have to edit one component. In the components panel, I name it "Icon / Arrow" so if we search quick find for "Icon / ", we’ll see every possible icon we can use on our site. The size and color should be applied to a parent div of the icon component so we can use the same component at multiple sizes and colors.

@STalvacchia

25 күн бұрын

@@timothyricks awesome! Thanks Timothy, you’re making really incredibly helpful and well made videos/resources!

@timothyricks

25 күн бұрын

Thank you so much!

Hey Tim, just to be sure.. I used to make my container this way with classes.. .container .flex v stretch .gap 2rem So this is better solution right? For exapmle: .wrapper .container .flex v stretch .gap 3 rem So I have class wrapper in front of container and the rest is same ?

@timothyricks

12 сағат бұрын

Hi, yes but instead of the .wrapper class, we would use .hero_contain, .footer_contain, .cta_contain or something similar. By giving each section and container a unique name, we can apply any style on any breakpoint even if there’s not a utility for it.

How is lumos better than BEM?

@timothyricks

18 күн бұрын

Hi, BEM is a class naming convention for custom classes and combo classes. It doesn’t specify naming of utility classes. Class naming is just one part of Lumos, and it’s based on some BEM principles but adapted specifically for Webflow. For example, this is what a custom class and combo class looks like in BEM, class="form__submit form__submit--disabled". And this is what the same classes look like in Lumos, class="form_submit is-disabled". In the Webflow class selector field, longer class names get cropped where we can’t read the whole thing. So it’s important not to waste any space with double dashes or double underscores. And repeating the full element name in each combo class would mean we’d rarely see the most important part, the last word. For custom code developers, longer combo classes make more sense, because they style only the combo class with custom css, not the combination of the two classes. .form__submit--disabled { opacity: 0.5; } In Webflow though, combo classes and custom classes are styled as a combined selector, making the extra words in the combo class redundant. .form_submit.is-disabled { opacity: 0.5; } Lumos offers some additional guidelines around child component classes and global component classes that helps for more complex components as the site grows.