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 bulma
Second 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