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://firstname.lastname@example.org/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.
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.
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"
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 > 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!
Photo by James Baldwin on Unsplash
Top comments (0)