Adding Bulma CSS Framework to your Angular 6 app

Bulma is a CSS framework based on flexbox and inspired by Bootstrap. It has common components such as buttons, forms, navbar and more. In addition, CSS Bulma has a simple and usable grid system, allowing several configurations dynamically.

In Bulma, everything is CSS. That’s right, only CSS! For more about Bulma see https://bulma.io

Well, this was a brief introduction about Bulma. Now let’s follow the purpose of this post. So let’s create an angular application and add the CSS bulma to it.

Step 1: Angular setup

To do this, you must have Node.js installed. So, run the follow command.

npm install -g @angular/cli@latest

After that, you can check your installation version by running:

ng --version

You will see an output similar to this:

Angular CLI: 6.0.8
Node: 9.11.1
OS: linux x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.3.3
typescript                        2.7.2
webpack                           4.8.3

So, evereything working! Now, for create your app you need to run the ng new:

ng new angular-bulma

Once that’s finished, you can see the angular-bulma directory. Move to it. Within the directory, you can run the application to see it working by running:

cd angular-bulma # moving
ng serve -o # serving

The result of this command is:

Image 01 — Angular app running

Step 2: Installing Bulma CSS

With angular apps working you already can add Bulma to your app. For this you need to install it by running:

npm install --save bulma

Bulma is now installed, but it still does not work. Let’s go to the next step so we can import it into our project.

Step 3: Import into angular.json

The last thing to do is add the bulma.min.css file to your angular.json. You cand find the angular.json file in the root of your project.

Opening this file you will see someone like

"projects": {
    "angular-bulma": {
      "root": "",
      "sourceRoot": "src",
      ...
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-bulma",
            ...
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],

So, inside of projects > angular-bulma > architect > build you can find the styles array. Add a new item to it with the path for bulma.min.css.

...
"styles": [
    "node_modules/bulma/css/bulma.min.css",
    "src/styles.css"
],
...

Now we have finished. Execute app again with ng serve and you will see someone like that.

Image 02 — Angular app running with Bulma style

You can see Bulma working. Compare the two images and see the difference.

Now you can use Bulma Componentes in your app.

See ya!