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://firstname.lastname@example.org/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.
Using Bulma from npm requires you have nodejs installed in your machine.
- 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
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.
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"
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.
<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 > email@example.com 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!