Interesting!
Though isn't the point of fluid to continuously adapt to the screen size and not have rigid jumps in size?
I've been using the fluid presets in open props and liking them
How do you choose your presets according to your font ?
Like which variable am I assinging to each of my headers? Or what do you mean?
How do you attribute variable ? I don't understand value : clamp(0;75rem, 2vw, 1rem). What size is it ?
The size is fluid 🙂 It's preferably the middle values but will stop at the first value for the smallest size and the last value for the largest size.
it uses the screen width to determine the font size. Bigger screens allow for bigger fonts and smaller screens reduce the size. That way it fluidly adapts from the small breakpoint to the big without an arbitrary jump between breakpoints
Did you do a video that explains this point. It's the first time for me and I feel a little bit lost.
There's a recent video from Kevin Powell that talks about the bad use case for using viewport units for fonts. So the initial calc might have some issues... @Romaric BRN You might want to check that out.
Interesting I just watched it. So I guess clamp fixes that? I just tried zooming in and out on the site im using fluid typography and it worked fine and Im using clamp
Maybe? I haven't tested it. Just wanted to bring up a potential issue for awareness.
I'm guessing that once it hits the max, it no longer uses vw but the max value which then the browser can increase no problem
@John Siciliano BTW, I saw you're using --size-fluid-{x} rather --size-{x}. I know it's not the same but your recommand to use fluid rather a precise value?
(I know it depend the case but I used more fix value on Webflow than fluid so I'm quite a beginner on that subject even if I worked on that theses last days)
It's a bit experimental for me but yeah I think so. For many areas spacing is used, I want it bigger on desktop and smaller on mobile. So with fluid, now I don't even need to change the size per breakpoint. Define once and good to go.
In the past I've used fluid, but had a hard time putting the values together. Open Props did the hard work so I think I'm back to using it.
All right that's what I think! I often define gap with fix sizes but it would make sense to have fluid size
It will work best with container queries but we do not support them yet
You can see them in use here. My card padding, font sizes, and gaps all change based on screen size
Thanks. So it seems fluid size is the go to!
I learn a lot CSS technical since I started with Webstudio! Love it!
Honestly the Open Props lib has taught me a lot too. Lots of cool tricks in there
It's not beginner friendly but the Style Guide will help!
ChatGPT is a big help to understand how to define each value according to typograpahy
Where did you learn how to apply css variables to space size ? Do you have any piece of advice ? This is a game changer in web design. It's amazing!
Yep, great one. We may integrate it in the future as app
Good ressource!! Thanks @Romaric BRN I didn't know it
You're welcome. For once I can help 😅
The calculators help a lot when creating the values. But with open props I didn't use any because I'm just using the out of the box values from the fluid sizes. I just arrow through until I like what I see 🙂
