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

Top comments (0)

Let's team up together 🀝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.