Bootstrap vs Semantic UI vs Bulma for VueJS

May 15, 2018 0 Comments

Bootstrap vs Semantic UI vs Bulma for VueJS

 

 


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 each of the frameworks, I've used a companion library written by a third party which makes it easier to use the framework as part of your VueJS projects.

The versions I've tested are:

As long as the major versions remain unchanged, this article should still be relevant.

I've included some code samples for items relevant to getting started, but please don't take this as a complete foolproof guide as I've not included everything to start a new project for brevity.

Pre-requisites

For this article you'll need to have nodejs/npm installed (ideally a recent version with the excellent npx binary), parcel and VueJS. Optionally the vue-cli is useful for creating new projects.

Bootstrap

Bootstrap has been around a long time in terms of web development, and the latest incarnation improves upon the excellent framework they've crafted thus far. For many people, it's the default choice.

Version 4 has many improvements and changes, most notably: support for Internet Explorer 8 has been dropped, flexbox support by default, move from less to sass, move from pixels to relative units like rems. Custom builder, glyphicons and grunt have all been dropped; simplying use sass to include what you need from bootstrap, and you're free to choose your own icon set and build tool, although npm scripts are recommended.

Getting started

The guide in the bootstrap-vue docs is quick and easy when you use the vue-cli to start a new project. If you've got a recent version of npm, then you can shorten the number of commands by one by running

npx vue init bootstrap-vue/webpack-simple your-project-name-here 

then the usual

cd your-project-name-here 
npm i
npm run dev

Easy peasy! I would prefer using parcel to avoid any complex webpack setup, but webpack is more widely known so you'll have more support and you get an autogenerated config file that should be fine for most use cases, so there's no major issue there.

Verdict

It's hard to argue with something that just works brilliantly. If you want a huge amount of community support, themes and customisations, then you're all set with Bootstrap. There's nothing really wrong with it, so if you're happy with bootstrap then I wouldn't recommend changing.

The main downside is that bootstrap still requires jquery for all it's javascript needs. For many people this is fine, but since we're talking about using Vue it seems a shame to have to load jquery for all the bootstrap interactions and have the rest of your app written in the more modern Vue framework. This is just a compromise you'll either have to accept, not use any of the javascript based behaviours or more on to an alternative.

Semantic UI

The goal of Semantic UI is to provide a more natural language orientated approach to styling and interacting with you front-end. The names of the classes make it easier to understand and remember what styles to use, for example, "ui active button" for a semantic ui active button, what could be easier than that?

I'm not a big fan of their docs, the installation page seems complicated, then you're just left with a list of pages on the left with no clue where to start. I would have preferred a proper getting started page after installation that gave you a container, or grid, then some typical starter ui elements like headers, paragraphs, buttons, etc, but that's just personal preference

Getting Started

The process for starting a new project is a little more complicated than with Bootstrap-vue, in that you need to start the project yourself, build the files using gulp, but in reality it's not that big of a deal. The npm installer for semantic ui has a really nice question-answer driven system for getting the files installed where you want them, but personally I would have preferred an opinionated installer that just puts everything in the usual place in the node_modules folder. It's consistent with all other packages and just makes it easier to use it between projects. Keep it simple!

npm i semantic-ui-vue --save 
npm i semantic-ui --save

and here's your starter index.js

import Vue from 'vue'; 
import SuiVue from 'semantic-ui-vue';
import '[path-to-semantic]/dist/semantic.min.css'; /* ... */ Vue.use(SuiVue); new Vue({ el: '#app-root', render: h => h(App)
});

Then it's just

The problem I encountered was that I had to run gulp watch inside the semantic folder in case of any changes to my customisations, which made it awkward to have that and run parcel for the rest of my project. I'm sure that's a solvable problem and might just have been where I installed semantic ui, so you might have better luck. For me, this left a bit of a bad taste in the mouth. I would assume you could write a gulp file to watch both your sources and the semantic ui files, but I didn't want to have to do that.

Verdict

I love the nomenclature, it feels easier to use when you've only got simple english names for everything. It's a well known framework and there are many themes and customisations but nowhere near the number for Bootstrap. As for downsides; the need to setup gulp manually or parcel differently and that the behaviours utilise jquery are making me lean towards something else, but if you're happy with that and prefer the easier class names, then I would recommend Semantic UI.

Bulma

Bulma is the least well known of the three frameworks I've decided to compare, but this doesn't bother me. I really liked the fact that it's based on flexbox, and that there's no javascript included so you can make a pure Vue (or React) project. Like Semantic UI, they are aiming at easier to remember class names and a simpler usage. For example, to use their grid columns you can simply have a "columns" div containing "column" divs, that's it. They automatically resize according to the number, which is great and really highlights the power of flexbox. For some reason they prefix some of the classes with "is", so you have "button is-primary is-large" which doesn't look quite as nice as Semantic UI but it's no biggie.

Getting Started

The process of getting started using Buefy was nice and easy and worked fine with parcel.

Then your index.js file can start like this

import Vue from 'vue' 
import Buefy from 'buefy'
import 'buefy/lib/buefy.css' Vue.use(Buefy) new Vue({ el: '#app', render: h => h(App)
});

Customising the theme was also easy, just remember to remove the 3rd import above as it's replaced in your App.vue file. As it's part of your app, there's no need to run gulp or anything else separately to parcel.

Verdict

I really liked Buefy, it was easy to setup and use, but the main downside for me is that there's only a subset of Bulmo implemented in Buefy, so for some code you'll use Buefy components like

<b-checkbox>A checkbox!</b-checkbox> 

but for others you'll use classes on divs, for example

<div class="container">...</div> 

I assume this is because they don't have any javascript requirements, or that the project just hasn't implemented them, but as it stands I'm not so keen on the mix of the two, it would have been nice to have a consistent set of components to use.

Overall

All three of the frameworks would be a great choice for most projects so really it's down to personal preference. For me, I like the simplicity of Bumla/Buefy so I'm going to give that a go and I'll do an update in future to let you know how it goes.

Thank you very much for reading this article! If you liked it, please comment to let me know or if you have any suggestions for improvements; and make sure to click the heart/unicorn/bookmark buttons below, I would really appreciate it!


Tag cloud