DEV Community

Cyprian
Cyprian

Posted on • Edited on

Your Take on Bulma?

Hello dear, hope you're having a great time?

So i came across Bulma CSS early this week and was initially blown away by how simple it implemented layout and structuring, but that excitement was short-lived after i realized some really complicated code implementation going on.

The way it handles background colors, collapsible navbars and how the team jumped into a tutorial on how to use Bulma with Vue.js which i suspected was some Vue.js marketing strategy. And it worried me if there was room for developers handling just HTML and CSS projects, maybe a little JavaScript without a Saas knowledge.

I don't know, what is take your about Bulma, do you think it is a perfect alternative over the others and how well have you been using it's features.

Top comments (15)

Collapse
 
marcellothearcane profile image
marcellothearcane

You should look at Tailwind - it's very useful because it doesn't force particular styles on you.

Collapse
 
djnitehawk profile image
Dĵ ΝιΓΞΗΛψΚ

+1 for tailwind
it's a bit more work but it's perfection 😁

Collapse
 
marcellothearcane profile image
marcellothearcane

The extra class names is little price to pay for all the extra <div>s you have to add to make bulma work 😉

Collapse
 
cyprian_dev profile image
Cyprian

Lolx..okay? 😂😂

Collapse
 
cyprian_dev profile image
Cyprian

Oh i will do that this weekend..thanks very much

Collapse
 
hus_hmd profile image
Hussein Al Hammad • Edited

It is modular. You can choose to only include the things you need (with Sass or SCSS).

It is customisable. You can quickly customise it with Sass variables.

Unlike Bootstrap, Bulma ships with zero Javascript. This is a big plus if you want full control over what Javascript you include on your pages.

without a Saas knowledge.

Everything comes at a cost. If you want to be able to customise it, you need to use Sass or SCSS.

Collapse
 
cyprian_dev profile image
Cyprian

Exactly so, i was wondering if they ever considered newbies on that very level of implementation. Thanks for this input, wanted to know more from experienced users before i proceed.

Collapse
 
hus_hmd profile image
Hussein Al Hammad

I don't think everything needs to be beginner-friendly. Being able to use CSS preprocessors like Sass/SCSS has probably become a common skill for the average web developer. I'm not saying all web developers should know Sass/SCSS, but it is common enough that it makes sense to take advantage of it to make Bulma modular and customisable.

Thread Thread
 
cyprian_dev profile image
Cyprian

Exactly so, it further iterates the fact that one needs to be well grounded in CSS and other helpful tools before attempting to use libraries..many of my friends who were ahead of me hardly can use libraries as i can because while they jumped in, i was learning the core rudiments..you are correct and thanks for the input.

Collapse
 
stevenavelino24 profile image
Steven Avelino

Bulma in itself is a CSS framework (like Bootstrap), so you can totally use it with only HTML/CSS. With Vue.js, there's a popular implementation of Bulma called Buefy, which is maybe what you're using ? But even when using Buefy, you can just use Bulma CSS classes without using the Vue components provided by the library.

As of Bulma itself, it's a great alternative to Bootstrap. It's very customisable, but as you said, it can be tricky sometimes when you want to make really complex layouts, but I think it's an issue that a lot of Bootstrap-like CSS frameworks have.

I think it's a very good framework and with time you can be able to create very nice looking and clean UIs. It's not only marketing, it really works :)

Collapse
 
cyprian_dev profile image
Cyprian

🤸🤸 i totally agree with you, just that I've been wanting to start React and Bulma having all of that Vue.js integration almost got me confused. Thanks for shading this huge light, I'm more likely to know what and how to use it now..thanks alot

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

Bulma / buefy is OK, but

  • No spacing helpers by official
  • CSS resets everything. Has to wrap in class=content, to prevent this.

Good sides,

  • Looks sleek
  • Don't have to go full Material like Vuetify. Yet, more maintained than Material Vue.
Collapse
 
cyprian_dev profile image
Cyprian

Thank you for this.

Collapse
 
cyprian_dev profile image
Cyprian

That's exactly my problem with Bootstrap, all the unused code slowing the load time and when you test your app, you see the warning so it was something of grave concern to me...thanks for this, I'll continue and get familiar with it ❤️