DEV Community

Cover image for How setup BulmaCSS with Parcel
Dany Paredes
Dany Paredes

Posted on • Updated on

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">
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Our project is ready to be customized with Bulma!

Photo by James Baldwin on Unsplash

Discussion (0)