Hi Timothy, great video, do you have a video to learn more about cqw properties? What was significant about 24.9 cqw for the hero heading? If I had a Figma design with a font size set how would I translate that to cqw so it matches my design? Thank you
Thank you! CQW works similar to VW, but it's based on the size of a parent container instead of the entire screen size. So a width: 10cqw; would be 10% of the width of its parent container. From a figma design, we could do heading font size divided by heading width times 100 to get the cqw unit. Example: 300 / 1227 * 100 = 24.44cqw Kevin Powell has a great video also on cqw. ua-cam.com/video/ZSaAHb5dRwQ/v-deo.html
8 місяців тому+7
Wow, I just saw the notification and your video is already out! Thanks, Tim!
dude Timothy wishing you all the success - these are amazing tips. I am using the process you created for some other no Code apps because your approach is so scaleable!
Yes, Lumos v2.0.1 is coming soon. I've already started updating the cloneable to move a lot of custom code out of the embeds. I should be able to wrap up the updates soon
@@Directorkf The changelog will show the updates line by line as soon as it's released. The updates won't change the way Lumos works. It's just moving code from the embeds to the style panel. github.com/lumosframework/lumos-v2/releases
@@zeminem35 There's no functional difference. We're just not using custom code as much now. Example: this custom code can be moved to the all H1 tag in Webflow now. h1 { font-weight: var(--h1--font-weight); text-transform: var(--h1--text-transform); }
We cannot create a custom variable with, for example, 'clamp' in the variable panel, but we can do so in the designer. It would be great if this functionality could also be available there.
For sure! Variable values are somewhat limited right now unless we override them with custom code. Hopefully Webflow continues to add support for more values
Thank you! The Mozilla docs have a list of all the properties we can use. I believe that list is also displayed in webflow’s style panel under the custom property dropdown. New css properties are just one piece of this. We can also set new values now on properties that we’ve always had in Webflow like display, overflow, color, and more. The values are nearly countless so it’s hard to list them all. developer.mozilla.org/en-US/docs/Web/CSS
Webflow only adds it once the animation starts which doesn't give the browser much time to prepare for the animation. Applying it by default can make animation smoother, but I'd only add the style to problematic elements.
This is really great. This new Webflow capability is really requiring some brain cycles to understand the possibilities and how this changes the application of some frameworks like LumosV2. One question I have is about how Webflow is implementing these properties. Are they inline in the HTML element or are these properties being added to the class and included in the stylesheet? I'm not clear on that. Also, you mention at the end of the video that there are some properties to set on each project and to watch a vid for tips on that. I just don't see a link to that vid? Great work as always T.Ricks.
Thank you, Spencer! Webflow's adding these styles in the stylesheet attached to the class. They're not inline styles. Also, here's the video on the top default styles to set in Webflow. ua-cam.com/video/blFg-sKh-nk/v-deo.html
Timothy Ricks at it again boys!! Idk about you lot but I level up after each video and tbh I actually saw myself as a webflow expert ERM NO not when Timmys about hahah! Besides liking, commenting and subscribing how else can we support the big dawg man like HOMERTON T?
Hi Tim! How could you account for a situation where a client updates this heading but you still want the text to be 100% width of it's parent even though the length of the text has changed? Is there way for the font size value to be dynamic? As always, thanks for such great content ⚡⚡⚡
Great video as always, Tim! Is that correct that not all CSS properties are supported? After watching Kevin Powell's video today, I went on to try background-repeat, but it was not to be found in the list. :(
Good question! It isn’t the same thing. REM is usually based on the browser default font size (16px) so it’s not fluid. Even if we changed the html font size to include viewport width (VW), it wouldn’t be the same because VW is based on the width of the browser while CQW is based on the width of the container. Using % for font size means it’s based on the font size of its parent, not the width of its parent. So if the parent had a font size of 16px, a child with a font size of 200% would be equal to a 32px font size, which also isn’t fluid.
Hi Timothy, great video, do you have a video to learn more about cqw properties? What was significant about 24.9 cqw for the hero heading? If I had a Figma design with a font size set how would I translate that to cqw so it matches my design? Thank you
Thank you! CQW works similar to VW, but it's based on the size of a parent container instead of the entire screen size. So a width: 10cqw; would be 10% of the width of its parent container. From a figma design, we could do heading font size divided by heading width times 100 to get the cqw unit. Example: 300 / 1227 * 100 = 24.44cqw
Kevin Powell has a great video also on cqw.
ua-cam.com/video/ZSaAHb5dRwQ/v-deo.html
Wow, I just saw the notification and your video is already out! Thanks, Tim!
This update is next level. Looking forward to seeing what wizardry you come up with this update!
I didn't realize they added this, thanks for sharing this!
Glad to share! This is one of Webflow’s biggest updates
From a content creator perspective this is an epic tutorial. Showing the feature but using really creative examples. Well done dude!
Thanks so much! Your video on this is really great also
dude Timothy wishing you all the success - these are amazing tips. I am using the process you created for some other no Code apps because your approach is so scaleable!
Oh, awesome! Thank you! It’s really cool to hear this is helping across platforms
Some epic use cases for an awesome release!
Thanks Tim for this explanation.
You're my best reference ! Good job
So fast! Love this and can't wait to see a deeper dive from you! Thanks Tim!
I appreciate the video and the work that you do providing wisdom with the community.
Thank you so much!
Thanks Timothy for letting us know and being so DAMN cute at the same time! Love the update.
Great work , thx Tim
Does this mean that there will be an update for Lumos soon?😌
Yes, Lumos v2.0.1 is coming soon. I've already started updating the cloneable to move a lot of custom code out of the embeds. I should be able to wrap up the updates soon
If i'm currenly working on a site using 2.0, what is the best way to go about trying to get the updated version? @@timothyricks You're the best
@@Directorkf The changelog will show the updates line by line as soon as it's released. The updates won't change the way Lumos works. It's just moving code from the embeds to the style panel.
github.com/lumosframework/lumos-v2/releases
@@timothyrickswhat is the difference in moving css from the embeds to the new native properties, could you elaborate a bit more on that?
@@zeminem35 There's no functional difference. We're just not using custom code as much now. Example: this custom code can be moved to the all H1 tag in Webflow now.
h1 {
font-weight: var(--h1--font-weight);
text-transform: var(--h1--text-transform);
}
This is great! Thank you, Tim :)
So glad this helps! Thank you for watching
Good morning Tim. Thanks for always sharing your knowledge. Appreciate it a lot!
Thanks so much, Michael!
Webflow has peaked
🥳🎉👏🙏🏼 It’s all moving so fast!
Amazing Webflow content as always Timothy! Do you know if the custom CSS properties also support CSS animations?
As always very informative.
We cannot create a custom variable with, for example, 'clamp' in the variable panel, but we can do so in the designer. It would be great if this functionality could also be available there.
For sure! Variable values are somewhat limited right now unless we override them with custom code. Hopefully Webflow continues to add support for more values
Amazing as always
Always awesome content!
You sir are a legend!
I think you know custom properties better then the guys who build this👏
I wouldn’t be surprised!!! 😁
Hi Tim, awesome content as always.
Do you know where can we get a list of all the possibilities?
Thank you! The Mozilla docs have a list of all the properties we can use. I believe that list is also displayed in webflow’s style panel under the custom property dropdown. New css properties are just one piece of this. We can also set new values now on properties that we’ve always had in Webflow like display, overflow, color, and more. The values are nearly countless so it’s hard to list them all. developer.mozilla.org/en-US/docs/Web/CSS
@@timothyricks Thank you very much, keep rocking!
Incredible!
Doesn't Webflow add "will-change" by itself? I often saw this property on animated elements.
Webflow only adds it once the animation starts which doesn't give the browser much time to prepare for the animation. Applying it by default can make animation smoother, but I'd only add the style to problematic elements.
This is really great. This new Webflow capability is really requiring some brain cycles to understand the possibilities and how this changes the application of some frameworks like LumosV2. One question I have is about how Webflow is implementing these properties. Are they inline in the HTML element or are these properties being added to the class and included in the stylesheet? I'm not clear on that. Also, you mention at the end of the video that there are some properties to set on each project and to watch a vid for tips on that. I just don't see a link to that vid? Great work as always T.Ricks.
Thank you, Spencer! Webflow's adding these styles in the stylesheet attached to the class. They're not inline styles. Also, here's the video on the top default styles to set in Webflow.
ua-cam.com/video/blFg-sKh-nk/v-deo.html
Timothy Ricks at it again boys!! Idk about you lot but I level up after each video and tbh I actually saw myself as a webflow expert ERM NO not when Timmys about hahah! Besides liking, commenting and subscribing how else can we support the big dawg man like HOMERTON T?
banger video, as per usual.
Not related to the topic, but more about your videos. How do you achieve mouse click effect, where every time you click the course scales down a bit.
I use an app called Screen Studio. It’s super smooth and user friendly. www.screen.studio
Hi Tim! How could you account for a situation where a client updates this heading but you still want the text to be 100% width of it's parent even though the length of the text has changed?
Is there way for the font size value to be dynamic?
As always, thanks for such great content ⚡⚡⚡
Hi Luke, I have a cloneable that does this, but it requires some JS to work.
webflow.com/made-in-webflow/website/dynamic-text-full-width
Great video as always, Tim! Is that correct that not all CSS properties are supported? After watching Kevin Powell's video today, I went on to try background-repeat, but it was not to be found in the list. :(
Thank you! Yes, Webflow's still working on support for some properties that were problematic for them like background.
In regards to 1:26: wouldn't using the font size units as a % or rem do the same thing?
Good question! It isn’t the same thing. REM is usually based on the browser default font size (16px) so it’s not fluid. Even if we changed the html font size to include viewport width (VW), it wouldn’t be the same because VW is based on the width of the browser while CQW is based on the width of the container. Using % for font size means it’s based on the font size of its parent, not the width of its parent. So if the parent had a font size of 16px, a child with a font size of 200% would be equal to a 32px font size, which also isn’t fluid.
Yaaayy!!! 🔥
game changer!
It's amazing
Great
Hug
You can remove all your custom CSS tutorials now...
Not quite! There’s still a lot that can’t be done natively, but this is a great step in the right direction