Відео

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

Hi Benjamin, yes any class can be changed without removing the others and adding them back. These classes lead to a faster loading site since we’re using styles that already exist instead of creating new styles each time. Because we start with a custom class first and then stack the utility classes on top, it allows us to rename the stacked utilities to switch them for a different class. Renaming the class doesn’t change the global utility used elsewhere throughout the site. This class naming video explains it best with real examples: ua-cam.com/video/_H7VoBSpsgs/v-deo.htmlsi=2lT32kZFU98-AoWL

Yes, this is all built with Webflow, the Webflow CMS, and some JavaScript for the added functionality

@@timothyricks that’s so cool man ! Good job

Thanks so much!

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

Hi Kevin, CodeSandbox no longer supports this so I use Slater.app instead.

I'm so glad this helps! Definitely wish I would have learned this sooner

@@timothyricks Tim, i'm the guy that was repeating Eureka until I got comfortable with the best practices introduced there. I asked in office hours what the next step for me is and you mentioned client first and lumos. I will jump straight into lumos as I'd like to shorten learning time. thank you Tim. I'll keep you posted.

So glad to hear that!

I'm so glad this helps! Thank you for the recommendation!

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. <script> $(".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(); }); }); </script>

@@timothyricks you are absolutely amazing!

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.

This morning in the hotel! 😂 That’s why the audio sounds so bad

@@timothyricks my mind cannot comprehend your level of output 🤯

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

Oh, awesome! 😂 Perfect timing. This used to be sooo tedious before libraries released yesterday

Thank you so much! Great luck on your next build!

Hi Conner, it's all through custom css. Here's one example of creating a data attribute that makes a slider button tall instead of wide. Whenever the data-button-tall attribute is set to "true", it changes the width and height of the element that the attribute is applied to. It also rotates its child that has a class of "icon". [data-button-tall="true"] { width: 2rem; height: 6rem; } [data-button-tall="true"] .icon { transform: rotate(180deg); } There's many different ways this can be used, but it's especially helpful for color. ua-cam.com/video/SfhjbsqEQA0/v-deo.html

Thanks so much for the kind words! Are you using the Lumos Cloneable or the Starter File in the description of this video? The theme switching relies on variables and css that’s in those cloneables by default

​@@timothyricks Ahh understood! I was actually trying to copy what you're doing to learn the concept of variables and components, by following your steps by scratch from a new site. I definitely see that was my exact issue. I've cloned the site, and it works perfectly! I appreciate your response! Last question - Is there a way to save custom variables across multiple sites for future projects? Or is it best to save the variables via Figma, as exemplified in the video? Thanks so much for you response and expertise! Blessings!

Oh, I see! If you’re interested, this video shows how to setup the color themes with components from scratch. ua-cam.com/video/SfhjbsqEQA0/v-deo.htmlsi=opv09cxId85UC6Vd The CutCopy Webflow App can copy variables between projects. Webflow also just released their Libraries Feature today which can do this on certain paid workspace plans.

​@@timothyricks Whoa this is perfect! Thanks so much for the video! Definitely creating my custom ones now and will be using them from now on! This timing couldn't have been better! I have a paid workspace plan with Webflow so I'm good for now, but I definitely might need more since i'm running out of space 😂 Appreciate you!

Thank you! All of the code for my tutorials are always stored in the cloneable. The infinite scroll version is on the second page of the cloneable.

Hi, both of them are from www.fontshare.com

There’s no limit to the number of colors. More colors can be added just like the existing ones 🙂

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

Yes, it is

Hi, using a CMS Collection could be helpful but isn't required.The lightbox wouldn't work because it opens a full screen overlay. An potential no-code solution would be using the Webflow Tabs element or manually creating a Webflow interaction for each image that shows the current image on click and hides the others. Here's an example I created using code though that uses the button custom element and sets aria-pressed for accessibility. The script is inside the Hero Section in the "Script / Hero" Component. preview.webflow.com/preview/bespoke-swap-images?preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview bespoke-swap-images.webflow.io/ The responsiveness of text is handled in the Custom Code component inside the "page_code_responsive" embed since Webflow Variables don't support breakpoints currently.

@@timothyricks thank you so much, I was looking for the solution in your video about mapping with path, where you mapped US states. hahaha Im just trying...I want to figure this out! Lumos + Webflow that is.

It’s currently a tedious process to add into an existing site manually. I’m hoping when Webflow libraries release, it makes this process seamlessly. Currently, the page_wrap on the styleguide page can be copied to bring all of the classes over. And the CutCopy Webflow App can copy all the variables over. The classes would have to be manually relinked to variables though, and the components would have to be manually recreated.

Thanks so much for the kind words! Will do :)

Hi :) In the Custom Code Component, there's a "page_code_custom" embed for adding any site-specific css that should apply to every page.

There's been significant improvements in Webflow Designer performance recently, but even before that, the designer ran smoothly for me when using a lot of components on an older intel-based macbook. The number of elements on a page might have a larger performance impact than the number of components.

Its actually shitty perfomance wise. Also now you need to pay a spline subscription in order to hide the logo etc..