How to Add CSS Classes to Silk UI Components?

How to Add CSS Classes to Silk UI Components?

  

Hi all,

Can I add my own class to a Silk UI component?  For example, I want might want to:

  • Add the class "Clickable" to the CardSimple component, so that .CardSimple.Clickable works.
  • Add the class "Unread" to the TileNumber component, so that .TileNumber.Unread works.
  • Add the class "Subsection" to the Section component, so that .Section.Subsection works.

The key here is that I don't want all cards, tiles, sections, etc. to have the class, but I want to be able to set the class based on other factors.

The way I could see doing it is to open Silk UI and copy the component from it, then make a copy in my application.  Then I could give it a parameter for the class name I want to pass in.  I hope there is a better way to do it that would allow updates to Silk UI to be picked up, though.  Any suggestions?

Thanks!

Hi Scott,

A way around copying the components would be to use javascript to inject your classes onto the desired elements. While its not a great solution, it might be better so that you can keep up with the silk ui updates and not worry about the copied elements falling out of date.

Just a thought.

Justin

Justin Babel wrote:

Hi Scott,

A way around copying the components would be to use javascript to inject your classes onto the desired elements. While its not a great solution, it might be better so that you can keep up with the silk ui updates and not worry about the copied elements falling out of date.

Just a thought.

Justin

I hadn't considered that - thanks!  I'll look into it and update to say how it went.

     Scott