All language subtitles for 13. Adding Third Party CSS

In this video we're going to start to add in some additional styling to our application rather than

writing out a lot of CSX from scratch.

We're going to instead use a third party CSX library to handle a lot of styling for us inside this course.

Let's first begin by taking a look at the documentation for the styling library that we're going to

use instead of a new browser tab.

I'm going to navigate to Boma dot I owe Omar IO is a free styling library.

This is very similar to the materials CSX project or the bootstrap CSX project.

If you are familiar with those at all there is effectively no big difference between Boma and say bootstrap.

They're just different styling libraries.

I just decided to use Beaumont inside this course because I think it naturally looks pretty nice and

because bootstrap is kind of overused into trials in general so I figured hey let's do something else.

Let's take a look at the documentation on this page and understand what we're going to more or less

turn our form into on the top left hand side.

I'm going to find the link to the documentation and on the right hand side I'll find this section called

form and then inside there click the subsection called General though on this page we can scroll down

a little bit and see an example of a form built with almost the SS so we read write out some each team

L and class names that look like this right here.

It will give us a form that looks like that all we have to do is include the Belmont C Ss file inside

of our project.

So let's figure out exactly how we do that at the very top of this page.

I'm gonna find at the very top right hand side the overview section and then inside there I'll find

the start link this lists out three different ways of adding Bullseye into our project.

The recommended way is to install Belmont using NPM or the node package manager so that is of course

is what we are going to do inside of our project.

We have to open up a terminal window inside of our project directory and we have to run that command

right there to install Bouma into our project.

Let's do that right now.

I'm gonna go over to my terminal.

I'm going to open up a second terminal window.

I've now got two terminal windows open.

I've got the original one that it's running my angular developing server and this new one that I just

created inside of my new terminal window.

I'm going to make sure that I'm inside of my P.W. directory.

I have to be inside my project directory to install Boma once I'm inside there.

I will then run and payment stall Wilma.

All right.

So this is a very small package.

So it will install in just a matter of seconds.

And that looks good.

I'll installed.

I'm not going to flip back over to my application side the browser.

So once I go over there I can refresh the page and you'll notice that everything looks exactly identical

to how it worked before.

So it turns out that the boma install directions right here are a little bit misleading.

They really just tell us half the story when we run npm install Boma that gives us the CSX files or

in other words they get installed into our project directory but they do not get kind of magically wired

into our project.

Instead it is up to you and I to figure out how to include those installed CSX files with our angular

code.

Let's take a pause right here.

We'll come back the next video and figure out how we can tell angular to work with this newly installed

almost the SS library.