How to use Bulma & Vue together?

How to use Bulma & VueJS together?
How to use Bulma & VueJS together?

Vue is a JavaScript library for building web interfaces combining with other tools it also becomes a “framework”.

Vue is popular because it has it all to make development smooth and easy. Its gentle learning curve is the first significant factor. Vue is also lightweight, flexible, modular and highly performant. CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process. Generally speaking, integrating each framework is generally the same so the installation process will work with Bulma.

Bulma is a great CSS framework which can be used to make UI design very better. Bulma is used worldwide by UI developers. It is a free, open-source CSS framework based on Flexbox and used by more than 200,000 developers.

Let’s throw some light on vue.js

Vue.js is an excellent choice for your first framework and is one of the easiest ones to start out with. Despite the fact that VueJS is easy to learn, it is an incredibly powerful framework that can be used to build large web applications as well as small ones. Unlike many other frameworks, Vue.

Bulma.css is the main driver right now to make responsive designs and it’s very customisable and modular as they say, You can easily integrate it into VueJS workflow. It’s not like just using the cdnjs version, you can customise the SaSS variables to give Bulma your own theme or almost control everything from the border’s colour to the table header’s padding with Bulma SaSS variables.

Adding a framework to vue.js. Before you begin downloading a CSS framework, be sure to install and create a new project with the Vue CLI and follow the prompts:

$ npm install vue-cli
$ vue init webpack project-name

Installing Bulma: If you haven’t heard of Bulma, you should look into it. It’s a lightweight and flexible CSS framework that’s based on Flexbox. It’s created by Jeremy Thomas and has over 25k stars on GitHub at the time of this writing! Unlike Bootstrap, Bulma only contains CSS so there are no jQuery or JavaScript dependencies.

$ npm install Bulma: After Bulma is downloaded, open up your main.js and import it. Inside main.js file, we can import bulma.css file

import ‘./../node_modules/Bulma/CSS/bulma.css’; No extra steps. Bulma is ready to use in your Vue.js application! The Bulma Docs is a great resource to get you started.

Vue.js has better practices while using Bulma together. Down to their core, these three frameworks are very similar: they all work with rows and columns. These rows and columns create a “grid” that you can leverage to create your user interfaces. This grid lets you easily change the width of your columns by device width just by adding or changing the classes that are appended to an element.

blog banner 1

As stated before, the examples below are using Bootstrap 4. However, these best practices with row-column based frameworks apply to all. It’s considered best practice to utilise the framework’s classes whenever possible. Each of these frameworks has been carefully crafted for ease-of-use, scalability and customisation. Instead of creating your own button with its own classes, just create a button using Bootstrap and Bulma.

<!–Bulma–>

<button class=”button is-primary is-large”> I’m a large Bulma button</button>

You can configure each of these so that is-primary (Bulma) references your brand’s colours instead of the default blue/green colour that gets shipped with Bulma. If you need to create your own theme with your own brand, you can create a global stylesheet that overrides the framework’s global styles; you do not want to modify the framework directly.

Let’s how we can add it to a project:
It’s super opinionated to import Bulma to the project, but this way works best for me:
Step1: Create a main.scss in the /assets folder. In this main.scss file paste this code:

//Bulma import
@import ‘~bulma’;
You need to add main.scss file in main.js of your project like below:
require(‘@/assets/main.scss’);
now you’re good to start. So, just start the local development server and check Bulma is working on your website.

After this the next step is to use the jsDeliver CDN to link to the bulma stylesheet:

This is the easiest way to integrate Bulma into your project (Vue or HTML/CSS) but you’ll not able to customise anything in this way. You’ll get a complete build of Bulma So here is how you can add through CDN, Copy this, or retrieve the latest version of Bulma from JSDelivr:

Customisation of bulma:

Here is short crisp of how to customise Bulma. It is natively written in sass, you need a sass workflow to customise it using variables which is only possible if you are using npm.

Here is an example of it:

@charset “utf-8”;

// Import a Google Font
@import url(‘https://fonts.googleapis.com/css?family=Nunito:400,700’);

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;

$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma’s global variables
$family-sans-serif: “Nunito”, sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma’s component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import “../node_modules/bulma/sass/utilities/_all.sass”;
@import “../node_modules/bulma/sass/base/_all.sass”;
@import “../node_modules/bulma/sass/elements/button.sass”;
@import “../node_modules/bulma/sass/elements/container.sass”;
@import “../node_modules/bulma/sass/elements/title.sass”;
@import “../node_modules/bulma/sass/form/_all.sass”;
@import “../node_modules/bulma/sass/components/navbar.sass”;
@import “../node_modules/bulma/sass/layout/hero.sass”;
@import “../node_modules/bulma/sass/layout/section.sass”;

Result:

This is it, you managed to install and download customised Bulma.

Tips to remember:

  • When working with any CSS framework and vue.js, it’s important to keep the reusability of the component in mind.
  • You don’t want to mix layout CSS with the component itself.
  • You’ll want to reuse the component at some point and for that other instance, another layout may be needed.

There will be a two example one is bad example and other is a good example. This will show you how to function on this.

The below on is a bad example of navigation.vue

This code definitely will be include in app.vue.

This navigation may be intended to be used in both the header and the footer. Both of which should look very different but contain the same information. Let’s strip out the layout HTML and move that to it’s parent/base component.

You can compare these two and decide which is better and bad examples, you can clearly get an idea by seeing this example below:

Navigation.vue

                                              App.vue

Conclusion: CSS Frameworks make your life as a developer much easier. They make your application’s template code universally understood, consistent, easier to maintain, and easier to write. You can focus more on the app’s functionality and overall design rather than focusing on common tasks like creating a button from scratch.

Bootstrap, Bulma and Foundation are just the three widely used frameworks right now. However, you aren’t limited to just those. There are plenty of other frameworks out there, developers who want to explore such great frameworks you can definitely use it.

To learn more about frameworks, click here.

By Bhargavi B M