1 00:00:01,040 --> 00:00:05,600 In the section we're going to hook up semantic UI to our project and add in just a couple of class names 2 00:00:05,600 --> 00:00:09,800 here and there just to get a little bit better styling than what we have right now that will allow us 3 00:00:09,800 --> 00:00:14,600 to just focus on actual functionality as we go forward and we won't have to take any awkward pauses 4 00:00:14,600 --> 00:00:17,790 to do styling to make sure that our app looks at least somewhat reasonable. 5 00:00:18,020 --> 00:00:22,220 So to add semantic UI to our project we're going to go through that same kind of awkward process that 6 00:00:22,220 --> 00:00:23,450 we've gone through before. 7 00:00:23,600 --> 00:00:31,640 We're going to do a search for semantic UI CDN and then one of the first examples here will be CDN JSE. 8 00:00:32,250 --> 00:00:35,060 And then on this page Remember we get this big list here. 9 00:00:35,060 --> 00:00:40,670 You can go down to the very bottom or just do a search for semantic men and you should see it's semantic 10 00:00:40,670 --> 00:00:46,610 men see CSX so I'll go ahead and copy that. 11 00:00:46,690 --> 00:00:53,220 I can then open up my code editor again find the public folder open up the index site mail file and 12 00:00:53,350 --> 00:00:57,270 there and then I'll hook this thing up with a link tag. 13 00:00:57,690 --> 00:01:04,560 So I'll put a link inside the head with a rule of style a sheet and an H ref. 14 00:01:05,040 --> 00:01:07,830 I'll paste in that links like so and then close off the tag. 15 00:01:08,160 --> 00:01:13,660 So the same step that we've gone through with all of our other applications OK cell looks good. 16 00:01:13,690 --> 00:01:15,200 So going to save this file. 17 00:01:15,310 --> 00:01:20,560 Now if I flip back over to my application I should see that I've got a little bit different styling 18 00:01:20,560 --> 00:01:21,070 here. 19 00:01:21,130 --> 00:01:22,690 Yeah it's a little bit different. 20 00:01:22,810 --> 00:01:24,510 Whatever we'll figure this out in just a second. 21 00:01:24,520 --> 00:01:28,950 Let's just set some class names in and it will make this stuff look better. 22 00:01:29,110 --> 00:01:29,350 OK. 23 00:01:29,370 --> 00:01:31,930 So to get started I'm going to find my search bar. 24 00:01:32,070 --> 00:01:39,240 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 25 00:01:40,410 --> 00:01:47,530 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 26 00:01:47,530 --> 00:01:51,790 here with a div that has a class name of field 27 00:01:56,290 --> 00:01:57,660 and then just to be really complete. 28 00:01:57,670 --> 00:01:59,680 I'm going to give the thing a label as well. 29 00:02:02,020 --> 00:02:07,650 And I'll give it the label image search like so. 30 00:02:07,760 --> 00:02:13,360 OK so we now flip back over after saving this file what looks like I got a little typo in there. 31 00:02:13,370 --> 00:02:16,630 I left off the closing bracket on the div by mistake. 32 00:02:17,370 --> 00:02:18,540 So I'll say that again. 33 00:02:18,630 --> 00:02:23,260 And now I see this much nicer looking image search thing than than what we had before. 34 00:02:23,310 --> 00:02:27,520 Now notice it is stretching the full width of the page which looks just a little bit awkward. 35 00:02:27,750 --> 00:02:31,230 So to fix that we can go back over to our app component. 36 00:02:32,360 --> 00:02:38,490 When the div that is currently wrapping the search bar and to that div I'm going to add a class name 37 00:02:38,970 --> 00:02:44,580 of UI container like so if I go back over. 38 00:02:44,630 --> 00:02:50,090 Now we've got a much more reasonable with for the Image Search component or that little kind of tab 39 00:02:50,090 --> 00:02:50,870 right there. 40 00:02:50,870 --> 00:02:55,220 Now last thing I want to do is make sure that we've got just a little bit Marjan at the very top to 41 00:02:55,220 --> 00:02:59,140 offset this kind of card looking thing from the very top of the screen. 42 00:02:59,180 --> 00:03:04,180 So on my div with you I can turn right here all just out in a manual style right now. 43 00:03:04,510 --> 00:03:10,920 So I'll say style is going to be margin top 10 picks like the 44 00:03:13,860 --> 00:03:18,090 we could definitely define this inside of a CSSA file but it would be a little bit of a ways to create 45 00:03:18,090 --> 00:03:21,040 a CSSA file just for one simple rule like this. 46 00:03:21,070 --> 00:03:25,630 So I'm going to define it in line on that div now if I flip back over. 47 00:03:25,730 --> 00:03:27,530 Yep that looks a lot more reasonable. 48 00:03:27,730 --> 00:03:27,990 OK. 49 00:03:28,000 --> 00:03:29,010 So this looks pretty good. 50 00:03:29,020 --> 00:03:30,360 So let's take a quick pause here. 51 00:03:30,370 --> 00:03:33,710 Now that we've got something that looks good we can focus on functionality. 52 00:03:33,910 --> 00:03:37,980 So when we come back the next section we'll talk about how we're going to handle user input whenever 53 00:03:38,010 --> 00:03:41,000 user types into this text input right there.