Join the Webstudio community

Updated 3 months ago

Craft token naming and default tokens

At a glance
Thanks for all the feedback on Craft. We have some things that still need to be finalized.

  1. Token naming convention for parent > child relationships. For example, there is a testimonial that has a picture, quote, and name. What should the Token names be?
  1. Default Tokens that nearly every project will use. Are we good with these as a starting point?
  • heading-1 through heading-6
  • link
  • margin-auto
  • container
  • section
  • button with variants is-button-secondary and is-button-small
Please review the Craft doc and see if there's anything else you want to change/add. https://docs.webstudio.is/university/craft
O
J
29 comments
imho we shouldn't add any standard tokens that are not utilities
I would consider all those utilities
shouldn't they have is- prefix then?
why would section be a utility if it sounds like something that should be a semantic token, to me a utility would be more "truncate"
"is" is for variants. like button is-button-secondary

To me section doesn't describe its contents making it more a utility. Same with container. They carry out some function without having a care about what goes inside
I think section is more like a token that should be semantic but forgot it's purpose on the way home
do you have examples styles you would put on section for example?
every section of the website
same with container
I get that, but to discuss if it should be semantic token vs utility, we need to see an example of styles that would be theere
padding? tha'ts it?
and heres a section with a modifier
Attachment
image.png
maybe this is a semantic token then, not utility, its just it's semantics is being a generic section
the name is fine then, bu its the main token, I guess you would have several different types of sections
e.g. hero-section highlight-section blog-section etc if they have different styles ofc
but you would start with a generic one if that's a fit
I still don't know if it amkes sense to provide them out of the box tbh
are there any good existing libraries that have his figured out?
them
What else are we talking about?
"them" - default tokens
so I can use h1 token and you can use heading-1 token?
Ah for some reason I thought these would be added to the Craft template, you are talking about guidelines
I think guidelines could probably specify a bunch of recommended naming conventions, but not sure if they should be in the default tokens list in the Craft template, a bit afraid introducing stuff people don't want to use.

But on the other hand, the namings like h1 vs heading-1 would be annoying
Ah for some reason I thought these would be added to the Craft template, you are talking about guidelines

I'm talking about both. If we decide on a guideline, then why not add a style guide page to the template?

Like anything in Craft, it's optional.

1 item in the tempalte is Open Props
2 item is style guide
3 item is components if we go that far
true, in the end, if you want to delete something, its easier to delete than to add it from scratch manually
yeah well really what Im trying to solve/prevent is clashing of projects. So if we insert something from another project/template, will it adapt to our project or introduce different things making it unmaintainable.

Say I use heading-2 and I insert a team section from the marketplace. If it also uses heading-2, it adapts to my theme
My only concern with standard tokens, it preventing duplication on insert
Add a reply
Sign up and join the conversation on Discord