- Read Tutorial
- Watch Guide Video
Right here we have our input in the main.scss, and we just need to get these styles in here on our grid. We already have the grid, so it should be pretty simple. All we need to do is throw in these styles, so I'm going to start off with our number. It's down here the bottom in our SCSS file, and in our app here I going to hit command + b to close out the side tab.
I'm going to head back to the design, and right here we can see that it's got this green background, and we already know that color is the #00CB79 that we used up here. I'm going to copy this background color in our file here on about line 39 or somewhere around here. I'm going to go down here and put it on the number.
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
}
Okay, so the next thing I like to do is look at our app because it should be almost done. You'll see that it looks pretty good, although, it's got a couple of problems. One, it's not a circle, and two, the number isn't looking good.
What we need to do is style in this number, and that can be done pretty easily by going in here. Let's go to our header.js. Let's close it out, and let's open up our input.js so we can see the tags here.
We have our number, and it just contains the number in it and its a label. We just need to apply some styles to what's in here, and we could put another tag in here like another like an <a> tag or something, but we don't need to. What we need to do is just put the styles in here. So let's say:
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
}
Now I'd like to go into our app, and see what we have. That looks pretty nice. Now let's go comment out line-height, and see how much of a difference it has. It might not even be necessary. So going to cut that I'm going to save it, and quickly go back to the app so we can see it before it updates. And you'll see that it doesn't even do anything.
I'm going to change it one more time and go back yeah. I didn't notice the difference. I'm just going to get rid of it. What we want to do now is basically line it. So we want to say:
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
text-align: center;
}
Now you see how it is a little closer to the top than the bottom. Maybe the line height will fix that. So let's go in here and say:
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
text-align: center;
line-height: 24px;
}
Let's see how that works. It doesn't do anything, but let's see what we can do. I'm going to inspect the element. Basically, the reason it's doing this is because the input is a certain height. So it's expanding our label to be a certain height. So that row is a certain height because of the input.
We can easily just say something like margine top is like two or four pixels or five or 40 pixels. So let's say:
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
text-align: center;
line-height: 24px;
margin-top: 4px;
}
We might have to put in padding. So yeah, we're going to have to put in padding.
We can easily just say something like margine top is like two or four pixels or five or 40 pixels. So let's say:
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
text-align: center;
line-height: 24px;
padding-top: 4px;
}
Now, margin would work if we had another element, or another tag in our input.js like right in here when we were styling the inline tag, but since it's the entire thing: we want to do padding
That looks pretty nice. It might look a little too far down, so I'll just minus it a pixel. I'll say 3px. Now that looks really good. Now we just need to make it a circle. We can do that pretty easily by saying:
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
text-align: center;
line-height: 24px;
padding-top: 3px;
border-radius: 50%;
}
If you take half of the height or width it can make it a circle. So if we say 50 percent, it is going to make it a circle. That looks nice. Now let's put it in the styles for the input and the label. Then after we do that that's when we will add in the little spaces you see here. So like you'll see it's like .56%.
I don't know why it's not using pixels, but we will put in those. I'm not sure it's not using pixels. It's strange, but whatever. It doesn't matter. We'll just make it look good, or we can put in percentages either way. So let's let's throw in these styles here.
Now one thing that I also noticed is that the font family is different on these numbers here. You'll see it's still the same on here, like the default font. What I'd like to do is set the font family on the input. I'll just copy it from where it is on our header. So on line 14 or so, it , it might be on a different line for you.
We're going to copy font family, and we're going to scroll down here and put it in our input.
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
&__title {
grid-column: input-s/input-e;
}
input {
grid-column: input-s/input-e;
}
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
padding-top: 3px;
border-radius: 50%;
}
}
Now that that's in there we can add two here, and you'll see that it changes, and that it looks pretty good. OK. Now I also notice that changing that font actually pushed it down a bit. Made it look a little bit different. What I'd like to do is go to our padding, and say padding-top: 1px;.
That not's going to be much of a difference, but I'd like to leave it in there just in case we want to make it bigger or smaller later on. So we have one pixel, and that looks good.
Now let's move on to the input. We have our input, and first thing you'll notice is that it doesn't have a border. Most likely, that's the first thing you'll notice. Let's go to our app here. First thing I want to do is actually try and get these percentages away, because I want to get the exact units, so I'm going to reload the page.
Now we can see that it's 40 pixels that looks a lot better. Now we can get these specific units, so we can make it look closer to our design. It's 40 pixels wide, and then 190 pixels width and then there's that missing border. So let's go to our input here, and let's say:
main.scss
&__title {
grid-column: input-s/input-e;
}
input {
grid-column: input-s/input-e;
border: none;
width: 190px;
height: 40px;
}
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
padding-top: 3px;
border-radius: 50%;
}
}
Now in our application that messes it up quite a bit. Let's see.
I'm going to comment out the width and see how it looks. I'm going to comment out the height as well, and we'll just do that next. Now let's put in the styles for the actual text in here. We want to make it have the font family which is right here. We don't need to worry about that, but then we also want to say:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
&__title {
grid-column: input-s/input-e;
}
input {
grid-column: input-s/input-e;
border: none;
color: white;
font-size: 15px;
// width: 190px;
// height: 40px;
}
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
padding-top: 3px;
border-radius: 50%;
}
}
That looks pretty clean. Let's go to our application see how clean it looks. So that looks great.
One thing I noticed immediately is that it applied that font family and text-align to our label as well. Which looks really good. We don't have any placeholders, so I can't really find the input. Oh, the reason you can't see anything is because the text color is white. I don't know why I changed it to white, it's still black.
What I want to do is get rid of that color white. Then another thing I want to do is: you see this line right here? We can put that as the border bottom, or we could do that on the label. What I want to do is actually do it on the label. So on the label here I'm going to say:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
&__title {
grid-column: input-s/input-e;
border-top: 1px solid #B3B3B3;
}
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
// width: 190px;
// height: 40px;
}
Now you'll see that we have that line, but the text on our items on our labels here needs to be a bit different. It's a little bit too big. You'll see that it's a little bit too big, and it's not the right color.
What we need to do is simply add that in, by going to our app here and saying:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
&__title {
grid-column: input-s/input-e;
border-top: 1px solid #B3B3B3;
color: #B3B3B3;
font-size: 12px;
font-weight: 300;
}
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
// width: 190px;
// height: 40px;
}
We might not have access to all these weights. You might have to import them from Google fonts, but we'll do that if we end up wanting to. Then we obviously have text-align: center, so we don't need to do that. Now in our application, you'll see that it looks very very close to what we have in the design. It almost looks exactly the same.
Now let's see why this isn't text-align: center, the input, for some reason it's not in the center here. What I want to do is just kind of a click one of these. Yeah. That looks like it's not text-align: center for some reason. Let's go to our input and let's say:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
&__title {
grid-column: input-s/input-e;
border-top: 1px solid #B3B3B3;
color: #B3B3B3;
font-size: 12px;
font-weight: 300;
}
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
// width: 190px;
// height: 40px;
}
Let's see if that fixes it. I'm not sure why it didn't inherit that from right here. Perhaps it's because we're using an actual element tag instead of a class. I guess that's how elements work. Maybe that's just React. I don't think so, but now we have that text-align: center. Now we just need to make it bolder and look a little bit more close to this.
What we can do is we can go to Google here and we can go to Google fonts and add in that weight. So when you hit add and then you go to right here you'll see that we have customize. We just want to select, well I guess 300 is already there, what we want to do is basically make it semi-bold so that should be good.
Now you can go to embed and copy this link and then go to index.html and throw it in right here.
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600" rel="stylesheet"> <title>Madlibs</title> </head> <body> <div class="app-wrapper"></div> </body> </html>
Now we have access to a few specific font weights, and we should be good. What I want to do is end the guide here because I think my mouse is about to die, and I don't offer any other mouse connected. So let's go ahead and commit our code. Let's go here and say git status, git add ., and what I'd like to say is git commit -m "styled the input component". Let's go ahead and hop into that next guide right now.