Developing Apps - CSS

Hey all,

I am going through the developer documentation and I was wondering if there was a way to use CSS in the apps I develop?

In my particular case, I am trying to create a product “card” which looks similar to this:

https://situlive.com/products/desktop-pcs

Any help would be greatly appreciated.

Hi! Welcome to our community :hugs:

Rocket.Chat Apps will only run at server side. The way to interact with the UI (Web or Mobile) is thru the UIKit blocks.

So under the hood, Rocket.Chat has a “protocol”, where you specify how some UI elements will be presented. From there it is rendered accordingly for web, mobile or desktop when triggered by the App.

So for the time being, you cannot provide custom ways to render elements other than the one provided by our UI Kit.

Let me know if this helps :slight_smile:

Hi,

I feared that was the case. I have already played around with the UI Kit and although it looks “ok”, it leaves a lot to be desired when trying to create more advanced blocks. I would, for example, like to be able to align the buttons or apply CSS (which you have said I can’t). I assume there is no way I can create my own custom blocks within my APP with their own CSS?

Cheers

For now there isn’t.

We have had some discussions around this. The problem is that, while the css will work ok on web versions, it will have none to little effect on the mobile land.

even though, there are some use cases where this comes handy, so we were discussing how we could allow custom rendering that would be provided by an App.

So considering a use case where a XML is sent to the channel, and when you have a app installed, it would be able to render that xml differently.

Anyway, those are in early stage discussions… :slight_smile:

Regarding your product card, I checked out the link you provided and it looks really sleek. One thing I noticed was the use of CSS to achieve that polished look. So, to answer your question - yes, you can definitely use CSS in your app development to create a similar product card. You might want to take a closer look at the CSS code used in the example to see how it was implemented. By the way, I came across this really cool article about online games that pay real money. It’s an interesting read and it got me thinking about the potential of online gaming as a side hustle. Maybe you can check it out too and see if there’s any correlation between CSS and online gaming.