Sebastian's coding corner

I have been working on a personal project for the last month or so, and I tried a lot of Frontend component library frameworks, like Material UI and Bulma, to find the perfect component library for me (if there is one).

I am a very picky person concerning the frameworks that I use. This time I had in mind these points:

• To have control over my stylesheets (I am not a fan of having styles mixed with Javascript)
• To use CSS variables to customize the theme of my site
• I want the component library to be easily extensible

So, my journey begins with those simple premises.

Material UI

I always liked the Material design system and wanted to try it. I advanced a bit in the development but ended up discarding this option because of how MUI handles the styles. It’s a good option if you only want to concentrate on Backend, but not the one for this project.

Moving on, after trying how CSS and JS mixed while using styled-components, I went to opposite way to only use a CSS framework (no JS involved).

Bulma

I liked how extensible the SASS of Bulma can be; they have a nice-looking design system. I tried to adapt the code I already had implemented using my React components with the provided HTML/CSS classes for Bulma, and it was alright.

The problem came when I tried to implement the second point of the list: CSS variables for a theme. Bulma uses calculations to derive the lighter/darker version of each color. 

After seeing that, I started digging into the code and making changes to add CSS variables for each color combination. I ended up having a ton of CSS variables just for the colors, and the code started to get messy (I had to override a good amount of code just to remove the calculation that Bulma had in place).

This wasn’t the best approach to have CSS variables with bulma, but I couldn’t find a better one.

With that in mind, I browsed other alternatives of CSS framework, but at the moment couldn’t find any better one, so I went back to the beginning and gave Material another chance.

Material Components Web

At this point, I wanted to have control over the JS of my components, but I wanted to use an already implemented CSS design system. After browsing a little, I visited the Material components library for Web.

My line of thought was: I like Material as a design system, but I wanted to change how Material UI handles the styles. So let’s find a solution in the middle.

With this, I created my components by just using the SASS files from that library and replicating some JS they use. It was a good solution, and in the future, it could be easily changed to another one.

But, after migrating a couple of components, It felt like I was reinventing the wheel and press pause on moving in that direction.

Right now, I am exploring another CSS-only design system called DaisyUI.

I will write about how that goes soon…