All language subtitles for 6. A Touch of Styling

Now you've got some navigation elements at the very top.

Let's add in some better styling to make these things look just a little bit better to get some styling

inside of our application.

We're going to be making use of you guessed it semantic UI.

We have not yet installed this into our project.

Let's install semantic UI right now in wired up in the same way that we previously wired up Bouma to

get started.

I'm gonna go over to my terminal and inside my project directory I'm going to run npm install semantic

dash UI dash CSX I will run that command and then after a very brief pause I'll get kicked back over

to my terminal window or see me to my command line once again.

Now let's go back over to our Ed and we're going to wire up semantic UI.

Remember by just installing a CSX library that doesn't actually add any CSX inherently to our project

you have to actually connect that CSX file or imported into our global style's dot CSX file.

But before we do so we have to take a look at the semantic UI directory.

It was just added in to our node modules and inside that node modules folder we have to find where the

actual CSX file is the inside of node modules going to scroll down until I find semantic UI CSX so somewhere

inside of here looks like I'm not getting the folder right away.

That's once again because my code editor is going to reload the window really quickly which should refresh

that directory.

And so now inside of here there we go.

Semantic UI CSX then inside of this directory I'll see that right away at the very top level folder.

I've got a semantic dot CSX file that is the file that we want to import into our project.

Go inside my style's dot CSX file.

I'll add in import or at import.

Make sure you get the at on and then semantic UI CSX flash semantic dot CSX well then save that.

I'll go back over to my browser and then right away I should see that everything looks just a little

bit different which is a sign that we have now successfully loaded up semantic UIC SS and we can go

back into our app component and add in a little additional HDMI elements inside there in some different

class names to get some better styling on this navigation bar right here but to get started I'll go

back over to my app component template file

at the very top I can add in a div with a class of UI container and close it off inside there I'll add

in a div with a class of UI secondary pointing menu and then close it off.

And then inside of that div I'm going to cut and paste the two anchor tags that we've just created.

I'm going to cut and paste both those into that div

then on both these anchor tags.

I'm going to add in a class of item

and I'll save this actually excuse me one less l think you're right underneath the secondary menu so

right above the closing div right there.

I'll add in one more div.

I'm gonna give that a class of UI segment and then I'll move the router outlet inside their now whenever

the router decides on what component to show it'll be placed inside of that div automatically it let's

say this lot back over and see how we're doing.

All right let's say it looks pretty good.

Remember I run my browser very far zoomed in so you probably see something like this right here.

Now I can navigate between these two links and the content visible on the screen changes automatically.

All right well that looks pretty good now definitely looks good.

But there's one last thing you'll notice that back on the navigation bar over here the current link

or the current page that we are visiting is supposed to be bolded and I think that'll be a nice little

addition to add in.

I want to make sure that whenever I'm at the elements route I bold or something like that.

The subtle elements link right there ending with collections as well.

Let's take one more pause and figure out how we can add in some conditional styling based upon our current

U.R.L. in the next video.