Angular App Styling With Bulma Framework

In this blog, we will use the Bulma CSS framework to style our Angular apps.

Almost everyone uses Angular CLI to get started with Angular applications. On running it, you will notice it's an app with any style written or included. Styling an Angular application has various options, as shown here.

• Bootstrap
• Bulma
• Foundation
• Handwritten CSS

In this blog, we will see how to use the Bulma CSS framework - a free, open-source CSS framework based on Flexbox. It has over 32K+ stars on GitHub with millions of downloads every month.

 

It's an apt alternative for the Bootstrap framework with no dependencies on JavaScript. As it's based on Flexbox, it's truly a responsive CSS framework from the ground.

 

Create an Angular app

 

Using Angular CLI, let's create an Angular application. Run the ng serve command just to ensure that everything works well.

 

Download Bulma

 

When using Angular, Bulma can be installed using npm. From the root folder of the Angular project, run the following command in the console.

 

npm install bulma --save

 

This will install the Bulma framework in node_modules. 

Add Bulma CSS file

The above command would have downloaded it the node_modules folder. We need to let the Angular Build System know that we need to package it while running the application.

 

For this, open angular.json from the root folder and update the styles section as shown below. This will make Angular Build System pick this CSS file while running the app.

Using in the Angular Component

Refer to the Bulma documentation to use appropriate UI style elements and patterns to style the Angular application. 

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `

<div class="container">
    <app-header></app-header>
    <section class="hero">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
Angular with Bulma
</h1>
                <h2 class="subtitle">
App is styled using Bulma
</h2>
            </div>
        </div>
    </section>
    <app-footer></app-footer>
</div>
`,
styles: []
})
export class AppComponent {
title = 'my-events';
}

A sample Angular UI can be seen below.

 

Source Code

 

Check out the MyEvents repo on my GitHub repo.