All right, so we have this button right and then we have the subtitle right the actual subtotal, we've got the subtotal label which is not a button it's a label, so we've got the label and then we've got the button. Sorry not the button, we've got the label and then the actual subtotal okay and they're both 18 pixels. Then this subtotal is just white whereas this one is 8080, and this is a font-weight of 600.

So let's go ahead and enter those, let's go into our code and let's go into the footer here and let's say &__subtotal and then we'll say &__price, they both have a font size of 18 pixels, and then this price has a color of white, and then this subtotal has the default color of 8080 which is set in our main.scss or our... I can't remember where we set it, how about main.scss I thought we did it in main, oh I guess we did it, oh we did that's up here, 8080. See how these are the default styles, so we only added in these &subtotal and &price lines of code in this video so far.

All right, let's go ahead and see what the effect is on these items here. Okay so 18 pixels on both of those, this has a font-weight of 600 pixels, so let's add that in for the price. Let's say font-weight 600, not pixels just 600 which is bold. So let's go into the browser and let's go into our application and yeah it's looking exactly like what we need it, so let's go ahead and align them on a grid now.

So it's pretty easy stuff. What we have to do is go into .cart-footer which we are in, and we'll just say display is grid, grid-template-rows is 1fr for our row, we'll say end and start here and then we'll say grid-template-columns we are going to have 3 of these okay. We're going to have checkout start to checkout end, then we're going to have sub start to sub end then we're going to have price start to price end.

Now this is going to be the majority of the content so what we're going to do is we're just going to say 1fr, 1fr and then on this one we're just going to put what the width is in the design okay. So get this in, these columns, and I'm not going to reference the design just to make it faster alright, I don't want to have to be flipping over there for that every time right, we're just going to say like 180 pixels. Well let's do shorter than that let's do like I don't know let's do like 70 pixels, okay that's good.

shop-cart.scss

.cart-footer{

    display: grid;
    grid-template-rows: [s] 1fr [e];
    grid-template-columns: [checkout-s] 1fr [checkout-e sub-s] 1fr [sub-e price-s] 70px [price-e];

Now the lines on the grid, let's say grid-column is checkout start to checkout end. Okay so I added in this right here and I added in this column. Now let's go into subtotal and paste that in, let's go into price and let's paste that in and let's change price to price and subtotal to sub.

shop-cart.scss

&__subtotal {
    grid-column: sub-s/sub-e;
    font-size: 18px;
}

&__price {
    grid-column: price-s/price-e;
    font-size: 18px;
    color: white;
    font-weight: 600;
}

Now one thing we want on all of these is for them to be all on the same row, so let's say & > * and we'll say grid-row is s/e. Okay there we go, that should do it.

& > * {
    grid-row: s/e;
}

We're going to have to apply a little bit of item changes here, but let's look at what it looks like just so you can see what's going on.

Okay, super simple stuff. All we have to do is justify this to the end and then justify this to the start and we're good and then we have to align them in the center. So let's start with aligning them, let's say align-items is center and justify-self is end, then what we want to do is move this justify-self call and put it down here within subtotal and then price is going to have to be justify self is start.

That will kind of squeeze them together and it'll look good, and then obviously align item is going to put it in the center of the Y axis. So let's go see what this looks like and you'll see it looks good.

Now we need a little bit of space here so it might be a good idea to add in an additional column or a grid-gap. What I want to do is look at the design and the checkout is 50 pixels from the left and this is 31 pixels, so what we need to do is also get in that 27 pixels. All right so let's go to our code and let's add those into our grid, let's just say 50 pixels at the start like right before our checkout and after our price we'll put 31 pixels and then in between sub-e and price-s we'll just put 27 pixels.

shop-cart.scss

.cart-footer {

    display: grid;
    grid-template-rows: [s] 1fr [e];
    grid-template-columns: 50px [checkout-s] 1fr [checkout-e sub-s] 1fr [sub-e] 27px [price-s] 70px [price-e] 31px;
    align-items: center;

Okay so save that and let's go see what it looks like in the browser. All right so we've got that in and we should be good, okay see it looks really good, it looks exactly like our design actually and we guessed on the style, it just all kind of flowed.

One thing I'm noticing is that this price is probably too far from the right. So what I want to do is go into our code and let's change this 70 pixels to just 1fr, well that won't work because checkout is as big as it is. So what we need to do is specify the checkout width as 183 pixels, okay now we'll take up the remaining space, well then we have sub start which is going to average and not look too good. Let's see what this looks like, it's going to be more centered then we want, see.

So what we need to do is, let's get the exact width of this, I just really want to be exact here. Okay, so let's change it back to 1fr and let's change price to 46 pixels, then it will be exact. Obviously it looked exactly the same anyway but now we know for sure its exact. Okay let's go into our application and it looks exact.

Okay so that's how we do that, all we need to do now is give it a background color and then put it at the bottom. So let's give it a background color of #1A1A1A right, and then let's give it this height and weight okay. So let's go into our code, and let's go into the .cart-footer here at the top and what we're going to want to say at the top of his cart footer is that it has a height of 113 pixels and it has a width of 521 pixels right, and then a background color of 1A1A1A.

Now the thing is we don't want a width of 521 pixels, we just want it to extend across the entire side so we'll just get rid of that and we'll leave it with a height of 113 pixels and a background color of 1A1A1A.

shop-cart.scss

.cart-footer {
    height: 113px;
    background-color: #1A1A1A;

    display: grid;
    grid-template-rows: [s] 1fr [e];
    grid-template-columns: 50px [checkout-s] 1fr [checkout-e sub-s] 1fr [sub-e] 27px [price-s] 46px [price-e] 31px;
    align-items: center;

That should do it, let's go look at it and see what happens.

All right sweet, that looks like our design. Let's go ahead and reference or design one more time, yep it looks the same. So all we need to do now is define a grid for this all to lay on because we have our items, we have our footer, and we have our title here so what we need to do is define a grid. Okay, so we'll do that in the next video and then we'll hop into the in-depth discussion on all of these components in here okay.

Luckily we've already built this one right, the quantity and the price so that will be really quick. All right so let's go ahead and commit our code and then hop into the next video.

Terminal

git status
git add .
git commit -m "finished cart-footer component"

Okay, I'll see you in the next video.

Resources

Source code