How setup BulmaCSS with Parcel

Hello, I'm a poor css guy, always use a framework like bootstrap, and today I take the decision to use Bulma CSS.

Bulma allows use by CDN or NPM. The CDN is easy way to use but with some caveats.

No Sass for customizing.
Large file (full Bulma framework).

Bulma from CDN

In your HTML file, you import the css and your HTML is ready to use bulma.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">

CDN is a good approach for testing or basic mockup but not for a real project.

Bulma from NPM

Bulma also supports be installed from NPM and using this way, it comes with few advantages.

Sass for customizing.
Pick with components load from the Bulma framework.

Requirements

Using Bulma from npm requires you have nodejs installed in your machine.

https://nodejs.org/en/download/ pick your OS, and install it.

Create a new directory bulmalab and from your terminal go to your directory and install Bulma using npm with the following command.

npm install bulma --save

Bulma is installed, next step is use a bundler for compile our sass and load a webserver with parcel.

Using Parcel for Sass compilation.

The parcel is an amazing application bundler for sass, javascript, and assets with zero configuration.

I using Parcel because it helps to compiles build my sass files without pain and also generated a final version.

Configure your project with npm package and install parcel-bundler.

npm init -y 
npm install -g parcel-bundler

Set tasks for Parcel.

Edit the package.json and create a new task into the script with Parcel and your entry point like index.html.

    "server": "parcel index.html",
    "prod": "parcel build index.html"

Import Bulma

Create a new directory with a file scss/main.scss, the main.scss will import every Bulma file to be able to customize or extends.

the main.scss will import the initial variables and Bulma.

@import "node_modules/bulma/sass/utilities/initial-variables";
@import "node_modules/bulma/bulma";

The index.html import the main.scss.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <link rel="stylesheet" href="scss/index.scss">
</body>

    <h2>hello from bulma</h2>
</html>

Compile Bulma and my sass.

The parcel compiles our sass file on the fly only need start the dev server.

dany@lx-personal:~/Desktop/bulmacss-step-1$ npm run server

> bulmacss-step-1@1.0.0 server /home/dany/Desktop/bulmacss-step-1
> parcel index.html

Server running at http://localhost:1234 
✨  Built in 2.00s.

Our project is ready to be customized with Bulma!

Photo by James Baldwin on Unsplash

Blog