Lumos Components | Webflow Framework

[@eddieyan5529]

Just wanted to the first to say, thank you for all that you do for the Webflow community!!!

[@plantseeds_]

alright i've watched your stuff since vid 1 and this is safe to say now: You've earned the only Webflow God status emblem in existence sheeeeeeesh dude

[@bjarnithors]

🤯WOW!! Thank you Ser!! This is mindblowing.. Think I will have to watch this about 50 times to digest everything and learn.

[@timothyricks]

Thank you!! I’m so glad this helps! It’s been a game changer for my client projects.

[@c.rberyl3759]

Timothy Ricks, your system rocks!

[@timothyricks]

Thanks so much! I'm glad this helps!

[@irinazaman]

Just watched all new Lumos videos. This is sooooooo helpful. Can't wait to start a new build!

[@timothyricks]

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

[@anenglishmanyoutube]

Thanks, very very helpful!

[@timothyricks]

I'm so glad this helps!

[@njanadesign]

Let's go new documentation!!!

[@THEillebaS]

Hi Tim. Thanks for all you do! Quick question. Is there a way to have the overlay on the global image component to only show on mobile breakpoints? Or have the opacity only change on breakpoints?

[@benjamin.lhuillier]

Hi Tim :) If you have a CSS style that you use on every page of the website (for exemple a logo slider), how do you implement it?

[@timothyricks]

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.

[@Jilles-i9l]

First things first, absolutely love Lumos and your videos! Do you know if there is a work-around in Webflow to use filter properties with a Collection list inside a Component? Currently it looks like there is no way to add filter properties that can be changed for components.

[@timothyricks]

Thank you! I don’t believe there’s a way to adjust CMS filtering from component fields. We could create a slot for the collection and turn the collection into a child component. But we would need one child component for each variation of the filtering.

[@BorhanMediaWebdesign]

I just did my first Landingpage with Lumos and it feels great! I am just facing a Problem with the Global Button: When different States like Hover attached to it, the G Clickable Component won‘t let these hover effects happen. What did I miss?

[@timothyricks]

Thanks so much for trying Lumos! I’m glad to hear you’re liking it. The Global Clickable Component shouldn’t be styled. It’s an absolute element that covers any button or card we add it in and allows us switch it between an html button tag or link tag depending on if the element should trigger an interaction (button) or links to a new page (link). The hover state should be applied to the parent element of the Global Clickable Component.

[@jorgagostini1013]

Thanks so much for all your work! Love Lumos - lots of freedom but with a solid base! As I can see, the BTN component is using a link block for the link - I was wondering if you found a good solution for the editor side. As much as I know Webflow still hasn’t integrated a way to edit link blocks in the editor. Also, would you know if the card link solution stays connected to the heading link in the editor?

[@timothyricks]

Thank you for the kind words!! Sadly, I haven’t found a way to make link blocks editable in the editor. I’ve been training clients to use Webflow Designer and Webflow Designer Edit Mode since it gives them access to the asset panel, alt text, and features needed to maintain the site. If the site is built completely with components, it’s much more client friendly for them to edit. And since Webflow announced page building mode coming, that’s probably the future of how clients will edit sites. For the card link, changing either the heading link or the card link will always update both as long as they’re connected to the same component field.

[@jorgagostini1013]

@@timothyricks Thanks for your reply! Much appreciated. Finsweet does have a solution, basically using JS to click the parent div of a text link. But, last time I implemented it there was an issue with saving the link settings for the button in the editor. It always reverted back to "#". Apparently it is an issue with the component in a component. I might try you approach and train them up in designer instead.

[@BorhanMediaWebdesign]

And again - thanks a Lot!! I was wondering, why don‘t you use the custom Element more frequently? For example on the Buttons that do have a link to section on the Same Page. In my thoughts that would bring even more Flexibility into Lumos but I‘d Like to See your thoughts on this 😊

[@timothyricks]

Oh, thank you for the idea! What would you like to do with the custom element that can’t be done with a link element? The one button component gets used inside many section components, and the client should be able to choose to link to a page or section without having to type a /#section-id or /slug manually. The native link element also automatically updates its destination if the section id or page slug it is linking to ever gets renamed.

[@BorhanMediaWebdesign]

Thanks for Answering! I thought about it some time. Maybe a Button Element with Accessibility Attributes already linked to it. Or maybe to help people learn how to use more Semantic HTML rather than only relying on DIV Blocks :) Even Accessibility Attributes in General already being on the Standard Elements would be a Huge thing for EU Webflow Designers. But I unterstand that would be a Ton of work to prebuild.

[@timothyricks]

@@BorhanMediaWebdesign Great idea! In the latest version, there’s already a "Global / Clickable" component that has components fields for choosing a regular link block or html button element. It also has a field for the text that screen readers will read when focused on that button or link. That clickable component is included inside the play button and main button component by default so that either of those can be a button or link. But the component can also be easily added to any new ui elements we create that need to be clickable. Since it’s a position absolute element that covers anything it’s inside of, it allows us to have other elements inside the parent like rich text or slots since the link is on top of them instead of a parent of them.

[@sachinRao15]

Hi Tim, Including unused components in the project can lead to a bloated website. How do you tackle that?

[@timothyricks]

Hi Sachin, unused components have little or no effect on the published website. The html of those unused components isn't included on the published site if it's not used on the page. The only part of them that could show up on the published site is their css if they use custom styles instead of reusable utilities. The hero section example I created in this video added 0 extra lines of code to other pages on our site since it was made up completely of utilities that already exist.

[@charantejadornala]

Hi may i know how can we integrate Lumos into Wordpress?

[@njanadesign]

Lumos is for Webflow only

[@DanielDesigners]

What a question xD

[@timothyricks]

Thank you for wanting to use Lumos! I haven't worked out a way to integrate Lumos into other website builders. The way Lumos handles class names and components is designed specifically around how Webflow works. So it likely wouldn't be the same in other builders. The Fluid Builder and the Color System are two code blocks that should work in any builder that supports custom code and variables. Those two parts have very unique aspects that I haven't seen other frameworks cover even outside of Webflow.

[@charantejadornala]

@@timothyricks there’s this visual builder named Droip for Wordpress which resembles Webflow for smaller projects I’m using wordpress with Droip and Driop does support custom code and we can also add Css class like we do in Webflow. Hoping that you would create Lumos as a plugin like Core framework, Headspin UI and Etc thank you Tim you are a Goat for educating us with your tutorials and giving us more challenges as well as making our lives easier in building a Webflow websites.

[@timothyricks]

@@charantejadornala Oh, I see. I'm aware of those plugins but plan to stick to building Webflow related solutions. Thank you for the kind words and suggestions!