When to use classes versus components

[Jack]

I am thinking through when to use classes in my project versus components for elements that don’t include workflows. For example, it is possible to make any text within the project a component, with ‘Color’ and ‘Type’ properties (such as H1, H2, H3). An alternate approach is just using a ‘heading-1’ class with a ‘color-primary600’ combo class. A similar example could be with icon sizing and colors.

Any best practices to keep in mind here? Could having 30+ components (all text elements, icons, and spacers) on a page hinder performance? Would having each text element with a bunch of switch() conditionals cause rendering delays?

Planning to test myself but wondering if anyone has already gone down this path with success or failure . Using components seems much quicker and introduces easy-to-maintain consistency throughout the app but may have some tradeoffs.

[luka]

• For text, colors, shadows, spacings - Library styles
• For general style things like cards(combination of background color, shadows, radius etc) - Classes
• Repeating UI items with logic(Like a specific card for real estate listing) - Components

[Jack]

thanks @luka! what is your reasoning there (i.e. performance, ease of use, etc.)?

I don’t like using the ‘typography’ section of the Library styles because you can’t make sizing dynamic – I want my fonts to be small on mobile versus desktop. SImilar to spacing, this would ideally be dynamic to make spacing smaller on mobile. This is why I’ve used classes for text and spacing in the past.

[luka]

I would still recommend using styles, but you can indeed use a class to manage them on responsive level. We’re still discussing whether we want to implement breakpoints inside typography styles.

It’s just how applications are built in code and for a reason, clarity, performance etc. Even though this is no-code, we still try to follow the same principles

[Jack]

sounds good. thanks @luka. for now, I’ll have two folders (Desktop and Mobile) within typography and have a formula on the classes that swaps the typography based on breakpoint.

[StefanSan]

Hi Jack,
that sounds very great. how you do that?
i need variable fontsizes for the different breakpoints, too.
for me it`s not clear, what to do with typographie without this option.
how can i connect a formular with the class and both with the typographie?
is there a link to a direction?
thanks for help.

[Jack]

Hi @StefanSan – you can add your typographies in folders (Desktop, Tablet, and Mobile) and bind them on the class so that they switch based on breakpoint. I’ve included screenshots of 1) the design library with the added typographies and 2) the binded formula that looks at breakpoints and switches the typography.

FWIW – I’m not sure that this adds that much value versus just having the class font size change based on the breakpoint. Unsure if I’m going to scrap it as it might be overly complicated for no benefit. Hope that helps!

[StefanSan]

So great! Thank you very much!

Where can i find such commands as “switch”?
Is there a list for that anywhere?

You have an other plan to make fonts responsive, cuase you say you dont know to do this further.

[Jack]

In the formula tab (the last one), you can see all formulas and their descriptions.

I was noting that you can simply not assign a typography to a class and update the font size at each breakpoint (versus using this formula that switches them). These text classes should hardly ever change so there seems to be little benefit in using typographies if you want responsive fonts.

Hope that helps!
Jack

[StefanSan]

Hi Jack,

thanks again.

I tray to use only classes - that works also, without typography.
One class for h1, one for h2 and so on.
For what i need the typography thing?

One more question about formulars…
If i like to have special breakpoints.
Can i set the font-size with a formular like this?

switch(context.screen?.[‘screenSize’]?.[‘width’],“1000px”,“60px”,“700px”,“30px”,“500px”,“10px”)

or like in the picture with a variable with a fontsize?
variable = 60px

thanks for more inspiration.

[Jack]

Typography is a bit duplicative right now and doesn’t provide much value, to my understanding.

In terms of your ask about breakpoints, I don’t believe that WeWeb allows you to add custom breakpoints at the moment. Your formula would work for this, but I wouldn’t hardcode the breakpoints for each font. I would instead add the breakpoint numbers under the ‘Spacers’ in the library (maybe within a ‘Breakpoints’ folder) and then use this value in your formulas.

This way, if you want to change in the future, you are only changing it in one place versus many places.

Hope that helps,
Jack

[StefanSan]

That is very useful!
Thank you!

You notice, i am new to weweb.

So i try to work with the switch formular, but i think, i must use the “≥” operator.
and then i get an error.
If i try the “if”-statement, it also don`t work…

you have some advice for me? (again)

[luka]

Your if formula should be correct, what do you want to be the result in that case?

[StefanSan]

Thanks for your answer.
I like to change the fontsize depending on the browser-window-width.

The formular works, if i set a pure number (f.e. 500) or a variable instead of the spacing-breakpoint-value that comes from the spacing-librarie. But i like to take something i can handle in a librarie.

Ok, variables are also ok, but why do a value from a librarie dont work?