Noob here. Question, I thought the purpose of overrides was to make unique changes to combo classes without affecting other components of the same class. Wouldn't applying overrides to the base class affect all comments that are using that same base class? Am I misunderstanding the purpose?
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?
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.
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 ?
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.
Hi Timothy, I hope you are well, I wanted to ask you about a problem I have. This happens to me in almost all Webflow projects. When I add 3rd party fonts that are not from Google, the fonts when the website loads flicker or take a few milliseconds to load, then it looks like they flicker (Flash of Unstyled Text/Content (FOUC) e.g.: font loading), I have not been able to fix it, thank you very much in advance. By the way, this is not happening to me in Lumos, it happens to me in Webflow
Hi Sebastian, the un-styled font keeps the text readable while the real font is loading in. This is especially important for people on slower connections. Uploading the fonts directly to Webflow can help a lot if they're not already.
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?
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.
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.
![The ULTIMATE SwiperJS Guide [2024 Webflow]](/img/n.gif)
Starting my first Lumos build today, this is super sweet stuff man. Thanks for all the work you put into this for the community.
Oh, awesome! Thank you, Austin! Please keep me posted on how it goes. :)
Applying overrides on base classes is going to make life so much easier 😭🔑
Noob here. Question, I thought the purpose of overrides was to make unique changes to combo classes without affecting other components of the same class. Wouldn't applying overrides to the base class affect all comments that are using that same base class? Am I misunderstanding the purpose?
Incredible, I'd been waiting for this one! Explained perfectly
Thanks so much! I’m glad to hear that
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?
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.
@@timothyricks Thank you!
Timothy Ricks doing the Lebron James stuff again. Classical as always. 👏👏👏
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 ?
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.
This is just perfect and logic -)
Thank you!
Hi Timothy, I hope you are well, I wanted to ask you about a problem I have.
This happens to me in almost all Webflow projects.
When I add 3rd party fonts that are not from Google, the fonts when the website loads flicker or take a few milliseconds to load, then it looks like they flicker (Flash of Unstyled Text/Content (FOUC) e.g.: font loading), I have not been able to fix it, thank you very much in advance.
By the way, this is not happening to me in Lumos, it happens to me in Webflow
Hi Sebastian, the un-styled font keeps the text readable while the real font is loading in. This is especially important for people on slower connections. Uploading the fonts directly to Webflow can help a lot if they're not already.
@@timothyricks thanks timothy
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?
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.
@@timothyricks awesome! Thanks Timothy, you’re making really incredibly helpful and well made videos/resources!
Thank you so much!
Thank you!!! This video explains so much
I’m so glad this helps!!
Loooove this!
How is lumos better than BEM?
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.