Dudee...at this point, you're just reading our mind. I literally searched for this at the beginning of this week. Recently learning to use Lumos. Got a project where someone wanted me to help with adjusting his website responsiveness, spacing consistency and all. Decided to go through a more complex route of using this opportunity to learn Lumos framework. After using the FAQ section of your website to find out how to do it, I realised I'll need to use a cut and copy app to import variables but I'll still need to create the components manually. Though I could copy the components over but it would be detached and I'll have to manually configure it back. It was a tasking procedure at the beginning but I've started getting the groove of the framework and I'm experiencing the blessings of it. Though there are still areas that I'm not fully clear on, I'm getting a better understanding by directly using it in a project
This is so great to hear! Thank you for trying Lumos! I'm glad that this process is much easier now. Hopefully by rebuilding some of those components before though, it gave you a greater understanding of how everything works.
@@timothyricks yes, thanks a lot. It gave me a greater understanding of components in general and with the way it works in Lumos. You've been a great help in the Webflow community.
Hey Timothy, just wondering if you could create a guide for upgrading from an older version of Lumos to a newer one. I am trying to import all 2.05 variable changes (specifically u-block-gap), style guide changes and custom code changes without overriding my current variables and breaking parts of the site. Is this possible? I am struggling to track changes and see what I need to update when brining over new variables. A bunch of my heading font-sizes seem broken, but I have no idea how to fix them.
A few weeks ago I converted an old site manually... it was tedious and borderline maddening, but I learned a ton about Lumos and saved $42 I guess so there's that haha. Thanks for sharing this!
@@zeminem35 In the video, Timothy shares that you can pay for a month of the higher tier account so you can migrate Lumos settings to other sites. This is not available on the account tier I'm on, so instead of paying $42 I did it all manually! It was a lot of work... next time I'm paying for the upgrade lol
Hey, that's awesome! Quick question: Is there any way to control a background video with a press-and-hold action? Essentially, pressing and holding would play the video, and releasing would pause it. I trust your expertise.
Yes, it's possible! We would need to use a Webflow Background Video or a Custom Element with a tag of video. There would need to be a section with the class of "video-section". Inside would be the video and also a button with the class of "video-button". Then we would add this script on the Before body tag. $(".video-section").each(function () { let button = $(this).find(".video-button"); let video = $(this).find("video"); video.get(0).pause(); button.on("mousedown touchstart", function () { video.get(0).play(); }); button.on("mouseup touchend", function () { video.get(0).pause(); }); });
Worth adding the "Section / Starter" to the page wrap before making the component so you also transfer that component over. I personally use that to start every section on my projects.
@@timothyricks Nope, the last project I installed Lumos was missing the Section / Starter, so for all news I always drop the section into the page wrapper before I turn it into a component and share the library. No biggie, perhaps I have an older styleguide? It's the Lumos v2.
I wish they had an option to choose which components to import. That way we could build a massive library of 100 different navbars or footers, and you just choose the one you want. But for now, the best solution is allowing users to copy in unlinked components that have to be manually linked like this… www.timothyricks.com/components
Hey Timothy, been fiddling with the Lumos system for a minute now but noticed something quite frustrating that I can't figure out how to fix. Is there a way to override the data-theme so that Lumos does not insert a background color onto a section? For example, I'm trying to add a 100vw/vh hero section to my page with its own styled background, but because I'm using Lumos, it's forcing the themed background on top of whatever I've done in this section. Not sure how to fix it and I've spent a good hour and a half messing with this, so any pointers would be extremely helpful. Thanks for any help, and thanks for sharing such an awesome system with us to begin with!
Hi Rhia, I'm sorry you're running into this issue! If we select the element that has a data-theme attribute and change its background color by using the style panel, the style panel will override the color coming from the data attribute. It's best practice to include the data-theme attribute on the outermost parent, and apply any custom backgrounds to that element or its children.
Christ is Lord, I was just thinking of this a week ago. Its like we all think it and Timothy articulates our thoughts through youtube videos hahahaha!!!
Do you have a video for people just starting with Lumos, maybe one where you build a landing page from scratch explaining everything you do with Lumos, I have been using Finsweet's Framework for some time now because that's what clients request, but after watching some of your videos I feel like your framework could be much better? Thanks and great work T.
Hi, I have a Lumos Course made up of short videos that explain each part of Lumos in full detail. The course ends with building a landing page from scratch using Lumos, but it’s helpful to watch the main lessons first to understand the core concepts. Class naming in Lumos is designed to improve site speed, decrease build time, and make the site more maintainable. ua-cam.com/play/PLoXSZEwtbyStInsfWsEO5ouJ7HTfMMLeA.html&si=MgnJkCqlVVS4UmBv
Thank you for the great suggestion! I don’t have one of those yet. Personally, I find using webp images, using GSAP instead of Webflow Interactions, and using utility classes for nearly everything helps a lot
If we create an interaction that’s only used on one page of our site, Webflow still adds the code of that interaction to every page. Since JavaScript is the second biggest offender of page speed, this can really impact multi-page sites. With GSAP, we can include the code for each interaction only the pages it’s needed. Or even better, we can store it with the related section component so if the client removes that section from one page or adds it to another, the JavaScript is stored inside the section.
Utility classes are classes that aren’t related to single section but instead can be used anywhere throughout the site. These are things like grid-column-3 or text-style-h2. If we create a class and apply styles to it, Webflow includes those styles on every page of the site even if it’s only being used on one page. So using reusable utility classes for common styles like flexbox or grid can remove a huge amount of unnecessary code from our site. ua-cam.com/video/_H7VoBSpsgs/v-deo.htmlsi=g6gFg6JbqVH6puGM
Dudee...at this point, you're just reading our mind. I literally searched for this at the beginning of this week. Recently learning to use Lumos. Got a project where someone wanted me to help with adjusting his website responsiveness, spacing consistency and all. Decided to go through a more complex route of using this opportunity to learn Lumos framework. After using the FAQ section of your website to find out how to do it, I realised I'll need to use a cut and copy app to import variables but I'll still need to create the components manually. Though I could copy the components over but it would be detached and I'll have to manually configure it back. It was a tasking procedure at the beginning but I've started getting the groove of the framework and I'm experiencing the blessings of it. Though there are still areas that I'm not fully clear on, I'm getting a better understanding by directly using it in a project
This is so great to hear! Thank you for trying Lumos! I'm glad that this process is much easier now. Hopefully by rebuilding some of those components before though, it gave you a greater understanding of how everything works.
@@timothyricks yes, thanks a lot. It gave me a greater understanding of components in general and with the way it works in Lumos. You've been a great help in the Webflow community.
Hey Timothy, just wondering if you could create a guide for upgrading from an older version of Lumos to a newer one. I am trying to import all 2.05 variable changes (specifically u-block-gap), style guide changes and custom code changes without overriding my current variables and breaking parts of the site. Is this possible? I am struggling to track changes and see what I need to update when brining over new variables. A bunch of my heading font-sizes seem broken, but I have no idea how to fix them.
I am trying to figure out when you had time to record this...
This morning in the hotel! 😂 That’s why the audio sounds so bad
@@timothyricks my mind cannot comprehend your level of output 🤯
A few weeks ago I converted an old site manually... it was tedious and borderline maddening, but I learned a ton about Lumos and saved $42 I guess so there's that haha. Thanks for sharing this!
Way to look on the bright side! 🙂 Great as a one time learning experience but never having to recreate manually again will be nice.
Where to the $42 savings come on? On what did you save?
@@zeminem35 In the video, Timothy shares that you can pay for a month of the higher tier account so you can migrate Lumos settings to other sites. This is not available on the account tier I'm on, so instead of paying $42 I did it all manually! It was a lot of work... next time I'm paying for the upgrade lol
Hey, that's awesome! Quick question: Is there any way to control a background video with a press-and-hold action? Essentially, pressing and holding would play the video, and releasing would pause it. I trust your expertise.
Yes, it's possible! We would need to use a Webflow Background Video or a Custom Element with a tag of video. There would need to be a section with the class of "video-section". Inside would be the video and also a button with the class of "video-button". Then we would add this script on the Before body tag.
$(".video-section").each(function () {
let button = $(this).find(".video-button");
let video = $(this).find("video");
video.get(0).pause();
button.on("mousedown touchstart", function () {
video.get(0).play();
});
button.on("mouseup touchend", function () {
video.get(0).pause();
});
});
@@timothyricks you are absolutely amazing!
Worth adding the "Section / Starter" to the page wrap before making the component so you also transfer that component over. I personally use that to start every section on my projects.
Thank you, Ethan! That component should already be under the "Global" category on the styleguide page. Was it not showing up for you?
@@timothyricks Nope, the last project I installed Lumos was missing the Section / Starter, so for all news I always drop the section into the page wrapper before I turn it into a component and share the library. No biggie, perhaps I have an older styleguide? It's the Lumos v2.
Oh, I see! It might be an older version of V2
Thank you so much this is really helpful. Now I can both upgrade old sketches and get a better understanding of how the system works.
So glad to hear that!
I can already foresee a cool lumos lib coming up!
I wish they had an option to choose which components to import. That way we could build a massive library of 100 different navbars or footers, and you just choose the one you want. But for now, the best solution is allowing users to copy in unlinked components that have to be manually linked like this…
www.timothyricks.com/components
Hey Timothy, been fiddling with the Lumos system for a minute now but noticed something quite frustrating that I can't figure out how to fix. Is there a way to override the data-theme so that Lumos does not insert a background color onto a section? For example, I'm trying to add a 100vw/vh hero section to my page with its own styled background, but because I'm using Lumos, it's forcing the themed background on top of whatever I've done in this section. Not sure how to fix it and I've spent a good hour and a half messing with this, so any pointers would be extremely helpful. Thanks for any help, and thanks for sharing such an awesome system with us to begin with!
Hi Rhia, I'm sorry you're running into this issue! If we select the element that has a data-theme attribute and change its background color by using the style panel, the style panel will override the color coming from the data attribute. It's best practice to include the data-theme attribute on the outermost parent, and apply any custom backgrounds to that element or its children.
@@timothyricks Awesome, I'll try that! Thank you so much for your help. :)
Christ is Lord, I was just thinking of this a week ago. Its like we all think it and Timothy articulates our thoughts through youtube videos hahahaha!!!
🙀I swear not half an hour ago i was thinking "but how would i get this into an old project?" 🔮
Oh, awesome! 😂 Perfect timing. This used to be sooo tedious before libraries released yesterday
Do you have a video for people just starting with Lumos, maybe one where you build a landing page from scratch explaining everything you do with Lumos, I have been using Finsweet's Framework for some time now because that's what clients request, but after watching some of your videos I feel like your framework could be much better? Thanks and great work T.
Hi, I have a Lumos Course made up of short videos that explain each part of Lumos in full detail. The course ends with building a landing page from scratch using Lumos, but it’s helpful to watch the main lessons first to understand the core concepts. Class naming in Lumos is designed to improve site speed, decrease build time, and make the site more maintainable.
ua-cam.com/play/PLoXSZEwtbyStInsfWsEO5ouJ7HTfMMLeA.html&si=MgnJkCqlVVS4UmBv
@@timothyricks Ty
You sir, are a decedent of the gods.
that was my request! thank you so much dude
Oh, awesome! Thank you for bringing it up!
Can you make a video on boosting page speed in Webflow ? (If you already did I apologize lol)
Thank you for the great suggestion! I don’t have one of those yet. Personally, I find using webp images, using GSAP instead of Webflow Interactions, and using utility classes for nearly everything helps a lot
@@timothyricks oh wow I didn’t know that, so GSAP is less code heavy than Webflow interactions ??
@@timothyricks and what are utility classes ?
If we create an interaction that’s only used on one page of our site, Webflow still adds the code of that interaction to every page. Since JavaScript is the second biggest offender of page speed, this can really impact multi-page sites. With GSAP, we can include the code for each interaction only the pages it’s needed. Or even better, we can store it with the related section component so if the client removes that section from one page or adds it to another, the JavaScript is stored inside the section.
Utility classes are classes that aren’t related to single section but instead can be used anywhere throughout the site. These are things like grid-column-3 or text-style-h2. If we create a class and apply styles to it, Webflow includes those styles on every page of the site even if it’s only being used on one page. So using reusable utility classes for common styles like flexbox or grid can remove a huge amount of unnecessary code from our site. ua-cam.com/video/_H7VoBSpsgs/v-deo.htmlsi=g6gFg6JbqVH6puGM
That's awesome
🔥🔥👩🚒🔥🔥