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, routerPackage 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:
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.
You can see Bulma working. Compare the two images and see the difference.
Now you can use Bulma Componentes in your app.
See ya!