1.3 Adding Semantic UI to Our App

So here we are in our basic running application that we saw in the previous lesson. Nothing new going on here. The only thing that's changed is I've opened up the developer console, or the developer tools, within the Chrome browser. And if you've never done that before, you can do that by these three dots up here on the right-hand side, and simply going down to More Tools and selecting Developer Tools, or whatever the appropriate shortcut is for your browser on your platform. So once you've done that, you can kinda see what's going on here. I can see the elements. I can kind of hover over them and I can highlight where they are on the page. And this is gonna be very beneficial as we start to build off this UI, and start to build out the Vue.js functionality. Because what's gonna happen here is if you do make mistakes or if things aren't lined up correctly or if some of the scripts are written improperly, you are gonna start to get errors. And we are gonna see those down here in the bottom on the console. And when you're using any new sort of frameworks, it's definitely beneficial to have these developer tools open so you can always see what's going on. Now the other thing that I wanna show you in this lesson is how we're going to go about the development and debugging process, as well as introducing this Semantic UI into our application. So let's start with that. So as you can see right here, I just have the basic run-of-the-mill out of the box Vue.js application. And I want to bring Semantic UI into it and then I want to make sure that it's working. So how do we do that? Well, I'm gonna switch over here to my text editor and down in the index.html file is where I'm starting. This is kind of where the entire application kind of starts. Now within here I'm going to drop in some required references to bring in semantic. And so I'm gonna paste them in here and I'm gonna show you what I'm doing. Okay, so what we have here are a couple different references. We have two script files, and I'm point these all in from CDNs. You can obviously go out to Semantic and just get exactly what you need. And you can have them run locally from static files if you want to, but I tend to use these CDNs. I just like to not have to download and manage those things locally. I just like to be able to pull them down from some source out on the web. But ultimately whatever you wanna do will be fine. So these two script references here. The first one is for jQuery because that is a requirement to be able to use Semantic. And then the other one is actually a link to a style sheet. So I'm gonna go ahead and cut that out of the body. And I'm gonna bring that up into the head up here, and I'll just stick this maybe at the top of the head that should be fine. And go ahead and save that. So now it doesn't really look like anything is happening. And it really isn't. But there are some things happening behind the scenes. So now I've added these references, and I've saved my file. Now, the nice thing about using the webpack template and then running the Dev version of this service or of this application locally on my machine, is everything kind of updates in the background automatically. So now you'll see if I come over and take a look at the source of my page or the elements, you're gonna see the two script references at the bottom, as well as up in the head you're going to see my link to my style sheet. So that just goes to show you that no matter what sort of changes we make to the files that are being served up within the source code of our application. If we make changes to them and save them, they're gonna manifest themselves here immediately. So let's see another example here. Now if I come back over to my source code, and now that you see that I have Semantic added into my page. Let's go ahead and add in some styling from that framework so we can see that it's working. So one of the things that we're gonna be using quite a bit in this project are gonna be what are known as cards. So I'm gonna create a class or I'm gonna create a div that has a class of UI card in it. And then from there a card is going to have content so I can create another div here that has a class of content. And then from within here, I can create another div and let's just call this the header. So a card has a header which has some text in it. We'll just say, Hi there, I'm a Card. And let's go ahead and save that. Now as soon as I save that and comeback over to my page, you saw the page updated and here's an example of a card. Hi there, I'm a Card. And this is the header of that card. And let's just say I don't like it over here on the left, I wanna center that. I can simply change this from a UI card to UI centered card and go ahead and save that. And immediately it's gonna update and move over to the center. So that's just a little bit of a flavor of how we're gonna be using the Semantic UI framework with the Vue.js framework to create a very cool kind of responsive application here that's going to allow us to create basically some flash cards. So now that you see how this debugging process and this Semantic process is going to work, it's time to start digging into the actual Vue.js framework itself.