What’s that Bulma.io CSS Framework you speak of?

Hiya coders! What are the latest and greatest CSS Frameworks of 2021 you may wonder? Well, let’s talk about one I recently learned about! It’s called Bulma.io. Previously in my Software Engineering learning journey, my favorite CSS Framework I’ve implemented is Tailwind.css. Check out my blog to get more info on Tailwind.css. For now let’s learn a little more about Bulma.io, if it’s the right framework for you, and how it stacks up to Tailwind.css.

About Bulma.io

Some off the cuff things to know about Bulma.io:

• It is based off flex-box
• Is a 100% free open-source library
• Is fairly lightweight and allows you to import only the specific elements you want in your application
• Is highly customizable and follows a modular design approach

Bulma Advantages

I downloaded Bulma into a practice app and found it quite simple and easy to get up and running, it’s aesthetic looks and feels quite modern, and I love that there are pre-built components you can customize.

Advantages include:

• can set up themes across your app, achieving a branded look quickly
• syntax of Bulma is pretty simple and easy to use
• predefined components (navbar, panel, main sections, etc.- so awesome and helpful)

EX. of syntax

You can see that different built-in classes from bulma are what is help denotin the design, like “title”, “section is-large” and so on.

You can set up default ‘brand’ style choices in your bulma.io mystyles.scss file:

A couple of things to note, Bulma implements sass: the ‘scss’ type of stylesheet and the syntax that goes with it. I imagine if you weren’t too familar with using .scss files and regulary used css files Bulma could be a good way to help teach you how to get more comfortable/knowledgeable with the syntax for .scss. (A major plus in my book.)

Bulma Disadvantages:

Up until recently, I had never heard of Bulma, and from when I tried a google search on it, I found there isn’t a ton of developers who are working with it/writing about it. If I ran into a head-scratching issue or some kind of bug, it could be more challenging to find a solution compared to using a more widely used CSS framework.

• like in Tailwind.css the syntax for Bulma classes can be a bit lengthy
• doesn’t have a huge developer community

How Does Tailwind.css stack up?

When it comes down to it, Tailwind is amazingly customizable, but it is quite lengthy in syntax. Take a look at code from a past project I build using Tailwind. On line 51 there is quite the lay down of class specifications.

I think Tailwind adds quite a bit to the UX/UI of an app, I will say in terms of code cleanliness it is questionable that it is really so great. Personally, while building out my own personal apps, I don’t find it to be a big issue. I could see in most grander scale apps, the amount of coded needed could get quite cumbersome.

The learning curve for Tailwind is a bit more difficult than for what Bulma could be I believe. Hopefully I’ll be able to play and work with Bulma a bit more and perhaps we’ll check back in on this topic in the next couple of months.

Conclusion

Bulma.io offers a quick up and running CSS answer to your coding needs, it’s pretty great for the coder who wants to spend a little less time worried/scratching their head at implementing their design. I think this is an awesome framework. What about you? Drop a line in the comments below to share your thoughts/feelings about working with Bulma.io vs. Tailwind.css!

Thanks for reading my blog and happy hacking it to you!