5 Must-Know CSS Styles for Webflow

Get the Lumos Styleguide and CSS Code at webflow.grsm.io/lumos (affiliate link)
Join my Webflow Wizards Community
/ timothyricks

[@vladimirpetroski7089]

So wait a minute, when all those icons have the same class and you just add the utility on there, it acts as renaming the class and giving the utility to all the icons?? Sick!! \m/

[@timothyricks]

Yes, it’s game changer! I built a whole framework around that here 🙂
ruclips.net/video/B-AAyZQps9U/видео.html

[@TheWebMad]

the overflow clip one was a Game changer.

[@jericjamesmunez]

True! That's what I currently needed. Thank you so much, Tim 🤙🔥

[@JustBrenton]

Protect this man at all costs

[@plantseeds_]

National treasure

[@ValiTronaru]

Just being subbed to Timothy feels like staying up to date with minimal effort. What a teacher!

[@timothyricks]

Thank you, Vali!

[@jo69123]

you are a fucking magician Timothy
btw, whenever I ask questions to the Webflow's support team, your video tutorials always come up haha

[@dimka_tregubov]

✨

[@askwis1]

thanks man ! i’ve been waiting the video like yours all my life

[@JonnySchaab]

all of these are GOLD

[@infinitedesigns_io]

That was intense! Awesome stuff

[@silvansoeters]

Love this one! > body { overscroll-behavior: none;}

[@jdanielortega]

0:29 After learning a lot from you, it's just fair to return the favor 🤝
A widow is the end of a paragraph, that appears alone at the top of a column. An orphan is a single word (or syllable) that sits alone at the bottom of a paragraph of text.

[@gtsb]

Amazing as always, Timothy!
Would love to see a full Webflow site build following your process in Lumos one day

[@timothyricks]

Thanks so much! I’m working on it. I’m just waiting for the chrome extension to be finished up so everyone can get the full experience of working in Lumos when following along.

[@haydendesigndigital]

Thank you so much!!

[@vasu9760]

2 mins but a lot of value 🫡👍🏻👌🏻

[@bellomubarak3270]

I’m waiting for a full website build with this Lumos system. Once I have that, I’m in. Or maybe I’ll create the full build myself.
Just maybe.

[@spiderone_]

Thanks, this is so valuable

[@NoahShreve]

Tim is the Goat

[@Sergy_Kondrashin]

True wizard! 🧙‍♂️

[@blcksgnota]

Legend!

[@eugenesoch8247]

Wicked video!

[@falabondioli]

It's amazing!!!!!!

[@YuvalVasiuk]

I love you.

[@benvindadossantos2092]

magic

[@tethron.]

Yeeaaa Rickay!!

[@waysearcher]

Hello. And how did you make sure that when entering utilitarian classes, for example tw1, the names text-wrap and balance were displayed?

[@timothyricks]

Hi, I’m using a Lumos Chrome Extension that’s being developed. It will show live values from the embeds.

[@collinarnold9178]

Hey Timothy, at 1:23, what are you using to make it so your utility classes populate as you append them to the base class? There's a popup showing the description, etc as you type, but I don't have that within webflow natively. Is it a plugin? An extension?

[@timothyricks]

Hi Collin, this is a Lumos Chrome Extension being developed that pulls live classes, values, and descriptions from the embeds.

[@collinarnold9178]

@@timothyricks oh man… if you have any interest in someone testing it and giving feedback, reach on out! I’m in the process of converting my team to using lumos as a framework for all our future sites, and this is a game changer!

[@aldoheubel]

When I add the embed to prevent overflow but remaining the sticky elements, my sticky animations aren't working anymore..How can I fix that

[@stefanklindt1708]

How do you make the mouse movement look sooo gooood!

[@timothyricks]

Using www.screen.studio

[@stefanklindt1708]

@@timothyricks You're the G.O.A.T man! Love your videos!

[@timothyricks]

Thanks so much!

[@jo69123]

I used one of your templates with a structured style for all headings, I respected it and made all elements on the website using EMs, now I see that you recommended to change to 16px on the body-all-pages for all mobile sizes, when I do so, none of the elements on my website respect this change, what am I probably doing wrong? i'm not sure ☹

[@jo69123]

I think that the text wrap balance doesn’t work in Safari yet, is there an alternative for it?

[@timothyricks]

I don’t think so sadly

[@ajhoyhoy]

I noticed the overscroll issue still occurs on mobile devices even though this has been applied to the body? is this expected? can this be added as a custom css property to the body all pages in Webflow now?

[@timothyricks]

I would apply it to a div inside the body like a page_wrap. Applying overflow clip to the body can sometimes prevent the body from scrolling vertically also which might factor into mobile ignoring it on the body

[@yusufmatra]

Hai Tim, is it possible that we can make a dynamic qr code that contains the playstore and appstore links in one qr code on webflow?

[@oldbonesmcgee]

As an alternative option you can make 2 separate QR codes then conditionally show the correct one for either Apple or Android. Something like this:
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
$(".android-button").css("display", "block");
$(".ios-button").css("display", "none");
$(".desktop-button").css("display", "none");
}
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
$(".android-button").css("display", "none");
$(".ios-button").css("display", "block");
$(".desktop-button").css("display", "none");
}
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(".android-button").css("display", "none");
$(".ios-button").css("display", "none");
$(".desktop-button").css("display", "block");
}

[@oldbonesmcgee]

This code was for 3 buttons, one for android, one for iOS and one for everything else, so just sub in your relevant QR code classes where the button classes are.

[@yusufmatra]

@@oldbonesmcgee Thanks, I will try to implement this code in webflow