[00:00:00] Hi. Welcome back to the react course in the last couple of guides. We learned about redux reducers and actions and in this guide we are going to be setting up some styles for our library our current library here and then we will move on to the next component. We will be building and learning how to display the same data that component that component being the schedule component. So anyway before we go on about that let's get those styles and so in our app that Jay asks the first thing we want to do is increase my font size here so you can kind of see this a little bit better since it's been kind of hard throughout guide so far but yeah another that's ready we are going to want to add some tags in here. So the first thing we want to do in our app digests is adding a div class name here and let's just call this main container and then we want to wrap this in its own dish because we're going to be adding in the schedule component later on. So it's just that to days here and pays that back in right here the H1 and the course library component. Okay. So now that you have that end let's give this Dave here a class name. Of course I'm just library actually. So library for course library. And then let's give our H1 here the class name of library Headford. [00:01:42][101.6]
[00:01:43] Now for this one let's just put class names equal to schedule and then let's let's see let's actually add in the styles for this right now just so we can kind of set that up so what's out in each one here as well that says with a class name of schedule header. Okay months just typing in my schedule. Okay now let's go into our CSSA and set this up set our main container up with flex box. We are going to be using the react strap in this the bootstrap react strap. KENNEDY Oh we used in the first app so we're going to learn a little bit more about flex box or at least use it again probably won't be learning much about it but sort of start off with this typo main container. Let's give it a type of flex display Flack's. So if we look at our design here you can see this is about probably like three fourths or two thirds of the screen and this is about one third. So let's go ahead and write out our tags so we have our we have our schedule in our library so you can close everything else as well and make sure you're in the main diciest as doing this. So in our main container or in our CSSA let's put in the dot library and the class schedule and I'll give these each a flex grow give this one a Volume One let's give this one a value of two and then and here Nermin container. Let's give this a justified content of what C should let's just not type that idea. So backdrop you can kind of see that. This one's taking precedence it's bigger. Now let's see what we can do. Let's give the schedule a width of let's say 30 percent and give our library with 70 percent OK. [00:04:11][148.0]
[00:04:12] So that should set that up a little bit better. It's out in a few more flex box things and use to justify content center line content center and flex direction. It's automatically robot let's just type it out just so we remember how it how it's working. So that should be good. Yeah. Now let's go ahead and make this a little bit better. Let's add in the styles for our actual course library component. So the first thing we want to do is push this in a little bit like you see you see here. So let's just give our library a padding of six REM and if you don't remember what Rand is it's just a unit of measurement. I think it's relative to the font size of the app. You can search that up on W3 just typing Rammer or something 3 and it should bring it up. So we got that indented now looking like crap here. Now let's go ahead and add a couple other things. Let's let's just OK let's put position Apostolou left 0 that should be good. OK she now style the header a little bit. Let's actually get rid of this for now. We don't need no warning signs. So for our library header and type tags a library heter I would say border 9 and border last since we're on our border. You see in the design and we want to add some colors so this is going to be the blue one for a certain NBC. And I actually got that from the design. [00:06:19][127.0]
[00:06:19] You don't have access to this inspect mode but the way I got access to these colors is in the design I can just click and it has a lot of the stylus for you. So it makes things a lot easier but it doesn't. They don't always line up perfectly. You can't do things. It doesn't generate Skewes dials or anything. It's a work in progress definitely but yeah I got the color from here. So now the color will be in the description below or you can just type it in. Yeah. So we have our border here now. Think about how we can get the border to be away from this where we can do that is through patting or padding. We don't want any in the top or bottom so we'll do zero and then we'll do 25 pixels and then that should push it over a bit. Now we're going to need access to the fonts they're using. As you can see right here. So first thing to do is copy that and then I'm going to provide a full value and then I'm going to change the font size to 34 pixels way bold that should be good. So let's click on that. So I got that from here earlier it's 34 pixels foments bold. We could out in line with my height but I don't think that's really gonna effect much. But again like I was saying this is always I feel like it's saying with 200 tall pixels height 47 pixels you don't want to add that in because that's kind of my stuff. So I just leave that out and then let's go get this far from Google. I left the link in the description below. [00:08:05][105.6]
[00:08:06] If you go to index the HDMI or file in our project here you'll see it's already importing this fine. Let me make that clear. Okay. Yeah. It's already empowering that font but we want access to more than that. So I'll leave that in the description below. I'm just going to copy it in. You can do the same thing. I just got it from Google Google font so that's where I found that. And you'll see the fonts the same. Now it's out in some more styles. Okay so since this is a list we want to style it like that all we have to do to do that is typing UL and then we can style the list if you go to our course library you remember returning a list and then we are returning list tags within that every time we read. So let's go ahead and use the list and the list. Tags. OK. So first thing you want to do is get rid of those dots list style type 9 margin's 025 pixels. Now give us margin on the left and right on the top and failed because we can put a colon here. See that. All right that's looking pretty nice. As you can see in the design it's kind of indented a little bit it's not directly lined up. The card we will put around this will wind up put that which we will do in wait for God. I'm not going to sound like Cardin immediately. [00:09:42][95.6]
[00:09:43] And then let's put in of having a zero because lists by default have patting soap poured over a little bit and then once we actually do that in this guide will indented in this guide. We're not going to add in the card but the way we can indented is by going to our attack here list here and sing margin 10 pixels zero. That's going to push it down a little bit and then to get the indent we want to add and. And what I did is I actually got the exact values from here just to make it as close as I could it's like from the side it's 25 pixels from the bottom is 25 pixels. I think to write here while I'm not sure but I grab the values by looking out there so you can just copy those and from the guide nodes and I'm going to copy those and so on the list here. Peso's and it's going to be padding top 15 pixels padding bottom of 16 padding left 25 and padding right to 25 pixels. So go ahead and save that and you'll see we're giving this looks pretty nice. Now let's go ahead and let's just so you'll see here in our design that it kind of hovers over the other component a little bit. And the way we can do that is by making the width of the list 120 percent so it slightly extends over. So in our list let's just make our 100 list let's make this with the 100 percent. We're not exactly going to see how this works yet. [00:11:22][99.4]
[00:11:24] Since you can't there's no color on this but you can see that it's kind of going over all actually just so you can see that if we take our scheduled time and give it a background color we might as well give it the the wheel already declared that it might as well give it the gradient as well. All right. So if you go to the design or if you watch me go to essence you don't have access to the inspector mode. I can click on this and it says background when your gradient gives you the exact values. So that's one thing that I've noticed invasion is good with his gradients will give you access to those pretty nicely. So that should work. Okay. So that's working it's in here and you can see it's not it's behind it. So let's go to our library. Must just give it a z index of one to give a precedent. So it's about that you can see that it's above it and we'll be modifying these values. So it changes up and looks better later on but I just wanted to give you an idea of how we do that since we are adding in some of these styles. So let's go ahead and let's make our Hunter actually have the same color as the border OK so that's looking nice and I think that's it for this guide. Let me just think if we need to in any other stuff. OK so let's not in the title color for the up and running and you X and of course description because I was kind of a whole point of me wanting to do this thousand years make this more readable since the title is a little bit carefully differentiated from the description very well. So let's go ahead and see what we named that. [00:13:21][117.8]
[00:13:22] So we have in our course library digests we put course himbo course title container for title of course description of course description title. We want to have access to those here. So let's just start with coarse description. And let's actually just type out the tags we're using. Of course description of course title and chorus description title. Let's go back to that of course. We are of course description title and description title or description description title and we are of course title I think. Yes of course title. I'm just going to put this above this so we can kind of separate those. Okay now we have. Yeah we don't really need to add in the styles for this year. Of course. Okay let's go ahead and put in the styles for those few that we are including in here support course title. Just give it a color. Let's check here what it is in the design. The course title I'm going to copy that and then I'm going to give it a farm family who. Here we wait. Okay let's put that in and then I'm going to give the font size of 16 pixels. And here 18 pixels but when I was messing around with it earlier it looked nicer. 16 pixels OK. So now you can kind of see that style that a little bit. Let's go to our course description and description tight on all right. So description and description title that's going to be right here. And then the description of the title and the description let's go ahead and give the description a with a 60 percent of padding top 25 pixels. [00:15:43][141.5]
[00:15:44] And the reason I'm doing this is because one that 25 pixels to make it go down a bit and then we're doing 60 pick 60 percent because if you look in this app that I've made it's cut off right about there. So we only want it to be about 60 percent. We don't want it to extend all the way over here and on the on the design it looks like that as well you'll notice it wraps right about here it doesn't go on and again looking at this it doesn't really work as well as with 540 pixels but obviously as we resize our application it's not always going to be 540 pixels so that's why we don't do that when building these apps. We don't want to put in those exact values because it makes it really non responsive and hard to manage. So for the title it's just given color. I think it's the same color as this. Yeah it's the same color. We didn't click. Same color and then let's say font family copy the only guy knows like I said a couple hundred times when we want a font size of 16 pixels. We polled 5 922 pixels. Text align. I don't think it's going to be centered but we might as well make it last. We don't need that we'll just get rid of that. So back in our app here you can see that it's kind of made the nicer I'll get rid of the laughter and I don't think that's going to do anything yes. Still the same I'll get rid of the line that might affect it a tiny tiny bit. [00:17:41][117.1]
[00:17:43] Yeah you'll notice it barely moves. I'll just leave it in there because that's what was in the envisioned design and we want to match this design as well as we can. Obviously when we completely out it's never going to be exactly the same had we really would be really impressive if you could exactly match this design. I mean I'm sure it's possible but that's our main concern here. We just want to learn how to build these apps so we can build other apps in the future that we don't want to just replicate these apps completely. That's not the point of this course. Obviously we'll try and get it as close as we can. The main concern is teaching you concepts so you can develop your own apps for yourself and for clients after you are done here. Okay so that's going to be it for this guide. I'm trying to think of anything else on that end. He definitely went further into styles than I thought I would but that's alright because now we kind of have a clear understanding of what this is supposed to look like and stuff so let's go ahead and in the next guide we are going to get into the my schedule component and we will map over the date of the same date over here and then after that we will add a Buie encoding unrolled and a button that we can change that value with so we all display in my schedule according to whether or not you've enrolled in the course or not. So that's what we will be doing. [00:19:12][89.1]
[00:19:13] I will see you in the next set of Guides specifically the next guide Katchi leader hold up we did not committer code and you're not going anywhere until you your code. So open up here at Terminal. I think it's status act get command implemented a good amount of styles for the course library and courses the list added in my schedule container. Now I'll catch you the next guy after you push. See you all later. [00:20:01][47.7]
[1190.4]

Google font link
<link href="https://fonts.googleapis.com/css?family=Alegreya|Montserrat" rel="stylesheet">
Styling for ul li
ul li {
margin: 10px 0;
padding-top: 15px;
padding-bottom: 16px;
padding-left: 25px;
padding-right: 25px;
}

To make it shorter you can put on one line

ul li {
margin: 10px 0;
padding: 15px, 25px, 16px;
}

Linear gradient color for .schedule
background: linear-gradient(118.95deg, #6F48CE 0%, #32CBE8 100%);