DEV Community

Bootstrap vs Semantic UI vs Bulma for VueJS

Sam Benskin on May 11, 2018

Today I'm going to be introducing and comparing three modern front-end CSS based web and mobile frameworks for working alongside VueJS 2. For ea...
Collapse
 
richardtallent_70 profile image
Richard Tallent • Edited

Great article! I was a fan of SemanticUI before I started using Vue, and I’ve been slowly extricating myself from it because of the JQuery dependency and the project stagnation.

I’ve settled now on a Bulma CSS (not Buefy) and custom components. Bulma is a great baseline, and Vue makes reactive component interactions so easy that I don’t feel the need for a straight-line implementation like Bulma.

Bulma lacks a few things (a nice color palette like Vuetify’s for example, and non-native checkbox/radio controls), but it’s also tiny, fast, and generally doesn’t get in the way of my own CSS (a problem I had with Vuetify when I didn’t care for certain design choices in Material).

Collapse
 
sambenskin profile image
Sam Benskin

Thanks! :) I'm happy you found the article useful.

Out of interest, why didn't you try/use Buefy? On their website they have examples of non-natice check boxes that I mentioned in the article so you might want to check it out.

I'll take a look at Vuetify, thanks.

Collapse
 
richardtallent_70 profile image
Richard Tallent

I thought Buefy was nice, but it felt like too thin a veneer over some divs and classes I could easily create myself... and I needed to learn Bulma anyway since Buetify doesn’t cover the entire footprint of Bulma. Vuetify is a very solid toolkit, I’m using it for a personal project where I need something more complete for a mobile-first site.

Thread Thread
 
sambenskin profile image
Sam Benskin

Thanks, I'll take a look at Vuetify; at first glance it looks interesting. I think the bold material design works very well on Android, but on a desktop site I'm yet to be convinced. I'm aware it's not all bold colours and boxes though. Thanks for the recommendation!

Collapse
 
rhymes profile image
rhymes

Hi Sam,

thanks for the article.

Back in the day (which is only five months ago) I was trying to figure out which framework to use (I had also considered Vuetify and the other material based frameworks) and chose Buefy. I've been liking it. The main issues I have with it are:

  • zero tests. Regressions are normal even for tested code so if it's not tested you're bound to have some and it actually happens sometimes in the releases (they are planning to have them for the 1.0 release)

  • you can't use components a-la-carte. There is no way to bundle in your final JS only the components you're actually using (don't think they'll do it soon)

Bootstrap-vue 2 has both as far as I know and it also doesn't depend on jQuery but I guess that if you want to use one of the components made for standard bootstrap then you have to include jquery... but maybe you can avoid them!

Collapse
 
sambenskin profile image
Sam Benskin

Thanks for the comment. Yes the lack of testing does worry me, but it's good to know they are addressing that missing piece of the jigsaw. At least you can lock down the version you want and know works and can upgrade in safety only committing if you know it all still works through you're own testing, but nothings foolproof.

There's certainly a large number of frameworks out there, these are the ones that looked the most interesting to me but I'll be sure to have a look at the ones you've mentioned, thanks.

I'm not too worried about the lack of component bundling customisation but it's good for people to know these things.

Collapse
 
tmorehouse profile image
T Morehouse

BootstrapVue doesn't require jQuery. All of the custom Bootstrap components have been converted to Vue.JS components

Thread Thread
 
sambenskin profile image
Sam Benskin

Thanks for the update. This article was written nearly a year ago now so I'm not surprised things have changed for the better 😀 but thanks for letting everyone know!

Thread Thread
 
tmorehouse profile image
T Morehouse

Actually BootstrapVue has never relied on jQuery.

Thread Thread
 
sambenskin profile image
Sam Benskin

Thanks for letting me know, I'll update the article when I get a chance 😀

Collapse
 
katafrakt profile image
Paweł Świątkowski • Edited

I'm a huge fan of Semantic UI not because of class naming but for how beautifully it looks by default (since I'm no designer, it's important to me). So, I'm willing to ignore problems with installation. The only problem I see is that there is no recommended way how to keep Sematic UI in your repository - should I keep it's files in separate one and put built bundles in my project's assets? Or do I include all the huge codebase of Semantic in my projects repo? They could finally figure it out ;)

That being said, I might give Bulma a go in a project I'm starting right now. It looks like the thing I need - just cool CSS defaults without overly complex javascript part. So thanks for pointing me in its direction (I actually haven't heard of it before).

Collapse
 
sambenskin profile image
Sam Benskin

I completely agree with the missing folder structure recommendation. I think when they originally did it they tried to make it as flexible as possible but there's no good reason for that, it just adds complexity. What's wrong with it belonging in node_modules like everything else and customisation the theme etc through your own code.

Definitely give Bulma a try and come back and let us all know how you got on

Collapse
 
shaileshphansalkar profile image
shaileshphansalkar

Hi,

I have been trying to figure out if semantic-ui-vue has all the functionality that semantic-ui does. For example I am struggling to do form validation when I use semantic-ui-vue and VueJS.

Also a side note, I found this brianyang.com/bootstrap-vs-semanti...

It seems to be an exact copy of what you have posted!

-S