How are the grid layouts used?

[roblevintennis]

I was looking at props.layouts.css and was wondering if you have a pen or sandbox that uses that so I can figure out how those work and are used?

[argyleink]

i dont yet, i play with that code live on a page.

they're meant to work more like mixins, but instead of passing params in a function, you pass params by modifying local scoped props.

[roblevintennis]

Ok

[argyleink]

if you make a codepen sandbox, do share it here tho!

[roblevintennis]

Not sure you're going to like this but…

they're meant to work more like mixins, but instead of passing params in a function, you pass params by modifying local scoped props.

This is pretty self-evident from reading the source, but, I mean, if folks are going to, by default, download this in their open props payload, shouldn't their be a couple of example usage demo pens or something?

I realize a lot of the trickery behind this is in the article referenced by @Afif13 (thanks for the link), but OP is a library that's supposed to make my life easier via its API; and if it's going to save the consumer time, shouldn't it be a documented abstraction with at least an example codepen from you? Otherwise, why shouldn't I just go create my own custom "mixin-like adaptive thing"?

I think this is fair feedback. Apologies in advance if its not translating as constructive but I don't know how else to put it. My point is I really think if only you, Temani, and a few other whiz-bang folks that have a lot of clamp et al experience can use it then its missing an opportunity.

[argyleink]

it's not shipping yet in OP because yeah, it's not as smooth of a usage experience as the tokens are.

[argyleink]

def agree that if/when it does ship, it'll need docs and demos on usage 👍🏻

[roblevintennis]

Ahhh ok, well the fact that it's not shipping with OP certainly refutes my assertions earlier 🤓🙂 Disregard.

[Afif13]

@roblevintennis here is the relevant article to understand the logic behind all those clamp() https://css-tricks.com/responsive-layouts-fewer-media-queries/

[roblevintennis]

I'm marking this as the answer because it's the closest thing to what's required to actually use the "adaptive mixin-like thing" realistically. I skimmed the article on my iPhone last night and got the gist but realize I will have to invest some more serious time to actually be able to use these techniques. Thanks for the link and writing the article Temani ;-)

[roblevintennis]

Ok, see me failing in the open here 😋 https://codepen.io/roblevin/pen/dyVMWRm -- I've at least learned that this thing is pretty much same as from your article placed into an abstraction 🤔

Anyway, I can't figure out how to set up the custom props correctly to reproduce what you have in https://codepen.io/t_afif/pen/xxqKgZe @Afif13 -- I see how cool this could be in terms of not needing a media query...just wish I could better grok it lol

[Afif13]

since it's not yet shipped, the variable is not defined so the code won't work. If you inspect the element you will see that the variable is in "gray" color and not "blue" color

[roblevintennis]

Yeah, makes sense now that I realize it's not being shipped 🤦