Member-only story
Using CSS in Roam without CSS?
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:
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…