- Read Tutorial
- Watch Guide Video
Okay, so let's go ahead, and let's go down to our quantity SCSS file and we're going to want to style all these, okay, we've got plus, count, and minus. Okay, so in count, we're going to want to get the styles that are in the design here, so we've got quantity.
Okay we've got this box I'm going to copy it and I'm going to paste it in here, but don't copy all these things because I'm just going to get rid of some of these. I'm going to get rid of box sizing, but this one actually has a lot of what we want. Okay, so I'm going to save that and I'm going to see what that produces for us.
quantity.scss
.quantity {
&__count{
height: 41px;
width: 65px;
border: 1px solid #E6E6E6;
border-radius: 3px 0 0 3px;
}
&__plus {
}
&__minus {
}
}
Okay, we've got a height of 41 pixels, a width of 65 pixels, a border of 1 pixel solid #E6E6E6, a border radius of 3 pixels 00 and 3 pixels. Okay, we have this box now super easy, super clean. Now we need the text in there to look good and be big and be centered.
Okay so let's see the text font size is 22 pixels and the color is a bunch of 3s so really straightforward. I'm going to type those in so we've got a font size of 23 pixels and font color is #333. Okay so look at that, it looks good.
quantity.scss
.quantity {
&__count{
height: 41px;
width: 65px;
border: 1px solid #E6E6E6;
border-radius: 3px 0 0 3px;
font-size: 23px;
color: #333;
}
Now we just need to center it, that it's really easy to do, just say display is grid, justify items is center, justify items is center, and align items is center.
quantity.scss
.quantity {
&__count {
height: 41px;
width: 65px;
border: 1px solid #E6E6E6;
border-radius: 3px 0 0 3px;
font-size: 23px;
color: #333;
display: grid;
justify-items: center;
align-items: center;
}
Okay so those three lines will allow us to center that 1, do you see how it's centered now?
So let's go ahead and let's get the styles for the plus and minus. Okay for the plus I'm going to paste that in we're going to want a height of 21 pixels, a width of 29 pixels, and then the same border on both of those. So you'll see that the border and the border color is the same on all of these okay. So let's go ahead and take the border out and let's go up here and just say &count, &plus, &__minus and let's apply that border to all of these okay.
quantity.scss
.quantity {
&__count,
&__plus,
&__minus {
border: 1px solid #E6E6E6;
}
Now the minus is going to be very similar to the plus okay, so let's copy everything in the plus and put it in the minus, except for the border is going to be a different space okay. so get rid of that 3 pixels and put it all the way to the end.
quantity.scss
&__minus {
height: 21px;
width: 29px;
border-radius: 0 0 3px 0;
}
Okay, now let me just verify with the design that that's correct. All right, so that should work, let's go ahead and try this out. Yeah it looks good except for we have the same problem we had with the one in that the plus and the minus are not centered. So really simple fix we just need to apply the same grid to all of these items and we already have that set up by just taking this &plus and the &minus and placing it in up here.
quantity.scss
.quantity {
&__count,
&__plus,
&__minus {
border: 1px solid #E6E6E6;
display: grid;
justify-items: center;
align-items: center;
}
Okay, let's go back into our chrome and you'll see that it's all centered now.
Okay, now one thing I want to show you, it's pretty cool, just to reduce a couple more lines of code. You'll see that these heights and width are the same on plus and minus although we don't really need to say plus and minus and apply those to both of those separately. What we can do is take it and we can put it in here up at the top, and you might be thinking wait that's going to go on count too. But the count has height and width right here, so it's going to overwrite this so it doesn't matter.
quantity.scss
.quantity {
&__count,
&__plus,
&__minus {
border: 1px solid #E6E6E6;
display: grid;
justify-items: center;
align-items: center;
height: 21px;
width: 29px;
}
&__count {
height: 41px;
width: 65px;
border-radius: 3px 0 0 3px;
font-size: 23px;
color: #333;
}
All right, now you'll see that this works. So go back into Chrome and you'll see it looks the same.
Now the next thing we need to do to finish off this component styles is we need to get them over here, we need to develop a little grid for this. So let's do this, let's say in quantity we have a display of grid, and we have a grid template rows, we have 21 pixels and 21 pixels, and then that's it for the rows. And then let's just say start, middle, and end and real quick I want to point out that these are each a 21 pixel height although the height on count is only 41 pixels which doesn't really add up.
I'm trying to think of something that would make it add up, if these are 1 pixels all around, that would make these about two pixels higher because you've got a border of 1 pixel on the top and bottom. So it's really 23 + 23 = 46, and then you've got 41 with a border of 1 pixel on top and 1 pixel on bottom which means that 41 + 2 which is obviously 43, but you know let's do that anyway. OK so we got 23 + 23 and we got 43 anyway.
Let's just see how this looks and then we'll mess around with if we need to. Okay, so that looks good, let's go ahead and say grid template rows start and it's about 65 pixel width for that main box and we have middle and then we have 20 pixels for the plus and minus okay. All right, now let's go into the plus and let's say grid row is let's see start to middle okay, and then the minus is going to be middle to end and then the count is going to be start to end okay.
Now what we need to do is apply the row, so let's say grid column on the count start to middle and then the grid column on the plus and minus is going to be the same, and since it's going to be the same we're just going to put it in the top there. So we've got grid column. Let's put it in the top here and this goes from medium to end.
quantity.scss
.quantity {
display: grid;
grid-template-rows: [s] 21px [m] 21px [e];
grid-template-columns: [s] 65px [m] 29px [e];
&__count,
&__plus,
&__minus {
border: 1px solid #E6E6E6;
display: grid;
justify-items: center;
align-items: center;
height: 21px;
width: 29px;
grid-column: m/e;
}
&__count {
grid-row: s/e;
grid-column: s/m;
height: 41px;
width: 65px;
border-radius: 3px 0 0 3px;
font-size: 23px;
color: #333;
}
&__plus {
grid-row: s/m;
border-radius: 0 3px 0 0;
}
&__minus {
grid-row: m/e;
border-radius: 0 0 3px 0;
}
}
Okay, we are all set up there, let's go ahead and look in chrome to it what this looks like, it looks pretty awful let's see why.
Okay start to end on count. Okay it's because we called this rows as well, let's call this columns. Okay so this is all the code for the quantity, let's check it out and then I'll let you overview it to type it all in again. Okay that looks great except for you'll see that if you get really close you can see this is too big.
So let's go over here and it's adding up to about 42 pixels, so what I want to do is let's just change the count box to be forty two pixels high and you'll see it all adds up and it looks really nice, it looks like our design now.
Okay, so there's little inconsistencies that aren't caught in invision, you'll see that if I zoom in here it looks wonderful but obviously the heights were off and it didn't add up in here but now it does. And the reason this looks a little bit thicker is because these all have a border on them so when they add up together it looks bigger okay, but that's so minuscule that it doesn't even matter you can't even tell.
Now what I want to do is end the video here because that really handles our incrementing there. So let's go ahead and commit our code and then in the next video we will style the rest of our product component and get everything looking the way it should.
Terminal
git status git add . git commit -m "styled quantity component"
I'll see you in the next video.
Resources
Source code