In the section we're going to hook up semantic UI to our project and add in just a couple of class names
here and there just to get a little bit better styling than what we have right now that will allow us
to just focus on actual functionality as we go forward and we won't have to take any awkward pauses
to do styling to make sure that our app looks at least somewhat reasonable.
So to add semantic UI to our project we're going to go through that same kind of awkward process that
we've gone through before.
We're going to do a search for semantic UI CDN and then one of the first examples here will be CDN JSE.
And then on this page Remember we get this big list here.
You can go down to the very bottom or just do a search for semantic men and you should see it's semantic
men see CSX so I'll go ahead and copy that.
I can then open up my code editor again find the public folder open up the index site mail file and
there and then I'll hook this thing up with a link tag.
So I'll put a link inside the head with a rule of style a sheet and an H ref.
I'll paste in that links like so and then close off the tag.
So the same step that we've gone through with all of our other applications OK cell looks good.
So going to save this file.
Now if I flip back over to my application I should see that I've got a little bit different styling
here.
Yeah it's a little bit different.
Whatever we'll figure this out in just a second.
Let's just set some class names in and it will make this stuff look better.
OK.
So to get started I'm going to find my search bar.
I'm going to find the top level div inside of here and I'm going to give it a class name of UI segment's
I'll find the form I'll give it a class name of UI form and then I'm going to wrap this in put right
here with a div that has a class name of field
and then just to be really complete.
I'm going to give the thing a label as well.
And I'll give it the label image search like so.
OK so we now flip back over after saving this file what looks like I got a little typo in there.
I left off the closing bracket on the div by mistake.
So I'll say that again.
And now I see this much nicer looking image search thing than than what we had before.
Now notice it is stretching the full width of the page which looks just a little bit awkward.
So to fix that we can go back over to our app component.
When the div that is currently wrapping the search bar and to that div I'm going to add a class name
of UI container like so if I go back over.
Now we've got a much more reasonable with for the Image Search component or that little kind of tab
right there.
Now last thing I want to do is make sure that we've got just a little bit Marjan at the very top to
offset this kind of card looking thing from the very top of the screen.
So on my div with you I can turn right here all just out in a manual style right now.
So I'll say style is going to be margin top 10 picks like the
we could definitely define this inside of a CSSA file but it would be a little bit of a ways to create
a CSSA file just for one simple rule like this.
So I'm going to define it in line on that div now if I flip back over.
Yep that looks a lot more reasonable.
OK.
So this looks pretty good.
So let's take a quick pause here.
Now that we've got something that looks good we can focus on functionality.
So when we come back the next section we'll talk about how we're going to handle user input whenever
user types into this text input right there.