Standardized Design System #193
Replies: 13 comments 67 replies
-
First off - i just want to say a huge thank you. This was the one thing i was really hoping Webstudio implements that was holding me back from making all my projects in Webstudio. Got a few points so I'll just number them!
Couple of questions for you guys:
Thanks!! |
Beta Was this translation helpful? Give feedback.
-
Congrats John for this doc! Really good starter. Here are my views and questions about your doc: CSS VARIABLESI don't know Open Props. I'm not sure I completely understand. Do we need to add this library? Will it be implement by default? Where the variables will be accessibles to changes them? Seems a good start but I'm not sure to understand how it's gonna work on WS. TOKENSCasing Abbreviations
Variants Sizing Internal Style GuideNot sure why you want to have a distinction between style guide and tokens? You want to be able to distinguish between these tokens coming from the style guide and tokens coming from Local? You need that because if you make a change on a token that coming from the Style Guide you need to change the Style Guide in order to keep track on the changes? When to Use TokensCompletely agree with this vision. NavigatorConcerning the naming structure, I started a document some weeks ago: https://uncode-school.notion.site/Page-Structure-93313b1e14a448bc92658fb21bebb308?pvs=4 It can be challenged! You choose "Page Wrapper" and I choose "page_wrapper" (snake case). I don't think it's very important? What we have to keep in mind:
I use a lot of HTML Embed in order to give more complexity to my projects on WS. I think it could be nice to find a proper naming for that like :
Really good work John. I like a lot your propositions. We have to keep in mind that :
This way it give a community some places to add other Style Guides on Webstudio (for examples you have Client-First, Lumos, Saadle Framework... on Webflow and I find that it's nice to have diversity and some different building experiences)
Here are my comments for right now. Cannot wait for what is going to follow guys! |
Beta Was this translation helpful? Give feedback.
-
Something for the later stages, once this standard takes off: we could have an app that lets you to check the things in the standard and even automatically fix them. Making the entire project extremely consistent. |
Beta Was this translation helpful? Give feedback.
-
Next thing that needs to be established is some default set of Tokens. IDK how many Tokens we should decide are a part of the default style guide, but I think, at a minimum, we should have the very basics. ProposalUtility
Those are the "basics" IMO. I'll also really like building with setting all my margins to 0 and having the following utility classes:
So I go to the parent of whatever I want to add a gap to, add one of these and it adds display flex and a gap. If I want to make it a row, then I switch to local and set it to horizontal. This might be a more personal way of doing things, though, so idk if it should be in Craft. Semantic
Much more we can add (and I think should), but just getting the ball rolling. |
Beta Was this translation helpful? Give feedback.
-
First off, I love the fact that these standards are being implemented! It's a fantastic thing for the community. I'm coming from a Client-first background so I will give my two cents, in no particular order.
Personally I think the second way is much more logical, much easier to read, and much easier to train people on. The first method is only going to make sense with some sort of delimiter, and that is going to have to be chosen arbitrarily. I think separating words in the same logical chunk with kebab-case and separating logical chunks with snake_case makes sense. |
Beta Was this translation helpful? Give feedback.
-
Sizes yes please allow abbreviations. |
Beta Was this translation helpful? Give feedback.
-
One thing that confuses me talking about the Design System is that there's:
So far I assumed we're mainly talking about the tokens in the Style Resources. For the CSS variables that is already solved using Open Props, or is there more to discuss on that? And then we still have the components in the Navigator, right? |
Beta Was this translation helpful? Give feedback.
-
I favor verbosity instead of abbreviations in everything except color tokens. --color-slate-25, --color-slate-50, makes sense, borrowed straight from tailwind. I DON'T like an ordinal scale for size tokens.... there is an cognitive assumption implicit in that that makes people want to figure out what --radius-1 is... is that 0.25rem? 0.5rem? 0.125rem? 3px? and people will assume that --radius-2 is double --radius-1, and --radius-20 is exactly 20 times --radius-1... which puts you in the unfortunate position of needing to decide between doing what will make sense in the mind of the user (even though it's entirely inflexible) vs doing what is the most flexible and adaptable. Also, it's hard to add additional tokens if I need them. I can go from xsmall to xxsmall to xxxsmall, ad infinitum, but I can't really go smaller than --radius-1.... it is very inflexible. TL;DR — --radius-xsmall, --radius-small, --radius-medium are all better than --radius-1, --radius-2, --radius-3, etc. --color-[name]-25 through 950 (from tailwind) work. I don't think 1, 2, 3, make as much sense... nobody tends to use that in the design system world that I have encountered... mostly they are 25, 50, 100, 200, 300 ... 900, 950. Being able to tie into Adobe Leonardo is useful... that could be a potential plugin / app. |
Beta Was this translation helpful? Give feedback.
-
We have to think about the ecosystem here... the folders function from Finsweet is a life changer... for this ecosystem to ever come out with something similar we need a parent-token_child-token naming convention like Client-first uses. |
Beta Was this translation helpful? Give feedback.
-
Here is something to think about in terms of Parent > Child relationship in instance naming. Generally there are 2 cases to distinguish:
In code, we rarely call it Testimonial Picture even though it may be only useful for Testimonial. We usually use folders or inline the component in that same file. So when its cohesive, we know its meant to be used for Testimonial. If you want to use it somewhere else - you move it to some "shared" folder which makes it explicit. If we had something similar, we wouldn't need to clutter the navigator with those long names. E.g. if we had components, then Picture instance would be inside of Testimonial component and wouldn't be visible outside at all. As we will certainly have components rather sooner than later, how can we avoid changing the convention later and prepare for that event now? |
Beta Was this translation helpful? Give feedback.
-
I filmed a short video with my thoughts on the token naming... showing the workflow in Webflow and how it could be applied to Webstudio. It's about 20mins long so if anyone cares to watch please use 2x speed, I'm not that interesting haha. https://www.loom.com/share/08f49a947f1441068fb2c6f6ddf7f1cc?sid=46b74d9e-0036-4364-90e9-f796c5c91e3b |
Beta Was this translation helpful? Give feedback.
-
Adding a suggestion from a DM I received in Discord (he doesn't have GitHub). HIs preference is to add for instances that use a semantic tag like this: |
Beta Was this translation helpful? Give feedback.
-
CSS variables enable us to create a standard design system that Marketplace Projects—and optionally our own Projects—can use. This shared system allows for easier collaboration and sharing.
Weigh in on what these standards should be!
The Problems
Let's say you insert a Marketplace template that has "h1" as a Token, while you use "heading-1." Now your design system is cluttered and confusing!
Having an unstandardized system leads to these problems:
The Guidelines 👇
The latest guidelines are now located in the docs.
What Next
Comment on any changes you wish to see and the rationale to back them up. Feel free to also comment on the things you like.
Once we agree on something, it will be added to the guidelines, and if there are tangible pieces (such as premade Tokens), they will be added to the Craft Marketplace Template.
Beta Was this translation helpful? Give feedback.
All reactions