Join the Webstudio community

Updated 3 months ago

Open props

At a glance
In order to be sure: CSS Variables from Open Props are loaded by default on Webstudio thanks to Craft?

-> Without Craft they are not loaded.
-> Is all the Open Props library loaded or not?
-> @John Siciliano you just add some Open Props variables but not all, that's right?

thanks guys
Attachment
SCR-20241017-mdnq.png
2
B
M
J
29 comments
That is just page name in the script
Craft is regular marketplace project and it is based on open props. No external stuff is loaded
We added only supported stuff from open props
No dark mode, animations, and no masks for now. Filters and transition easings are coming soon
But you are loaded open props by default when we are loading Webstudio (without Craft) or not?
Open props is a set of variables in craft project
No special logic there
You can build your own set of variables and share with markeplace
Ok all right! Thanks you Bogdan!
So do you know if all the open props properties are already on Craft or just some of them?
We added only what is supported in webstudio
I'll be making a video about this jfyi
john I like your name better then vito corleone πŸ™‚
What if I wanted to "share" it with myself? Sort of like a boilerplate to start each new project off of. Would that be possible to do as of right now?

One issue I find with Craft is that for my own needs and ways of working it feels like an overkill. Like, why would anyone need all those colors in every project? πŸ˜…
We gonna add account level marketplace projects soon
I get how it seems overkill, but lets say your brand uses some green color and gray. You change out those values to match your green and gray and you can get rid of the rest.

Then if I share with you a section that uses gray variables, itll adapt to your theme.

For webstudio we use the attached colors so I mapped those and not using the others. But even if your brand doesnt use that many colors you can just choose the ones you need.

Or if youre use like two total colors then scrap them all and just call it --color-primary and --color-secondary πŸ˜…
Attachment
image.png
Appreciate your insights, @John Siciliano πŸ™

I agree with all you said, in principle. In practice, at the moment, that would mean having to get rid of about 150+ variables for colors, which would require lots of clicking. πŸ˜…

Thankfully, with the "[option] + click" shortcut, one can actually do that fairly quickly, so there's that.

Still, there are so many other variables that I don't even know what they're for. I'd say right now it seems like I'd import the "Craft - Open Props" page, and end up having to remove 90% of all variables. Feels like there should be a better way, somehow πŸ™‚

Am I making sense?
But all that said, I love love love variables ❀️
Yes... I thought about splitting Open Props into individual templates so you can insert just colors, just borders, etc.. just the way their website does. There was a reason I didn't though... which was... I can't remember hm
It was something technical IIRC. I'll think on it and If I can't remember I'll just start doing it and see if I run into an issue πŸ˜…
No worries, John. You are overdelivering all the time, as it is, as is the whole team. You guys are my absolute superheroes.
Global Root is Global. So I can't have a page that only has colors for example because by nature colors will be on every page including the borders page.

The Paste CSS feature coming next week will unlock this to an extent
I'm thinking, if there could be a way to somehow "pull in" variables when the need arises, and not presume the project will just need all of them, if that makes sense. Or like you said, at least import sets and subsets of variables, and then do only a bit of a cleanup afterwards.
Appreciate that! I've been loving CSS vars. The engineers crushed it.. Bogdan was the lead on that. AMAZING work
But yeah, exactly. The way Global Root works, I understand that it has to be an "all at once" kind of a deal πŸ™‚ I'm fine with waiting for a tokens & variables management UI. This already is amazing and such a time/energy-saver. Kudos to @TrySound πŸ™Œ
Add a reply
Sign up and join the conversation on Discord