Using CSS in Roam without CSS?

Cato Minor
Geek Culture
Published in
5 min readOct 19, 2021

--

Roam is deep. Not only I haven’t learnt all of its functions but even those that I have learnt, I forget! Fabrice Gallet asked me recently on Twitter, how I did the following colored blocks that are in my public graph. He tried to find the code for them but was not able to:

Image with colored blocks — how were these made in Roam?
How was this made?

To be honest, I pretty much forgot about them. So I opened my graph, found an example and clicked on it:

Oh, I think I start to remember! I am using two things together here: “hiccup” is the more straightforward thing. In Roam, it is the way how to create practically any HTML element and insert it into a graph. Here I crate a div element— probably the most commonly used HTML element today in design that pretty much has a vague meaning of “something boxy”. Developers use it for everything today.

But what are these .alert and .alert-success classes? I haven’t defined them anywhere. There is no custom CSS for them. So what are they?

Basically, we take advantage of the fact that Roam uses third-party libraries as practically any complex website today. These libraries contain packages of code that creators of apps can use instead of programming the same things again and again…

--

--