DEV Community

Cyprian
Cyprian

Posted on • Updated 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.

Discussion (15)

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 Author

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 Author

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
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 Author

Lolx..okay? 😂😂

Collapse
cyprian_dev profile image
Cyprian Author

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

Collapse
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

I've been using Bulma for almost 2 years now. When I started using Vuejs I started using Buefy (a Bulma+Vue framework). I didn't had any problem, actually I'm recommending it to everyone I come across because it's so easy and fast to use, even for big projects.

It's really customizable and so lightweight so I've always preferred it over other frameworks that include lots of unused code. The better part is that with Bulma being modular I can just take what I want without loading unnecessary code.

Collapse
cyprian_dev profile image
Cyprian Author

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 ❤️

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 Author

Thank you for this.

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 Author

🤸🤸 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