Dang, wish I'd seen this yesterday! I just built a collection list with options like "Photos Position: Left or Right" (next to a rich text element) and "Logo Position: Above or Below Portrait" to give the user 4 options on layout, and I was just hiding/showing content depending on which options they chose. This is probably a much more page-speed-friendly way of doing that.
Wow this is huge, thanks for the update! As always it arrives right as I'm wrapping up a complex CMS project that would have been so streamlined with this haha. I had to rely on custom CSS in the HTML embed to target items with custom attributes applied. Looking forward to how smooth this should make that kind of thing in future though and glad to see Webflow still improving features for power users.
Ahh this is so amazing! By the way, what program do you use to record your videos? I love how the screen zooms in when you're typing in text fields and the mouse is larger to help us follow along.
Hi, I created a Figma file that can be used with the Figma to Webflow app to import most variables. But it requires some manual cleanup work since the plugin doesn’t support font families, unit types, or cross referenced variables www.figma.com/community/file/1342629820752129716/bulk-import-variable-starters-into-webflow For copying the utility classes, copying the entire page_wrap of the Lumos styleguide and pasting it into your project should bring them all over. xAtom created a chrome extension that can prevent classes from getting duplicated when we copy and paste chrome.google.com/webstore/detail/xsync-by-xatom/pdefeeiifpfkkoeppdjnhefenadjbanj
Cool, thansk. Is it possible for the client to add 'blocks' and 'sections' by triggering visibility or something? For the cases in which the client needs to add something to their website without having to hire a dev. Can they add a another page and choose a Section component, and blocks within that section?
Yes, it’s totally possible! This is how I’m training my clients currently. We can build a whole searchable system with components that makes it easy and safe for anyone to build new pages. I have a more in depth video on it here. th-cam.com/video/y4oTdCa4jSA/w-d-xo.htmlsi=HtA9rhdgmGBwMR65
@@timothyricks Love it, Webflow is getting better and better. I hope to see a video of you showing your workflow for that specific system, like a use-case video.
Do you recommend using this technique to achieve component-based styling changes over adding a data-attribute? I'm using data-padding="none", "top", "bottom" to allow clients the flexibility but just using a combo class with this method seems uch more straight forward and more broadly applicable.
I still use data attributes for theme and section padding. If we tried to use section padding with the class attribute, we would likely need two classes in one component field which isn't very user friendly. class="padding-top-small padding-bottom-large" We can only apply the class attribute once per element, so I like to keep that attribute freed up for adjusting multiple elements from one field like the "is-reversed" example in this tutorial.
Hello T. Ricks. I noticed that a video was missing from your list of videos and I think your website. I once practiced with your video on how to make a Liquid Nav Anchor links. But, I noticed today when I wanted to use it as a reference that I couldn't find it anymore. Just want to know if you deliberately removed it and added it to patreon or it somehow isn't there anymore. Thanks
Yes, this is so we can change classes from component fields and CMS fields. I setup every section I built as a component which is important for larger sites. If we need to adjust the section structure, add attributes, or other optional elements later on, those changes can be made globally if we use components. It also benefits the developer in not having to keep track of every child that needs the is-reversed class manually.
The CMS collection use case is amazing. Thanks for sharing, Tim!
Thanks so much, Jordan!
Dang, wish I'd seen this yesterday! I just built a collection list with options like "Photos Position: Left or Right" (next to a rich text element) and "Logo Position: Above or Below Portrait" to give the user 4 options on layout, and I was just hiding/showing content depending on which options they chose. This is probably a much more page-speed-friendly way of doing that.
Rewatched for a refresher!
brilliant use case of this new freature. thanks for sharing this with us!
Wow this is huge, thanks for the update! As always it arrives right as I'm wrapping up a complex CMS project that would have been so streamlined with this haha. I had to rely on custom CSS in the HTML embed to target items with custom attributes applied. Looking forward to how smooth this should make that kind of thing in future though and glad to see Webflow still improving features for power users.
Better late than never I guess. I’m really glad they added this one also!
That is amazing! Thanks again Timothy!
Stellar Tip!
Thank you!
Timothy you're a Wizard! Thank you for sharing
Thanks so much!
Great explainer of a super powerful improvement here Tim. Can’t wait for your stream with Corey!
Thanks so much, Tim!
You are the master of webflow!
This is a great tip. Thank you Timothy!
So glad this helps!
Wow. This is amazing. Thanks for sharing!
Ahh this is so amazing! By the way, what program do you use to record your videos? I love how the screen zooms in when you're typing in text fields and the mouse is larger to help us follow along.
Thanks so much! I use www.screen.studio/
Thanks for sharing!
I knew you were gonna be the first to make a video about it! 💪
Tim, any tips for importing the lumos framework into a huge existent project?
Hi, I created a Figma file that can be used with the Figma to Webflow app to import most variables. But it requires some manual cleanup work since the plugin doesn’t support font families, unit types, or cross referenced variables
www.figma.com/community/file/1342629820752129716/bulk-import-variable-starters-into-webflow
For copying the utility classes, copying the entire page_wrap of the Lumos styleguide and pasting it into your project should bring them all over. xAtom created a chrome extension that can prevent classes from getting duplicated when we copy and paste
chrome.google.com/webstore/detail/xsync-by-xatom/pdefeeiifpfkkoeppdjnhefenadjbanj
Cool, thansk.
Is it possible for the client to add 'blocks' and 'sections' by triggering visibility or something? For the cases in which the client needs to add something to their website without having to hire a dev. Can they add a another page and choose a Section component, and blocks within that section?
Yes, it’s totally possible! This is how I’m training my clients currently. We can build a whole searchable system with components that makes it easy and safe for anyone to build new pages. I have a more in depth video on it here. th-cam.com/video/y4oTdCa4jSA/w-d-xo.htmlsi=HtA9rhdgmGBwMR65
@@timothyricks Love it, Webflow is getting better and better. I hope to see a video of you showing your workflow for that specific system, like a use-case video.
Do you recommend using this technique to achieve component-based styling changes over adding a data-attribute? I'm using data-padding="none", "top", "bottom" to allow clients the flexibility but just using a combo class with this method seems uch more straight forward and more broadly applicable.
I still use data attributes for theme and section padding. If we tried to use section padding with the class attribute, we would likely need two classes in one component field which isn't very user friendly. class="padding-top-small padding-bottom-large" We can only apply the class attribute once per element, so I like to keep that attribute freed up for adjusting multiple elements from one field like the "is-reversed" example in this tutorial.
@@timothyricks That makes total sense. Thank you for the reply Tim!
Glad to help! Thank you for asking!
Hello T. Ricks. I noticed that a video was missing from your list of videos and I think your website. I once practiced with your video on how to make a Liquid Nav Anchor links. But, I noticed today when I wanted to use it as a reference that I couldn't find it anymore. Just want to know if you deliberately removed it and added it to patreon or it somehow isn't there anymore. Thanks
We can finally use BEM as it was designed.
How does this differ to just using the class 'is-reversed' in the first place? Is this for a giving a client more power using the CMS?
Yes, this is so we can change classes from component fields and CMS fields. I setup every section I built as a component which is important for larger sites. If we need to adjust the section structure, add attributes, or other optional elements later on, those changes can be made globally if we use components. It also benefits the developer in not having to keep track of every child that needs the is-reversed class manually.
Hi, Timothy! What software do you use to create your tutorials? I see you mouse cursor moving smoothly and camera zooming in at times. Cool stuff!
Thank you! I'm using Screen.Studio
How are you aware of those tiny updates? 😂
Webflow posted about it on their socials and website. 🙂 webflow.com/updates/add-classes-as-custom-attributes-to-elements
Because this guy is a pro!
This is good.
🔥🔥🔥
A true Wizard! 🪄
Thank you, Skylar!