🐞 - Demo should not use any of "tui-" classes other than spacings

[Clindbergh]

Reproduction url

https://taiga-ui.dev/form

Description

Some of the core layouting building blocks used in Forms is missing documentation. These elements (like row, skeleton, table) seem to be useful for a lot of other contexts, but some more documentation how they are intended to use them would be helpful.

Taiga UI version

4.14.0

Browser Used

Firefox

OS Used

Windows

[waterplea]

It's on purpose, we're phasing out those global styles. I'll change this ticket into "remove deprecated global styles from demo". They were initially released by mistake as our internal set of styles that was a subject to change by another team. We plan to drop them by v5.

[Clindbergh]

Thanks for the quick reply.

I encountered another issue and I was wondering if this is related. tuiSurfaceLayer is used in some demos (like selectable CardMedium), but I cannot find any definitions for it.

Also: Is the website open source? It would be helpful to understand how the demos work.

[waterplea]

tuiSurfaceLayer is part of Surface directive, it's a general use container with some styles preset for itself, ::before and ::after element to simplify creation of various cards with colors, images, gradients, animations etc. When the container itself is not enough, for example, when you want a card to be selectable through checkbox or have a video playing in it — you can introduce layers with this directive. It is purely for CSS purposes.

The website is open source, the entirety of taiga-ui.dev is in this folder:
https://github.com/taiga-family/taiga-ui/tree/main/projects/demo

[Clindbergh]

Ah, that explains it. I tried to use a selectable card, but had problems to set it up. I assumed this was due to the missing tuiSurfaceLayer directive (or what I thought would be a directive).

Good to know about the website. Thanks for the quick response and elaboration.

---

Regarding my original request:

They were initially released by mistake as our internal set of styles that was a subject to change by another team. We plan to drop them by v5.

The form example was actually pretty helpful. It was the only sample that displayed a full form demo where a lot of capabilities are shown. Since you're planning to drop these classes in v5: Do you recommend any other framework for layouting (perhaps known to work well and with similar conventions as taiga)?

[waterplea]

A lot of people use Tailwind with Taiga UI and like it. I don't use layout libraries myself as I prefer to style all the pages myself.