Webflow Unlocks Class Attribute
HTML-код
- Опубликовано: 14 апр 2024
- Get the cloneable for this project (affiliate link)
webflow.grsm.io/tricks?path=c...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096 
Хобби
If there was a golden crown with the shape of the Webflow logo, we all know who deserves to wear it. 😎
This is beautiful, please, someone make this happen 😂
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!
That is amazing! Thanks again Timothy!
brilliant use case of this new freature. thanks for sharing this with us!
This is a great tip. Thank you Timothy!
So glad this helps!
Wow. This is amazing. Thanks for sharing!
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!
Thanks for sharing!
I knew you were gonna be the first to make a video about it! 💪
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!
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/
Stellar Tip!
Thank you!
This is good.
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.
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
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. ruclips.net/video/y4oTdCa4jSA/видео.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!
If I clear unused styles that might break these components? 🤔
Yes, unless we save the classes on a styleguide page
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.
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
A true Wizard! 🪄
Thank you, Skylar!