loading...

Setup Bulmacss with Parcel

danywalls profile image Dany Paredes ・2 min read

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.

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!

Posted on by:

danywalls profile

Dany Paredes

@danywalls

ex .NET guy, my last years building solutions with Vue, Angular, Sass, and Typescript.

Discussion

markdown guide