Bulma is a free, open-source CSS framework based on Flexbox and used by more than 200,000 developers. It's the easiest to learn (my opinion) due to its natural naming of classes and a simple grid system. It's not that popular like Bootstrap, but it got a specific fanbase.
Today's post is not about Bulma's benefits or usage. It's more specifically about the integration of Bulma and VueJS.
How to use Bulma with VueJS
There are several ways to get started with Bulma. You can either:
- use npm to install the Bulma package (Recommended - Customizable)
- use the jsDelivr CDN to link to the Bulma stylesheet (cannot be customized)
1. Integration Bulma using npm
It's my personal recommendation to use the Bulma in VueJS this way, because of some benefits that you'll not get another way around.
- You can customize colors, breakpoints, type, and custom imports to decrease the file size.
This is only possible if we set up a Sass workflow in our project, because of Bulma's nature.
So Here we go:
- Install these required dependencies (If it already doesn't exist in your project):
npm install --save-dev node-sass sass-loader
You can also read this in-depth post about it, if you don't understand this or want more detail installation.
- Install Bulma through npm/yarn:
npm install bulma
- You can now review your
package.jsonto see the changes.
Adding to the project
It's super opinionated to import Bulma to the project, but this way works best for me:
- Create a
main.scssin the /assets folder.
- In this
main.scssfile paste this code:
// Customizations Here (Optional) // Bulma Import @import '~bulma';
- Add this file in
main.jsof your project like this:
You're all good, now. Just start the local development server and check Bulma working on your website.
2. use the jsDelivr CDN to link to the Bulma stylesheet (cannot be customized)
This is the easiest way to integrate Bulma into your project (Vue or HTML/CSS) but you'll not able to customize 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:
- Go to the /public directory and paste this in
Restart the local development server, and start using Bulma 🙌.
This is the bonus chapter of this post, where I will shortly mention the effects of customization in Bulma, and how you can customize it.
Bulma is natively written in Sass, so you need a Sass workflow to customize it using Variables which is only possible if you're using the
@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";
This is it, and voilà! You've managed to install and customize Bulma.
Thanks for reading this post, if you liked it, Share it on Twitter and tag me. Don't forget to follow me there.