Danywalls | Angular | Kendo | Typescript

How to use BulmaCSS with Parcel

How to use BulmaCSS with Parcel

Dany Paredes's photo
Dany Paredes
·

2 min read

Hello, I'm a poor css guy who always uses a framework like bootstrap, and today I decided to use Bulma CSS.

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

  • No Sass for customizing.
  • Large file (complete 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 an actual project.

Bulma from NPM

Bulma also supports being installed from NPM, and using this way, 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

The Bulma is ready. The next step is to use a bundler to compile our sass and load a webserver with the Parcel.

How to use Parcel with Sass.

The Parcel is a fantastic application bundler for sass, javascript, and assets with zero configuration.

I am using Parcel because it helps to compile my sass files without pain and generates a final version.

Configure your project with the 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 extend.

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 file imports 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 needs to 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

CSSFrontend Development