Become a Webflow Utility Class Pro

Get the cloneable for this project (affiliate link)
webflow.grsm.io/tricks?path=f...
Join my Webflow Wizards Community
/ timothyricks

[@hadiaslam7801]

I used to think that mastering just webflow is enough, but every time I watch you video my webflow knowledge feels very low, hatsoff

[@Sergy_Kondrashin]

Wow! Amazing as usual! Thank you! 🙏🏻

[@kjwessa]

This is amazing!

[@uialexk]

The resources from your channel are great. Very helpful to develop an efficient webflow workflow

[@timothyricks]

Thank you!!

[@glevsky]

I love how these utilities can be used on top of the custom class names. Just tried it in a large client project: 3 seconds to copy-paste the styled divs from the clonable and you get 90% (probably more) of flexbox settings covered with just those utilities

[@xatomdev]

This is amazing! love the approach

[@timothyricks]

Thanks so much!

[@alexandrb1543]

Hey Tim. Is it possible to create a tutorial for a parallax-like scroll on mobile devices, especially for safari ?

[@ricardobrandao-gg5wm]

This is awesome. Thanks for sharing! Why did you use a custom element to create these utility classes and not a regular div block?

[@timothyricks]

The custom element isn’t required and doesn’t affect the way the utilities work. To make the style guide look nicer, I added some additional inline styles that are only supported on the custom element.

[@sitcomz]

Do you plan on adding it to Lumos V2 utilities?

[@timothyricks]

Possibly in a future version! I’ll leave them as an optional add-on for now

[@duongang3819]

Hi Tim, love this. When I rename the class, webflow saying that it "already exist". How I can quickly rename the class name like you did in the end? Thank you!

[@timothyricks]

Thank you! That “already exist” is a weird Webflow quirk. To get around it, we can remove the class from the element, add it back, and then rename it freely. Or we can rename it to u- and then rename it again to the full class we actually want

[@taunado]

Thanks. What framework are you using here?

[@timothyricks]

I use my own framework called Lumos. It has some base utilities that can be used as a starting point, and we can add extra utilities in like these flex utilities I created or animation utilities from my previous video. webflow.grsm.io/tricks?path=lumos-v2-beta

[@taunado]

@@timothyricks It's awesome, thanks a lot. The custom properties on the utilities is exciting.

[@taunado]

How can I import your Style Selectors into a project I'm working on?

[@timothyricks]

Hi, you can copy the whole section from the cloneable and paste it into your project. It will automatically add all of the classes in.

[@taunado]

@@timothyricks Brilliant, thanks!

[@gamalieljustinflores5109]

Hey Tim!!!! I remember coming across a video of yours where you flip a 2 column div from left to right to right to left (this helps in mobile design) but I cant find it anymore. Any chance you can lead me to it? :D

[@timothyricks]

Hi, sure thing! Was this the video? kzbin.info/www/bejne/foKlZ2CInc58otE

[@gamalieljustinflores5109]

@@timothyricks magicccc. Thanks legend!