We also talked a bit about what the this keyword means. Again that's the this keyword and how to bind our functions to our component instances. In this guide, we will be styling our mad libs form component to look a bit like what you see here on the screen actually completely like what you see here on the screen. And what we see here in our design. So with the completed app, you can see it looks pretty similar with the exception of you know the rest of the application. But in this video, we'll be getting this done. We'll also be making it so our inputs do not have a border around them and I will show you my process and how I look for solutions like that.

So basically to start off what we're going to do is go to our app and you're not going to do this part but I'm going to type git checkout. And the reason I'm doing this is because I have all the styles in here and I need to walk you through that. So if I type and get checkout and then I reload this it will delete everything I just wrote. So let's start and the first thing we need to do is wrap this in a div with the class name of card-wrapper and then within this let's actually put it a bootstrap card.

<div className="card-wrapper">
    <Card>
    </Card>
</div>

Ok so now we need to do is take our row with all of our inputs and throw it in our card and then I'm going to indent it a little bit so it's looking nice.

All right so another thing we got to do real quick is, do you see how the inputWrapper, it looks different than card-wrapper let's actually changed that so it's formatted properly. So let's go ahead and name an input-wrapper and before you type anything just select it and hit command d three times and then just type in the input-wrapper and that will replace all this. Now that's in visual studio code if that's what you're using. So we also want to do that with our inputDescriptions so to select that hit command d a couple times and then just type in input-description.
All right so the next thing we want to do is go to our page and we will notice that in our app it's not working. Hit command alt j and you'll see that it says card is not defined and that's because we are using card but our app doesn't know what cards it knows what row and column is but it doesn't know what card is and that's because we haven't included it up here. Let's go ahead and include this in the import.

Save it and reload the page and you'll notice it works now.

So let's go ahead and let's get started on our styles in our main.scss file. Let's add a comment here to separate our styles a little bit and then let us start with our card-wrapper and here we're just going to want to add a few things to start so border-radius: 10 px;. That will allow us to have a little bit rounder of a border radius and then align-items: center; and then for position: static; and save and reload this and you'll notice that our items have centered a little bit. All right so nothing actually happened never mind we have a few more things before we do that. So go ahead and type in display: flex;, flex-direction: column; and for the last thing let's go ahead and not put anything. So save that and then reload it and then I'm going to link you to a resource guide in our guide notes below that will show you how flexbox works. So this is the guide

So in here, this defines flex container inline or block depending on the given value. It enables the flex contacts for all its direct children and you can see the displays flex. So this is a pretty good guide. Kind of going over what it is and how it works. Flex direction we're using column and you can see it says same as row top to bottom and so row is left to right right to left. All right so we're going to be using column and that's why our app is working the way it is. So if we go in here and we deleted flex direction column and reloaded the app. You'll notice it's not centered correctly. All right and if we put that back in there and we put row It shouldn't be centered correctly from what I know about flexbox. So reload the page and yeah it's still not centered so go ahead and add in column.

And if you're still a little bit unsure about flex boxes just read this and I'll give you a really good idea of how it all works. This is a really good guide that I've gone through a couple times and it has really helped me learn how flexbox actually works. So in our code let's make it so our inputs have some breathing room. So the way we can do that is a couple different things. So first we want to add our input-wrapper and make sure that the class let's just give each one of our input some breathing room by a margin: 36px 0px;. So that's going to give our inputs or input wrappers rather a top and bottom of 36 pixels margin and then let's give our card. Let's actually implement our styles for our card. So for our card, we want to give it a width: 86vw; and if we do that we'll be given a nice width of about 86 percent of the screen. And if you compare that to our application here you'll see it's pretty much actually exactly the same. You'll notice a few differences in the header. That's just because we set up the header a little differently than when I did it. So the next thing we want to do is fill out the rest of our styles for our card. So it looks like we're going to need a radius for our border and we're going to also need a box shadow because there is no shadow in this but there clearly is one right here. Let's also make a little bit darker than this is. So in here let's go ahead and type that in now. So border-radius: 7px;and a box-shadow 0 4px 30px 0;and then let's give it a nice dark shadow also rgba(0,0,0,0.75) add I think in this I did point sixty five. We can check it by well I can check it. You can't check it but we can check it by clicking that and it looks like the box-shadow is point 06 on that. So. Yeah basically that's what we're doing we give it a bigger nice thicker box shadow. So in our code let's save that and let's also just add the background-color: #fff;

So go ahead and reload that and you should be given this nice box shadow and it should still be white.
We actually don't even need this I'm not sure why I put it there. But let's give it a little bit of breathing room so padding: 50px 80px; and then let's reload that. So that's our card so far. You'll notice it's almost identical to this card except for we have less input. So it's not as big and that it's pretty similar.

Let's go ahead and add the styles for our inputs now. Ok, so back in our code you can see that we're getting a lot of styles in here. So this is where we introduce CSS partials since we don't want to put in a ton of comments every time we had styles and in a bigger application, you can have a lot of styles thousands of lines in some cases so we're going to really organize or code. So it's not messy and so that other people can read it if you do. So if we cut that

then reload our page you'll notice all of our styles are gone for what we've added so far. So let's go ahead and in our style folder. Let's just add a new folder called components and this is kind of following the hierarchy of our source folders so any components just add a new file madlib_form.scss. This is just one way of setting this up like we have our source folder and then we have our style folder and we'll have more components in here so It will be a little bit messy. When we start building applications with even more components we're going to want to structure our file system a little bit differently because it's a lot easier to keep track of things if they are grouped by component rather than by file type.

So an example of that would be to have a component's folder and then have a folder called Madlib form and then in that folder, we'd have our madlib_form.js and or madlib_form.scss. But for now for this project we're just going to do it like this so you can focus more on getting into react and how it works. So you'll notice that it's reloaded and the style is still in there and that's because the styles are intermittent .scss and we need to import them. So if we import components/madlib form you don't need to type in .scss for this, reload this and you will notice the styles are now back in. So let's go ahead and cut out our headings styles and let's do the same thing. Let's just import header and then let's make a file in our style folder. And since this is a new component we're not going to be putting in components directories so header.scss paste that in there and for our variables let's cut that and you'll notice if I put it down here if I import these earlier and then I reload this we're going to get an error because what's happening is we're trying to include these styles and they're calling the referencing these variables but they don't even exist until after. So that's why that would happen so we need to import variables and then make a file in our styles directory and name it variables.scss back in our main.scss just make sure you put a semicolon here as well. So that's partials in scss. Let's make one for our input now or rather just do it in our form since it's in this component and let's fill out those styles. So first thing you want to do is apply styles directly to the input and you're not going to put a dot here because this isn't this isn't a class this is an HTML attribute. So you'll see that we have a border and then in our completed app we just have a line under here the way we can get that effect is by removing all the border except for the bottom and you can do that pretty easily by having border-top: 0px;, border-left: 0px;, border-right: 0px;and border-bottom: 1px solid $mainGray;

so referencing our main gray in our variables file and this is going to be this main gray color. Let's save that and reload the component or the app rather and we should have the effect we're looking for. The next thing you want to do is make this stretch as far as possible. You might think at first that it's just because this isn't centered but it's not. I'll show you why in our input we can do text-align: center;, font-weight: 500; and then we'll save it and reload it and you'll notice that it's centered but it still looks awfully small and that's because our input is not taking up the entire width of the column. Hit Command Option J or get into your inspect element and tap this

and then hover over this. You'll see that it is nowhere near the size of our column md 10. So the way we can fix this is by going in our CSS we add width: 100%; and this is going to give us a width of 100 percent of the parent object so rewarding that it will be 100 percent and will look exactly like this or pretty close.
So the next thing we want is this we want to see our description label and the way we can do that is by adding some more css by referencing our input wrapper tag or input description tag. The first thing you want to do is say give it a nice gray color so main gray would work let's reload that and see what it looks like yeah that's looking pretty nice compared to our design.
It looks like the same color. It looks like it's a little bit different. So in here let's put in a different gray. Let's go #b3b3b3 and then for font-weight: 300; and then for font-size: 12px; that should give us the exact effect we're looking for.

All right so the next thing you'll notice is that these are not centered correctly an that comes back to the bootstrap columns. So you'll see that variable color or description color is taking out the entire column md 12 whereas this label is calling md 2 and this description or input is column md 10. So you might be able to think of a solution and that solution is to change this to 10 that you see here in the description. But that won't work because now it leaves 2 open over here. So what we need to do is somehow put a div in here before input description width 2 much like we have above it with our label and our input.
So the way we can do that is by going into our madlib_form.js and just above the description you want to change just 10 and then add in a Col md="2" and don't put anything in it just leave it blank.

That will give us the exact effect we're looking for. If you copy that save it and reload the page we'll be given the effect we're looking for. Awesome so let's go back in here and let's just copy this across all of our columns. Not all of our columns all of our input descriptions rather.

Now that we have that in place let's save and reload the page and it should be looking pretty nice. Sweet so that looks almost identical to what we have going on here. If you look at the reference to bootstrap you can kind of get a good idea of what's going on here. We discussed this already earlier but the reason I linked this is that you might be wondering what md means because we keep saying md=10 like what does md=10stand for and it stands for media. You will notice in here that some of these don't have md and that's because of this description it says columns start at 50 percent to 6, 50 percent wide on mobile. Six out of 12 is 50 percent and bump up to 33.3 percent wide on a desktop. So basically this call 6 is very similar to if we put call sm 6 for small because a mobile screen is small. So a medium screen would be a desktop which is like a 13 inch MacBook Pro or something then a large screen may be a big monitor or something. So if you just google this like I did earlier how does or what does md stand for in bootstrap. Go ahead and click this first example and just googling this is something I wanted to show you because this is how I solve my problems and coding and you need to learn how to google things rather than just copy over. So that's a good skill. So you'll see that these are all small and you'll see that it doesn't come down until awhile. So if we expand this and then we change these all to md, If I have the right idea of how this works should be it should move down to something like that. So I am gonna hit run and it looks like it didn't do that.Okay, I was just a little too far out. So if I changed it back to small and then hit run then it will all be back. So basically it's the same thing with large.

So if we are here like I was on md and it wasn't working then I hit run it's going to do that with large and you might be wondering like okay what happens if I put small on here. Well, it's going to kind of screw things up a bit and you might think that you can do stuff with this since it's only displaying this much but this isn't the approach you want to take. Rather you'd want to do something like this where we have a whole new row if that makes sense. All right so let's go back to our app and see what else we need.

So it looks like we still need our label for our input. So let's go ahead and add that and before we add in the styles for that I'm just going to show you a little bit more bootstrap how this works. So basically since we have one row here with four inputs it's going to size down to look really nice on my mobile screen or something see how really nice that works. That's how that would look on your phone for example. So if I open this up and actually inspect the element we can click this right here and this will show us what it looks like on different phones. So on an iPhone 8 plus is what this look like. On a Nexus 5X that's what it would look like. So an iPad pro looks just like a actual website because it's so big but something like the iPhone X scaled down would look really nice still. So while we have bootstrap to do this it's still really important to use media queries but we won't be doing that in this guide or probably even in this course.

So let's add in those styles for our label so we can at least get this gray looking label in for now so let's do that now. So the way we can do this is by first going back into our code and seeing what we've named it so it still looks like we call it the green label. Let's go ahead and refactor this to have a dash like these other class names. So if you remember it's command d after you've selected it, hit that three times and then you can type it in so green-label. Now in our madlib_form.scsslet's add this in here so .green-label.

The first thing you're going to think is green so let's put in the background-color: $bottegaGreen; and that's actually a variable we have available here that I included in the guide notes below. So back in here you can already see our labels because I included that color. So let's make it look like a circle by first giving it a border-radius: 100px; saving that should make in a circle. Not sure how it will react not giving it a height and width yet. So it's not wide enough to even be a circle. But the number is making a tall enough to distort that. So let's go ahead and add in a width: 26px;and height: 26px; and then that should fix that should be a circle. And then we need to add some finishing touches to that like font-size: 18px; and text-align: center: to put that directly in the middle and a color: white;. Just so we don't override our color anywhere. So you'll see that that's working really nicely and it looks pretty much identical to what we see over here. We will be applying the gray style later on when we deal with state a little bit more so we can tell if these have anything in them. So let's go ahead and go back to our code.

And that should be it for this guide. Let's go ahead and commit our code

git status
git add .
git commit -m "added madlib_form styles and put our main.scss into partials"
git push origin master

And if you want to look over the code in this guide I will this commit in the description below. [00:24:52][5.0]
[00:24:54] All right so that's it for this guide and in the next guide I'll be introducing functional components and how we can refactor our madlib_form.js so that we don't have to copy and paste this input 5 billion times because it's nasty how it is and we only have 4 inputs in here so we're going to introduce a lot cleaner method of doing this.
All right see you guys in the next video.

Resources

source code
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://material.io/guidelines/material-design/environment.html#environment-light-shadow
https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match