Switching to UIKit

I decided to go with Material Design Lite at first because it was closer to Material UI which is my go-to framework these days and does not require any build tools to work (works fine with pugjs)

The result wasn't very visually compelling though.

Choosing the right framework

It looks clean but not very modern, so I decided to change the UI framework to something that gives me a more modern look. After a few minutes of googling, I came by this article by @ConnectCK which explains what are the common options and pros and cons of each. I agreed with most of the points, so decided to give the fourth option a shot.

Why the fourth option? Good question, I had tried Foundation and Bootstrap in the past, and in my opinion, they're either too complicated or too legacy looking and too big for my use case.

I decided not to go with Bulma because I personally didn't like the design of their website as much as I liked UIKit.

Using UIKit

I liked how simple and elegant it looks, so I decided to go with that. At first, I just replaced the MDL imports with UK ones. Pretty soon it started to be promising.

This is just the header, so I focused my energy on adopting the styles from the UK as much as possible.

UK has native support for cards, navbars, grids, and dropdowns. Pretty much everything I got from MDL and more.

The UK docs

One thing that I disliked about UK is the docs, it doesn't have a search and every feature is sorted alphabetically. Anyway, it's simple enough to learn so I skimmed through all the features and tried to remember what could be useful.

The CSS classes

I like how well-defined CSS classes are in the UK. everything starts with uk-* so pretty easy to remember, and there is a class available for most common things you would do in CSS (very much similar to what Tailwind CSS does)

Why not tailwind?

You might be asking yourself, isn't tailwind the obvious choice here? Why is the author even trying other CSS frameworks?

The answer is simple, I'm not a big fan of build tools, I think they are counter-productive especially for small projects like this.

Plus I got fed up by being redirected in the tailwindcss docs to tailwindui for pretty much any UI component. I haven't decided to buy the UI kit and this is a free and open-source project.

All that said, I might give tailwind a try as I like how great looking the result is and how fast you can achieve that. So who knows? Maybe in the future?