Riot.js use css library for tags or components

Question

I have been making tests with Riot.js, making tags that would let me or another programmer load information from a github user or his repos.

Right now the tag for the user is <github-user-widget></github-user-widget> , and for the repos it is <github-user-repos></github-user-repos> .

I know that Riot.js lets you have css styles for each tag, but in some cases I see I am going to need a unified style for all the tags; giving all the tags the same font or using a grid system would be an example.

If I load a CSS library like Bootstrap or Bulma.io on the index.html I can style my Riot tags in a unified way, but then I would have to use this library for all my application or website.

I imagine being able to post this tag as a module that other people would just import to their applications, without having to change their CSS configuration, just importing, in this case, Riot and the Riot tags.

My question is: Is there a way to use a CSS library to style all my Riot tags or components in a unified way, without having to use that CSS library for all my application?

Answer 1

At this time not really. You can use HTML transclusion / yield and have one master component that all component live inside. That master component can have the shared CSS / JavaScript, but the reality is that this is beyond what Riot should do, and generally a bad idea. I recommend creating a NPM, and Bower package, with the needed dependencies so that others can consume your components. Its fairly standard to have to include a CSS and JavaScript file, plus if they are already using Bootstrap, you really don't want them to be forced into including it twice.