Grid & Diamonds

The more components that I have, the more errors that can be easily perceived, so I need to put a little bit of love for each component.

I wanted to create a diamond. With CSS is quite easy: You use two triangles, and each of them is made by a span with a width and height of 0 and the desired border width.

Grid & Diamonds


Small but really useful. After spending a lot of time with the grid and the diamonds, now we can see where we are:

Edit Events

That was difficult. Seems like to render an element outside the current HTML structure, you use something called portals. After knowing this, it was easy.

The second pain point was FORMS. I went with the always handy material-ui. More precisely, the beta of the 4th version. With the fear that I might change the UI library in the future, I created a thin abstraction layer over material-ui to prevent the application from knowing that it is being used.

After that, we have usable (but minimal events).

edit events

You can try this in

Let me know what you know in @guillermooo.