Hi, box is a div by default, why is this an issue?
I wish when adding a token it automatically rename the left panel naming as well.
What if your token is functional, for example: "small", whould you like your container in the navigator to be called "small"?
Id' be curious to see your navigator labels and token names. Most of mine are different so I'm curious how you build
I have my naming like this
basically if it's from relume it's fine it's already renamed but if you start from zero, the div will be just box box box. so it's always double work to rename those. no sure why you guys make it like that.
also other important features
- a collapse all feature like "option Z"
- command enter to get the style source
- command shif enter
- shift p + command enter to push and update > currently this open the setting icon
your problem originates with relume, which has a convention designed around webflow's weaknesses with combo classes .... this is a bit unfortunate
collapsing all in the navigator tree? works by option+click
command shif enter
what is this one? webflow doesn't have it
It's Craft guidelines to name every box, but the names of the boxes often don't directly reflect the tokens.
Take container-large for example, why not just call that container? Or section_layout395... I have no idea what that is looking at the navigator.
See attached. This is semantic and often independent of the tokens. Tokens are for design and navigator labels are for navigating by humans. Sometimes they are the same which then it's redundant to rename the navigator, but often times they are different
Here's a common example. Card is my token, but Problem is my navigator label. Card is generic and for styles but Problem is specific and semantic
command shift enter goes to rename the token name
option click is perfect!
@Oleg Isonen @John Siciliano but this is frustrating as we have to rename the layers and add tokens. How can we reduce the double work?
Can you share examples of where you are doing this please?
here's an example, where I'm adding the tokens to reuse styles but at the same time I'm having to rename the layers name. This might be a super basic example.
but sometime in a deeper layers where we don't need to rename layers name if we can add the same token name in the layer. (2nd screenshot)
When your instance name is Blog, the token name is section. How can it be reused?
Hi @Oleg Isonen I would say when you add a token .w-blog it automatically rename the left panel. That’s it that’s all what matters. But you can also later edited it the way you want it. Maybe rename it later on to blog or blog-wrapper. It’s Just an auto rename. So it’s not box box box and box. That we must “name” it every time we add a new box. Does that make sense though?
What about your first case where you have token Section but you named instance Blog, would you want it to be named Section by default?
Yes sir. It should be the first token. When you have let’s say 3 token in one box.
Maybe this could be made an option for certain workflows, it def. won't make sense for everyone
I know examples exist, but can you share a real use case where your token matches the desired navigator label?
For me, the only thing that would be consistently accurate is "container" but even at that, Craft guidelines are to title case labels
This makes sense for everyone though. Let me ask you
- who want’s to see box box > box for all their structure
- who wants to do - add a token and then rename the left panel after > this is a double work.
I would even suggest when adding an element
It should not even say “box” but it’s reflect to the tag like
Div img section > if token style is empty
Once again, we are talking about diffferent naming structures. You assume that the first token name will be useful, e.g. Post, or Card or something descriptive (semantic), but this is by far not always the case, so you will end up with utility names like "small" or "gap-s", "container" etc.
So if we do this, instance name will be same useless and will still need renaming
who want’s to see box box > box for all their structure
no one. It's considered best practice to leave no box unnamed.
who wants to do - add a token and then rename the left panel after > this is a double work.
It's double work if the token is the same as the label. I'm asking for you to provide examples where this is the case
If you always put semantic name as a token first - makes sense to apply it to the instance, if you use more utility names - doesn't make sense.
I think we should just make this a setting so people who use semantic name first can turn it on and enjoy automatic naming
What if we do this convention based. If token starts upper case, e.g. Card - we apply this to the instace name. If it starts lower case e.g. gap-s - we do nothing.
Problem solved and this is even conform to Craft spec
If this were enabled, I haven't seen a scenario where it would help him (yet). Asked twice and so far no example where token = label name.
But lets assume the desired effect is token name causes a rename of the instance.
- At least within Craft, the majority of token names will not be viable label names. So this "double work" problem isn't avoided and can be confusing to know what was manually names vs auto named.
- Do we think the behavior will be reliabe? What happens if I rearrange tokens. Remove all tokens then add some back? Name the label, remove all tokens, then add some back?
- Is this on boxes or other components too?
Craft spec is to name it specific. So if token is "Card" but the implementation is a testimonial, then it should be named 'Testimonial'
ah these are for token names but not for instance names, right
Basically, the tension here is because user doesn't want to use Craft convention and their names are not based on instance-semantics
They come from relume: "header-primary_content" none of this is instance-semantics, its purely styling semantics
I guess before were to add an option, Id want to see a builder link of a project where they are doing 2x the work and happy with the navigator labels.
Im concerned that people are either
A, inheriting Webflow ways which many of the naming conventions came from Webflow limitations (as told by Client First)
Or B, tokens aren't being used most efficiently, aka bad practice.
Or C I'm wrong, very possible.
Or maybe if A or B is correct, we still give the option because thats what people want.
but even if its B, still what if there is a way to automate some of this and make it less annoying for that workflow?
We can. My hesitation comes from we are supporting it kind of in the senes of encouragement.
Webflow sites use like 200% more classes than webstudio tokens. People don't realize the power when they stick to webflow ways
definitely, but we will still have tons of peopel doing that
that's why I would add an option, put it in the settings and add a disclaimer
seeing the generic names like section/footer/div
testing it, you can't name those thigs in the Layers panel
naming of classes on the right is based on tailwind because its designed specifically for tailwind
I really don't get what you mean we need to learn from that
Just went over this thread. I think Im starting to understand the separation between naming tokens and naming in the navigation bar. Excited to learn more and get better using Webstudio
