Using WeWeb Classes

Ask us anything How do I?
1

Hi Community,

Has anyone figured out a nice way to use States and Classes together?

My specific challenge is having a Primary, Secondary and Tertiary button. I want for each of the button styles to have their own unique Hover and Focus states, but it seems like the states are being applied globally.

Thank you in advance,
Chad

3 Likes
2

@Quentin your live stream demo was really helpful, curious if you have any insight here as well?

3

Hi @chadsmithclt :wave:

Mmm I’ve been thinking a lot about it because I’d like to record a video where we put together a complete style guide page similar to what many Webflow templates have.

Buttons are what I’m struggling with most because you can have buttons with icons, without icons, with icons on the left or on the right, etc.

The best I’ve come up with so far is what I show in this video.

Instead of having a button class and primary, secondary subclasses, I have:

  • 2 classes on each button (the btn class and a btn-primary class for example), and
  • I have state subclasses on related to my btn-whatever subclass

What do you think?

Would that approach play well with your use case?

Don’t hesitate to let us know if not! I know the product team is still very eager to get feedback to improve the class system in WeWeb.

1 Like
4

Hey Joyce,

I like that idea a lot, thanks for sharing! I think that will work for us.

Folders may be a nice addition. For example we have a Primary, Secondary, Tertiary and Link buttons. Each of these buttons have S, M, L and XL which results in about 16 classes just for buttons.

The number of permutations is growing more rapidly in other areas such as Table or Data Grid rows.

Also would be amazing if Classes were available by default across the entire Workspace! :heart_eyes:

If I understand you correctly regarding Webflow, it would definitely be nice to define project level constraints or classes for page level styling.

For your example about icons in the buttons, I would love to handle icon classes separately. How this might work is creating various classes for my icons that I could then reference within my buttons depending on the state.

1 Like
6

Duplicate class including subclasses :slight_smile:

7

IMO weweb should allow multiple classes collection like for primitive ones ( with all the variants classes ) and a cleaner one with a more component vibe that will reduce the number of classes to apply each time

Once a component has his primitive it can then be sort of component ready, changing the primitives would impact the main classes collection
Basically like figma variable
Don’t know if it’s the right path but it’s atm the way I do it
And I use a « . » for the main classes group in order to have them on top

1 Like
8

Great suggestions! Passing them allow to the product team for exploration :slight_smile:

3 Likes