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.
There are several ways to get started with Bulma. You can either:
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 a more detailed installation.
Install Bulma through npm/yarn:
npm install bulma
You can now review your
to 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.scss in the /assets folder.
In this `main.scss` file paste this code:
// Customizations Here (Optional) // Bulma Import @import '~bulma';
Add this file in main.js of your project like this:
You're all good, now. Just start the local development server and check Bulma working on your website.
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:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
Go to the /public directory and paste this in index.html
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 npm
@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.
Previously published at https://justaashir.com/blog/bulma-vue-js-installation/