Changing the size of an existing heading style

At a glance

The community member is trying to understand the process of making changes to styles across their website using WebStudio. They ask if they can simply change the size of an H6 heading from 24px to 32px by updating the style in Style Sources. The comments suggest that using tokens is better than styling all H6 elements, as headings are for semantics and can be styled as desired without affecting accessibility or SEO.

The community member then shares their experience of experimenting with tokens, where they convert an "H6 Heading" class to a token, but find that removing the original class removes the styling, and the new token doesn't seem to replace it. They express confusion about the relationship between classes, tokens, and the various style settings in WebStudio.

The community members provide some guidance, explaining that creating a token without any properties attached to it doesn't actually copy over the styles. They suggest renaming the "H6 Heading" token to something more meaningful, like "Card Title", and using generic names for tokens to make them more reusable. They also mention that there is currently no way to view all the tokens created in WebStudio, but that it's on their roadmap.

The community members also discuss the potential benefits of having a design system or style guide feature within WebStudio, similar to what

Useful resources

ssteve

I might be over-thinking how to make changes to styles. 😉

If I have an H6 Heading used across my site which is 24px and I wanted to change it so it was 32px Can I just select the H6 Heading in Style Sources - change its Size to 32 and.....that's it?

Seems to work but I wondered if this was the correct process for making changes to styles across all pages in my site.

Thanks

12 comments

JJeremy

Hi Steve, you can use tokens on whatever you like. It's better to use them than styling all h6 elements.

The headings are for semantics which will affect accessibility and SEO. You can make them look like whatever you want with no ill-effect.

Side note: In over 20 years, I haven't personally needed an h6.

ssteve

Thanks @Jeremy - I'm not sure why I used H6 as an example, it was just a random element I clicked on. lol! 🙂

JJeremy

@steve do the tokens make sense to you?

ssteve

That's precisely what I'm trying to understand / learn now.

I've watched videos on the WebStudio channel and thought I'd experiment by pasting in some of the free samples from Flowbase.co (https://www.flowbase.co/components?platform=webflow&collection=flowui)

When I select a heading in one of the pasted-in components, WebStudio shows [H6] -> [H6 Heading] inside Style Sources. These are classes , not yet tokens ?

So I then thought I would use "Convert to token" in Style Sources which got me this: [H6] -> [H6 Heading] ->[O My Token]. The O being a circle (to indicate a token?) and the name of my choice.

ok so working from left to right we now have [H6] -> [H6 Heading] and my newly created token which I assumed inherited & now contains all the values of H6 Heading at the time I created the token.

That being the case I can safely remove the H6 Heading class as all its values must be in the new My Token token. But no, removing H6 Heading removes the styling that it had previously supplied and My Token doesn't seem to stand in for it.

So clearly I haven't understood at all. lol! 🙂

ssteve

Is there a place I can go to in WebStudio, to view the classes and tokens?

ssteve

Things like Base Is Base the same as Global Root?

What is the significance of the red items in the CSS shown when I toggle Style -> Advanced. I thought it might mean they inherited their value from Base, but Base is shown in a pinky-purlple, not red. (please see screenshot attached)

I'm getting a bit confused and struggling to visualise how things relate to each other.

Attachment

JJeremy

I think I get what you're struggling with from that video:

The "local token" (blue one on the right side) has no properties attached to it (there would be a dot in the middle of the circle if it did). So, converting it to a token converts nothing.
You might want to rename the "H6 Heading" token to something like "Card Title". You could then re-use it across multiple components that you create and it would still have meaning. (see naming help here https://docs.webstudio.is/university/craft#tokens)
The "red" attribute means that another token has that value and is overriding. See this link - https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder#label-colors

Notes:

You can move tokens in relation to each other (not the blue "local token" though. Test this out to understand how it works by setting 2 tokens with different values on the same property (eg, color: red, color: blue). Change their order.
You probably don't want to name things like "h6" or "red", use generic names so they can be reused logically. (eg: "Small heading" and "primary color")

JJeremy

I don't believe there is currently a way to see all the tokens you've created, but I think it's in their roadmap?

JJeremy

Found it. https://github.com/webstudio-is/webstudio/issues/3901

ssteve

Hi @Jeremy

The "local token" (blue one on the right side) has no properties attached to it (there would be a dot in the middle of the circle if it did). So, converting it to a token converts nothing.

Ah right. I had assumed that, working from left to right in Style Sources; H6 Heading would have its styles in place, then if I created my token [to the right of H6 Heading] it would by virtue of inheritance adopt the styles from H6 Heading. Then I could remove H6 Heading and use my token instead as it would have effectively copied over the styles from H6 Heading upon creation.

But from what you say, creating a token starts with a blank sheet of style information that I need to build up?

On the subject of Tokens Manager (issue #3901 ^^) it would be fantastic to see something along the lines of Core Framework inside WebStudio (https://coreframework.com/) It's great at surfacing and managing style information. There is in fact a video on youtube showing Core Framework used with WebStudio, but tbh it's mostly "this is how cool Core Framework is - and look, you can paste its styles into WebStudio"

For people like me coming to design tokens, and to a certain extent CSS styling, the fact that once created tokens and classes "disappear from view" after creation can be a little daunting. Having an area of WebStudio that acted as a design system or style book for the styles & tokens would be really useful for anyone who works visually.

Really appreciate all your help, thanks. I'm getting there. 😉

JJeremy

I'm just a guy who likes Webstudio, I'm not part of their team. I have zero control over what they build. 🙂 That Core Framework sure looks cool though - I'll try it out for my next project.

ssteve

Also happened to notice a video of Webflow last night, they seem to have a really nice Style Guide feature: https://webflow.com/made-in-webflow/website/Webflow-Style-Guide-Starter

Add a reply

Join the Webstudio community

Changing the size of an existing heading style