This is the second post from the series of 100 angular projects I am doing. You can check out the first post here.
Based on the previous hello world project, I decided to have a little fun by adding CSS framework Bulma which is the new cool kid on the block. Watch out Bootstrap!
First I added the Bulma in the project using npm install:
npm install --save bulmaSecond I imported the Bulma in src\styles.css:
@import "~bulma/css/bulma.css"
Now Bulma styles are available globally. Afterward, I created two components for header and footer.
ng generate component components/header ng g component components/footer ## g is shorthand for generate
This will create header and footer components in src/app/components folder.
Edit the header.component.html, footer.component.html, and app.component.html for the Bulma hero layout look.
Let’s create a header with only a brand logo.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="navbar"> | |
| <div class="navbar-brand"> | |
| <a class="navbar-item"> | |
| <img src="https://bulma.io/images/bulma-logo.png"> | |
| </a> | |
| </div> | |
| </nav> |
And create a footer with license information.
Finally, add those components into the main app.component.html.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!–The content below is only a placeholder and can be replaced.–> | |
| <section class="hero is-info is-fullheight is-bold "> | |
| <div class="hero-head"> | |
| <app-header></app-header> | |
| </div> | |
| <div class="hero-body"> | |
| <div class="container has-text-centered"> | |
| <h1 class="title"> | |
| {{ title }}! | |
| </h1> | |
| <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> | |
| <h2 class="subtitle"> | |
| This is my very second Angular project. | |
| </h2> | |
| </div> | |
| </div> | |
| <div class="hero-foot"> | |
| <app-footer></app-footer> | |
| </div> | |
| </section> |
That’s it. We are done.
This time, I used Netlify for deployment. It is very easy and it works.
Live address: https://eloquent-dijkstra-37b634.netlify.com/
Git: https://github.com/zkkmin/hello/tree/hello-bulma
Brain Dump 
While reading the tutorial on AngularJS, I am happy to get introduced to the Bulma css framework. Bulma seems to be very good alternative to Bootstrap with ease of learning with pure CSS and no Javascript.
LikeLike