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.
| <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.
| <!–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
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