Are people still using word SWAG? Nevermind, straight to the topic. If you have ever been working with front-end there is a chance that you know what is a Bootstrap. And if you were building websites with Bootstrap for a while, there is a chance that you are tired of this CSS library. Bootstrap templates might even look all the same and boring because everyone is using them. So, you want to learn something new for your next Vue app? Don’t know if you heard about it, but there exists a pretty good alternative for Bootstrap – Bulma. And guess what – you can run Vue js with Bulma.
Moreover – there is a library that bonds together Vue and Bulma. And how it is called? Buefy. Yet another Vue technology that name ends in -fy. It is weird how the Bootstrap library for Vue is not called Bootstrapify ヽ(•‿•)ノ. With Bulma libraries existing for React and Angular, it is not a surprise that there is a library for running Vue js with Bulma.
Let’s get started. What is Bulma?
Here is she – a character from Dragon Ball
I am sure I am not the only one who imagines this Bulma when hears the word. Now let’s get serious.
Bulma is a CSS framework (we are talking about Bulma CSS here), that makes front-end development easier and more elegant. Bulma provides a lot of useful built-in features, such as Flexbox, grid system, there are a lot of components to be used, such as tables, dropdown menus, navigation bars, buttons, panels, tabs.
How can we benefit from it when developing a Vue masterpiece? In many ways. For example, a handy feature is Flexbox that makes the web page design process fast and easy. In simple words, Flexbox is a layout that extends or decreases itself when needed. So combined with a grid system, depending on how many columns there are, content can extend itself to the size of a parent box. Bulma also lets our application look more stylish with a matter of an added class name and that’s another advantage.
Can Bulma be used instead of Vue? No, as I already mentioned, it is a CSS framework. and Vue js is a JavaScript framework. We can’t do any manipulations with the data with Bulma and we have to use Vue js to make a web page dynamic.
Let’s check if Bulma works.
Here is a simple example of how Bulma works. There are columns and sections (sections are the same as rows in Bootstrap), that adds up to a grid system. In the example below, the cyan color is around the columns and the green is around the section. It visualizes the borders of the components. If you scrolled out to 0.25x you would see that on the wide screen the columns reflect in one row. However, on the mobile, the columns would cascade one below another.
See the Pen Bulma example by Giedrius (@Giedrius888) on CodePen.0
How to install Bulma for Vue js with Buefy
As I already mentioned, there is a Buefy library that is based on the Bulma CSS framework. Even though we can use Bulma directly (by including it with a script tag in an HTML page), Buefy has its advantages, but about it later. The installation process of the Buefy is very simple – just with like with many JavaScript-based libraries, npm can be used. Make sure you are in your Vue project directory and execute:
npm install buefy
Or this (note: be careful as you will be asked a few questions, one of them is this: “Add the Buefy style?” and the default option for this is set to none. Without this, there are two options: CSS and SCSS. Choose what you need, but for the example let’s choose CSS) :
vue add buefy
After successful installation you should have a “buefy”: “^0.8.6” (depends on the current version) as one of your dependencies in the package.json file.
You can also use Vue UI for the installation. Run vue ui in the terminal. After it launched, go to Dependencies -> Install dependency. By searching “Bulma” you will see that there are two options: Bulma and Buefy. Completely up to you which one you want to install, but I recommend you Buefy as it has advantages over plain Bulma, I will take about the differences later.
Another method, that is not that reliable as it depends on an external source is CDN (unless you download the files and save in your project). You can include Buefy by adding these in the <script> element in your HTML page:
Now it is time to check if the Bulma installation succeeded. Here is a simple HTML code for the navigation bar. If you have a newly created project, put it inside your <template></template> in App.vue file:
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>Now let’s check if the Buefy was imported automatically to the main.js file (it can be found in the src directory, next to App.vue). If it was not, add the missing lines to your file:
import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
And the last step: because you are not gonna need HelloWorld.vue component, you should delete it from App.vue as you might get an error with it. This is what should be left inside the <script>:
<script>
export default {
name: 'app'
}
</script>If everything is fine, after you ran project, you should see this in your web browser:
And in case Bulma was not imported, the page should look like this:
Not really what we were expecting.
Installing Bulma without Buefy
If you don’t want to install Buefy, you can always install only Bulma. It is more lightweight than a library. The installation process is the same as with Buefy, but instead, the npm install buefy, execute npm install bulma . The next step is to import Bulma, it can be done by inserting this line inside the <style> element in your App.vue instance:
@import “~bulma/css/bulma.css”;
Spin your app and see if that works.
What are the advantages of using Buefy and not Bulma directly with Vue js?
What we did here is that we checked if Bulma was installed, but don’t forget that we were installing Buefy, and not Bulma. We run our project and Bulma works and that’s great, but let’s see if other Buefy features do work.
There is one main advantage. Buefy is a library that is based on Bulma. However, on it is own, Bulma is a CSS framework. What Buefy provides are components, that are based on Bulma CSS. We can use Bulma directly with CDN, but then we will not be able to use the potential Buefy provides.
Buefy is a component framework. It means that Buefy provides components like dialogs, tables, date pickers, and so on, that are based on Bulma. And Bulma ships with the CSS that these components were built. You can find examples for different components on Buefy documentation page. Let’s choose one of the out-of-the-box components. For example, date picker. You can find a lot of the components in Buefy documentation, all you have to do is to reuse it in your Vue project.
Final thoughts
Bulma is a great CSS framework that has potential. It might be a good choice for your next project. Using Vue js with Bulma will save you some time as you don’t have to spend your time tweaking buttons and forms and it means you can concentrate on building big things. I encourage you to try Bulma and decide if you like it more than Bootstrap.