Targeting Cards

[easaw]

Hi,

Is there a way to target specific cards with IDs or Classes?

Is this something that might be added?

This project is something I've hoped for, for a long time. So, Thank you!

I'd like to be able to write CSS that, yes, applies across-the-board; but also can be for specific cards, or perhaps, types of cards etc.

Just like one would style a div, but not another, I think it would be very useful to style cards individually.

Thank you.

[dcapslock]

Yes. This can be done. You can use existing CSS classes with CSS targeting those classes. You can also add a class under uix: and that class will be applied to the card element. Also, each element where Uix applies gets a class - e.g. a heading card gets type-heading.

If you share what you are trying to do I can share some tips for you.

[easaw]

I think you've already given me the answer, so thank you!

But if we say take a button card; I'd like to be able to style the border, background, colours, as well as animation. Maybe even add a background image.

I assume I could do fonts (locally), but I don't need that ...yet!

[dcapslock]

Yes, first look for CSS vars as they make things simple.

For animation, keyframes always need to be in the light DOM of the element animation is applied to. So if the element is in shadow root then you need to use a yaml selector for your keyframe, even if animation itself can be applied by a CSS var.