Bulma is my current favorite CSS framework and we'll be using it for this project. You can definitely use the always awesome Bootstrap which recently hit v4 or Foundation.
Bringing In Bulma
Whenever you need a package in our JavaScript application, we'll be using npm
to bring in the package. This is the way the JavaScript ecosystem is right now. Lots of packages are brought in to build something greater.
npm install --save bulma
This will bring the entire Bulma project into our node_modules
folder. The --save
flag will add this dependency to our package.json
.
Adding the CSS File
For Angular CLI applications, all starting configuration happens in the .angular-cli.json
file. In that file you'll find a styles
array where we can add any CSS files we want to add to our project. You'll also find a scripts
array where you can add things if you need that.
Let's add Bulma to the styles
array now:
"styles": [
"../node_modules/bulma/css/bulma.css",
]
Angular starts looking in the src
folder so we'll have to jump one directory up to get to the node_modules
folder. If you are using Bootstrap, go ahead and find the CSS file in your node_modules
and add that path here.