I think I need a walk through video of building a style guide from scratch. Certain things I'm not understanding how they work, or why you do it. For example: 1. Don't understand the purpose of created a variable folder for typography such as "h1, text-main" etc, because "text-main" isn't a style I can then go apply to a paragraph. It seems we have to manually do that, then create a class "u-text-main", so why create this variable folder called "text-main"? I don't understand. (in other words, "text-main" folder is not a saved class so why do that?) 2. How are certain variables receiving their values, such as "container-full" ? In the variable panel (in lumos style guide) I don't see where "full" is getting its value from, or how it's set. There's many of these seemingly basic things that I don't understand and it's making it difficult for me to follow along.
Thank you for trying Lumos! There is a u-text-main class and a class for each heading style. All utility classes start with "u-" in Lumos. The text-main style is also applied to the body tag, and the typography variables are also used inside the u-rich-text class. It's helpful to have all these text styles saved in variables so that updating the style in one place changes everywhere that style is used. The container-full and any variable set to 0px are being defined in the Custom Code component on the page. Those variables use css calc and other styles that aren't supported in the variable panel yet.
Learning lumos right now but tripped up difference between using u- utility class vs the g- global class. Also How can I change the global rich text styling?
Thank you for trying Lumos! Utility classes can be applied to any element and aren't dependent on other classes like "u-weight-bold" or "u-grid-autofit". Global component classes are a grouping of related classes that make up a component when used together. For example, the global clickable component has g_clickable_wrap, g_clickable_link, and g_clickable_button elements inside of it. The "g_" indicates that the classes belong to a global component that can be used inside any section of the site. We apply styling like font size classes to a parent of the global rich text component instead of directly to the component itself. This way the same component can be used in multiple different sizes and styles. The only exception to that would be styling bold or italic words inside the Global Heading component to have a certain color or font family.
Thanks a lot for the video. Considering Lumos right now. The only thing I'm not sure how tit would be handle optimally is a combination of utility-classes and combo classes. Let's say you have a base class with two utility classes but also need a is-reversed combo class. Would you just stack it on top of all utility classes? Or would you remove the utility classes, and then at the combo class again?
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.
Im learning Lumos and would love a video on how you setup components like the Section / Example / Split. How you make and attach properties. Great work by the way. Lumos is how Im building my new website!
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. ua-cam.com/video/HQB6-RhiIlo/v-deo.htmlsi=TC34YDvB1AzAag9M
Hi Tim! Loving Lumos so far but am currently running into an issue with font sizes. They don't seem to update on the actual pages unless I go in and manually change it from the page I'm designing rather than it globally updating from variables.
Hi, I'm sorry you're running into this! Which font sizes aren't updating for you? The heading tags aren't supposed to have any sizes applied by default. They should only get styles when we apply the heading class to them.
@@timothyricks Thanks for the response! My headings don't seem to globally update unfortunately. They update within the style guide but not on my other pages. I think it's an issue with the font size variable because when I change it to a size from the size folder variable, it changes but not from the h2, h3, etc. font size.
Hey Tim, I'm trying Lumos out right now and wondered how would you approach changing button icons using? Would you still need to unlink the button from its main component in order to change it?
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.
Hi, in the page code embed I have some css that replaces the font-weight--100 through 900 variables with unitless values until Webflow supports that natively. So when setting up our typography styles, we can choose any weight variable we need.
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.
Hey Timothy! Really appreciate your work, it's incredible as always! Just a quick question in regards to heading tags within the rich text component. I see H2 is that standard tag, do we adjust these tags throughout our builds based on the order of use for SEO or not worry about changing the tags? For example in our hero would we change this to an H1? Thank you in advance!
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.
Hello! I'm still learning your system and I'm making my first website with it, a portfolio! I remarked a utility class that prevented me from doing a bullet list: u-hide-rich-text-media. It was by default in the Global Paragraph component, why this?
Hi, thank you for trying Lumos! The global paragraph component is only meant to hold paragraph text. If we need a list element, it would be a separate element linked to a different component field so that we can style the elements separately. The u-hide-rich-text-media class hides anything that’s not text inside that element so the client doesn’t accidentally add an image, list, or some other element in places that we only want text to go.
I think I need a walk through video of building a style guide from scratch. Certain things I'm not understanding how they work, or why you do it. For example:
1. Don't understand the purpose of created a variable folder for typography such as "h1, text-main" etc, because "text-main" isn't a style I can then go apply to a paragraph. It seems we have to manually do that, then create a class "u-text-main", so why create this variable folder called "text-main"? I don't understand. (in other words, "text-main" folder is not a saved class so why do that?)
2. How are certain variables receiving their values, such as "container-full" ? In the variable panel (in lumos style guide) I don't see where "full" is getting its value from, or how it's set. There's many of these seemingly basic things that I don't understand and it's making it difficult for me to follow along.
Thank you for trying Lumos! There is a u-text-main class and a class for each heading style. All utility classes start with "u-" in Lumos. The text-main style is also applied to the body tag, and the typography variables are also used inside the u-rich-text class. It's helpful to have all these text styles saved in variables so that updating the style in one place changes everywhere that style is used.
The container-full and any variable set to 0px are being defined in the Custom Code component on the page. Those variables use css calc and other styles that aren't supported in the variable panel yet.
The updated docs are 👌 superb
So glad to hear that! Thank you!
Learning lumos right now but tripped up difference between using u- utility class vs the g- global class. Also How can I change the global rich text styling?
Thank you for trying Lumos! Utility classes can be applied to any element and aren't dependent on other classes like "u-weight-bold" or "u-grid-autofit". Global component classes are a grouping of related classes that make up a component when used together. For example, the global clickable component has g_clickable_wrap, g_clickable_link, and g_clickable_button elements inside of it. The "g_" indicates that the classes belong to a global component that can be used inside any section of the site.
We apply styling like font size classes to a parent of the global rich text component instead of directly to the component itself. This way the same component can be used in multiple different sizes and styles. The only exception to that would be styling bold or italic words inside the Global Heading component to have a certain color or font family.
Thanks a lot for the video. Considering Lumos right now. The only thing I'm not sure how tit would be handle optimally is a combination of utility-classes and combo classes. Let's say you have a base class with two utility classes but also need a is-reversed combo class. Would you just stack it on top of all utility classes? Or would you remove the utility classes, and then at the combo class again?
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 :)
Im learning Lumos and would love a video on how you setup components like the Section / Example / Split. How you make and attach properties. Great work by the way. Lumos is how Im building my new website!
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. ua-cam.com/video/HQB6-RhiIlo/v-deo.htmlsi=TC34YDvB1AzAag9M
Perfect, I will look over the video link. I will let you know when my site is done 😊
Hi Tim! Loving Lumos so far but am currently running into an issue with font sizes. They don't seem to update on the actual pages unless I go in and manually change it from the page I'm designing rather than it globally updating from variables.
Hi, I'm sorry you're running into this! Which font sizes aren't updating for you? The heading tags aren't supposed to have any sizes applied by default. They should only get styles when we apply the heading class to them.
@@timothyricks Thanks for the response! My headings don't seem to globally update unfortunately. They update within the style guide but not on my other pages. I think it's an issue with the font size variable because when I change it to a size from the size folder variable, it changes but not from the h2, h3, etc. font size.
Hey Tim, I'm trying Lumos out right now and wondered how would you approach changing button icons using? Would you still need to unlink the button from its main component in order to change it?
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 🔥
Hi Timothy! Do you explain somewhere how you linked your text weights to variables with custom value?
Hi, in the page code embed I have some css that replaces the font-weight--100 through 900 variables with unitless values until Webflow supports that natively. So when setting up our typography styles, we can choose any weight variable we need.
@@timothyricks thanks for your answer it's very sweet!
Hi Tim, if i've used the fluid builder then make individual changes in WF will the font maintain scalability? (ANSWERED AT 9:38)
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 :)
Hey Timothy! Really appreciate your work, it's incredible as always!
Just a quick question in regards to heading tags within the rich text component. I see H2 is that standard tag, do we adjust these tags throughout our builds based on the order of use for SEO or not worry about changing the tags?
For example in our hero would we change this to an H1? Thank you in advance!
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
Hello! I'm still learning your system and I'm making my first website with it, a portfolio! I remarked a utility class that prevented me from doing a bullet list: u-hide-rich-text-media. It was by default in the Global Paragraph component, why this?
Hi, thank you for trying Lumos! The global paragraph component is only meant to hold paragraph text. If we need a list element, it would be a separate element linked to a different component field so that we can style the elements separately. The u-hide-rich-text-media class hides anything that’s not text inside that element so the client doesn’t accidentally add an image, list, or some other element in places that we only want text to go.
Thank you, it is helpful to understand what you meant.