My Journey with Bulma - Enhancing Web Development with a Lightweight CSS Framework

My Struggle

When I started working on web applications, I used to write my own CSS, and I found it pretty annoying to handle the responsiveness of the application.

Normally, I would develop with a certain screen size in my own laptop, and the web design and layout would work well. But all of a sudden, if I changed the size of the browser or used my phone to check the website, the layout would become very weird.

Nowadays, we have so many different screen sizes available on the market, like computers, tablets, and phones, each with various sizes. It would be super headache-inducing if we had to write CSS to cater to all these sizes.

What I Did Differently This Time

That’s why I tried using different CSS frameworks: Bootstrap, Tailwind, and Bulma (which I want to introduce in this article).

The idea of using these frameworks is that they already include CSS to cater to most screen situations. By navigating through the documentation of the corresponding framework, I can directly use their CSS classes and only write my own CSS if I can’t find the corresponding classes in the framework.

For penguingogo.com, I am using Bulma, which is a lightweight and minimal CSS framework. By directly downloading their .css file and referencing it in your HTML, it is already available, making it very simple to configure.

Their website is well-documented with examples for most typical use cases (e.g., navigation bar, hero, card, etc.), and the CSS itself is small in size, which can also make my site faster.

Benefits of Using Bulma

Below is a table of benefits of using Bulma:

My Thoughts

Knowing that there are tools like CSS frameworks is the first step to making your web development easier. Then, being attentive to the documentation and trying things out is the second step. Finally, with a good understanding, you can develop a nice-looking web application in a short time.