Lumos Class Naming | Webflow Framework

Get the Lumos Cloneable (affiliate link)
webflow.grsm.io/tricks?path=l...
Lumos Docs
lumos.timothyricks.com/
Join my Webflow Wizards Community
/ timothyricks
00:00 - Component Classes
02:16 - Child Component Classes
04:23 - Global Component Classes
04:54 - Utility Classes
06:46 - Renaming Utility Classes
07:36 - Class Already Exist
07:49 - Utility Overrides
08:58 - Combo Classes
10:03 - Linking Combo Classes To Component Fields

[@austinandriese]

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]

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

[@reymiahthesun]

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

[@jessehebert8082]

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

[@shahriarpahlevan1831]

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

[@timothyricks]

Thanks so much! I’m glad to hear that

[@nkdeus]

This is just perfect and logic -)

[@timothyricks]

Thank you!

[@bjarnithors]

Thank you!!! This video explains so much

[@timothyricks]

I’m so glad this helps!!

[@kerber19]

Loooove this!

[@user-hj5id7xp7b]

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]

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]

@@timothyricks Thank you!

[@STalvacchia]

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]

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]

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

[@timothyricks]

Thank you so much!

[@Raul-jq7pq]

How is lumos better than BEM?

[@timothyricks]

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.