is a free, open-source CSS framework based on and used by more than 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. Bulma Flexbox 200,000 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 with Bulma. You can either: get started use to install the Bulma package (Recommended - Customizable) npm use the to link to the Bulma stylesheet (cannot be customized) jsDelivr CDN 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: Installing Bulma 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 about it if you don't understand this or want a more detailed installation. in-depth post Install Bulma through npm/yarn: npm install bulma You can now review your to see the changes. package.json 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: ( ); require '@/assets/main.scss' 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 anything in this way. You'll get a complete build of Bulma. customize 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/bulma@0.9.0/css/bulma.min.css" Go to the /public directory and paste this in index.html Restart the local development server, and start using Bulma 🙌. Customization (Bonus) 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 Basic Customization @charset ; @ url( ); $purple: # A4D76; $pink: #FA7C91; $brown: # ; $beige-light: #D0D1CD; $beige-lighter: #EFF0EB; $family-sans-serif: , sans-serif; $grey-dark: $brown; $grey-light: $beige-light; $primary: $purple; $link: $pink; $widescreen-enabled: ; $fullhd-enabled: ; $body-background-color: $beige-lighter; $control-border-width: px; $input-border-color: transparent; $input-shadow: none; @ ; @ ; @ ; @ ; @ ; @ ; @ ; @ ; @ ; "utf-8" // Import a Google Font import 'https://fonts.googleapis.com/css?family=Nunito:400,700' // Set your brand colors 8 757763 // Update Bulma's global variables "Nunito" false false // Update some of Bulma's component variables 2 // 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, 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/
