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
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
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.
And create a footer with license information.
Finally, add those components into the main app.component.html.
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/