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.
- https://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
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!
Photo by James Baldwin on Unsplash
Top comments (0)