CSS Project Solution: CSS

[00:00:00]
>> Let's go through some of the CSS now. So the first thing I did, do I just have the the let's bring up the CSS here, which I have here. Box-sizing: border-box here; that was one of the first things I told you to do. Just makes everything a lot easier to measure.

[00:00:19]
It probably wouldn't have actually made a huge difference in this particular case, but it's just a habit I have. Okay, the body here margin 0, padding 0, that makes everything push out to the side, because by default the body has a little bit of margin and padding. Background-color, I got this nice gray.

[00:00:38]
So a nice little thing that I didn't show you but would make things a little bit easier, Firefox, at least, has this little dropper tool here. So you can actually do this to figure out what color things are. So a lot of things that I did for the site, What I just did is I took the eyedropper here and I was like, what color is the brown that is used here?

[00:00:57]
So I just did that and then it would copy that hex value, nice little trick there. Okay, so that's the background and then I used Open Sans as the font. You could have used anything. I just happen to use Open Sans. Okay, let's look at the page now, the page.

[00:01:20]
It's grid. That's how I chose to do it. And the way I did it, I did it with a named layout here so I did order payment, right, so that this case, this was order, this was payment and then down here was, what did I call it? The total.

[00:01:44]
And that made for a really nice layout there, worked out really well for me. Totally could have done this with Flex, could have done this differently with Grid, so you had this maybe was of height two and this was of height one and height one, right, and done it that way.

[00:01:59]
There's a lot of ways that you could have chosen to have done this. This worked for me. Some nice row gaps with padding and height here. And notice, I did leave the nap out of the grid here didn't really need to be a part of the grid, cuz I had this go all the way to the side.

[00:02:21]
So it's got its background color. I used Flex to get this Coffee Masters centered, right, by doing a line items and justify content center. Here, particularly with the logo, I did shift this down a little bit, so I did position relative to top three pixels. If you don't, that logo just sits a little high for me, I don't know how that feels for you.

[00:02:50]
I felt like it sat a little too high, so I just did a position down and it just moved it down, and that made me feel a bit better about how it looked. Just eyeballed it, right, there's no math or anything here. So that's what that position relative top does.

[00:03:08]
Here's that box class I was talking about. So this box class that I've used several times for here, and here. This way I was able to do this, if I wanted to change this later, and I want to make it black for some weird reason, I change it once, it changes all of them at the same time.

[00:03:31]
So I try and make things as reusable as possible, so that you can make it the hotdog stand theme if you want to, totally possible. Let's just refresh that so it comes back. Trying to think is there's anything else that's important about that. Let's just keep going through the CSS here, box title, colors.

[00:04:02]
Here I just named all the various different grid areas. You might ask me, could I have made these IDs instead of classes? I would be okay if you had done this as IDs, right. You only have one order and that grid area is actually going to be unique to order, right?

[00:04:22]
You're not going to reuse that somewhere else. I still did it as a class, because I just do everything as a class, I never style by ID. In this case, I wouldn't look at your code and be upset if you had done this by ID though. Items, Let's look at that, I think that's kind of an interesting thing, the items, this is the list here, right?

[00:04:47]
So I actually chose to do these in grid, did the items inside of it, it made it really easy to do. So it's a grid. It has a quantity, title and price here on top, right? And then on the bottom, it's just, Quantity. So I have this this quantity here.

[00:05:09]
Notice it takes the entire vertical space, as well as the price takes the whole vertical space. It just makes it so everything lines up really nicely for the cappuccino here and then the items listed inside of it. But again, you could have done this with Flex, you could have done it with Floats.

[00:05:28]
There's a million other ways you could have done this. It just happened to work out really well for Grid, so I chose to do this interior little layout here with Grid. Let's see, what else? Is there anything else interesting here? So yeah, quantity, title, price, and then quantity.

[00:05:47]
So this made a column here, and then title and options, where title and options here. And then price, price, so everything worked out in really nice grid fashion. Okay, same thing here, there's this nice little bottom border here. And then I used last child to give that border bottom of none, right.

[00:06:25]
Trying to think if there's anything else interesting here. Yeah, so let's talk about how I did these inputs, that's probably interesting as well. Okay, so I have this input group as a position relative, right, so anything that I do position absolute will be relative to the input group.

[00:06:51]
If I take that off, notice that everything ended up here in the top left of the entire page. Now the position relative, or sorry, the position absolute of the label is relative to the entire page, right, so everything ends up here, right. So that's why I needed the position relative here to make it relative to the individual input groups.

[00:07:17]
Okay, then the label is position absolute relative to the input group again, right? And then I just have to go from the left, come in 25 pixels and from the top, go up seven pixels. That's what the -7 means, because if I don't do that it pushes down like that which you don't want that, right.

[00:07:40]
And if I had done 7 pixels, it would put it from the top go down 7 pixels, which obviously in the middle of it, that's not what we're looking for at all. So -7 pixels kinda gets into that right place, yeah. I guess, technically, you could have gone from the bottom if you wanted to use positive numbers, and then it would have to be 30 pixels, 33ish, 2, that looks nice.

[00:08:12]
Right, cuz you're saying from the bottom, go up 32 pixels. I would prefer the smaller number of using top, that just makes more sense to me because it is relative to the top, not relative to the bottom. But I guess that's just taste at that point. Give it some padding on the ends.

[00:08:33]
That's always something that, yeah, to give it that kind of nice little cut off. I think I just guess and checked here, three probably would have been fine here? Four looks like it's kind of maybe too much. Could have given a lot, I don't know, up to you.

[00:08:55]
Okay, and then for the input here, so this background color here, I did the rgba of (0,0,0). So I think you're probably familiar with rgb, right, red, green, blue, but there is an rgba as well. The a stands for alpha and alpha just means transparency. So if I do one here, it's actually gonna make the background black, I think, right?

[00:09:23]
So 0,0,0 which is 0 red, 0 green, 0 blue is the color, black, right? As opposed to 255, 255, 255 is all of the red, all of the green, all of the blue which is white, right? Then you have this last number which is between 0 and 1.

[00:09:42]
0 is totally transparent, 1 is totally opaque and if I do 0.5 here, right, it's kind of great because now it's actually semi-transparent, right? So it's mixing that black with that background beige ish color. But I just wanted this to have like no background and I wanted it to take on the appearance of whatever is behind it.

[00:10:03]
So I just gave it this 0,0,0, and then now that background, it's technically black, but it's just totally transparent, right, which means it picks up that background color. The other thing you could have done is I could have just said, what's the color of this? And then background color, blah.

[00:10:22]
And now it does actually have a background but that background is the correct color, right? It matches the background color. So I'm showing you just two different techniques you could have achieved that same kind of background color. Okay, the padding, I did that because otherwise, it's really squished together.

[00:10:41]
That didn't look as pleasant to me, it also doesn't match the design. So by giving it some padding, now it's got some space to work around with. Border radius 100 pixel, if you don't do that, then it's like a square thing. Again, that doesn't match the designs. The designs called for rounded corners.

[00:10:58]
So if you give it a really large number, I think you give this 1000 pixels, at some point, it's so round, it just becomes all the way rounded, right? But if I do, I don't know, 10 pixels, right, it's not as rounded as it needs to be. I don't know, at what point is it totally round?

[00:11:25]
100 is probably too much, yeah, around 20 pixels it becomes totally round. Another fun thing you can do, which this is obviously not what you should do, but if you do percentages, you'll actually make it like ovals, which is just horrendous, right? It's just a fun tip to know, sometimes that's useful.

[00:11:49]
Well, for example, sometimes you might want to make a div a circle, let's see if I can show you that really quick. Let's just, Here underneath the body, underneath this total section, there we go. Edit as HTML. Let's add a div. Okay, and then here, give it a height, 100 pixels, width, 100 pixels.

[00:12:35]
I'm editing the wrong thing, whatever, that's fine. I wanna edit this one. So width, 100 pixels, height, 100 pixels, background color, red because that'll be super visible, right. So now I have this square that I have just created, it's just some random square. And if I wanted to make this round, you would just do border radius, 100%, and that'll make a perfect circle for you.

[00:13:07]
As opposed to, I think if I did 100 pixels, no, it'll still be round. So but by the percentages, no matter where I'll put inside there, it'll still maintain somewhat its round shape. Yeah, anyway, fun tricks if you need to do things. Stretch it out, all that kind of stuff.

[00:13:31]
That was the label, we talked about that. The total, I did this with Flex because, let's see, going into the total here. This is flex here, you can see that. I did Flex direction and column, so everything kind of laid out well into a column. I didn't even necessarily have to do that, this would have been just as easy to do with normal divs and block layout.

[00:14:00]
I think I just did it out of habit because I know I can center things really easy with Flex, but that would have worked. Yeah, you totally could have made the class list and just given this margins and that would work just as well, but Flex made it really easy.

[00:14:21]
Okay this is a table, and then here I have a, it's just a table definition. So I'll have the TD here, and then here on the other one to make this work so that one's left aligned and one's right aligned, on the second one you can see I have the TD last child here.

[00:14:42]
And I just put text aligned right down there, otherwise these will left align, which is not what the designs call for, right. The design called for these to be pushed all the way to the right, so I just did that with a text align to the right. Yep, that worked out pretty well, could have done this a myriad of other ways, that just happened to be what occurred to me at the time.

[00:15:08]
In general, if I see tables that look like it would fit in a spreadsheet, right, inside of my designs, I tend to use tables, but you could totally use divs. There's also dd and dt tags, which I don't remember what those stand for, but basically, here's the definition and here's the thing that defines the definition.

[00:15:29]
Or here's the term and here's the thing that defines the term. That's what dt and dt tags are for. You could have used that as well, I think that would have been appropriate. Again, just a million different, correct ways to do this. And then our button with some nice rounded corners again, with the 100%, took up the whole thing as well.

[00:15:53]
You could have done all this with defined widths, it's like saying, this is 300 pixels, this is 200 pixels, and all that kind of stuff. I like doing things so that on every screen size it looks okay. Obviously, if we put this in iPhone, there's this little thing here that you can put it into an iPhone mode.

[00:16:12]
So this is an iPhone 11 Pro. Obviously, this could use some work, but it's almost usable, right? What I would do on mobile here is I'd make this go items be like 100% width on mobile, and then the name and the payments would all be kind of laid out into a column.

[00:16:30]
I wonder if I can just show you how that would look really quick, hold on. So basically what you would have is just, I mean, can I just do this? Order, Payment, Total, So just by changing this, and you can use CSS to do media queries and media queries to change what CSS is being displayed, based on what how wide your screen is.

[00:17:06]
But with just that, this just became mobile friendly just like that, right? I don't know what happened to my total, they're down all the way there. So I'd have to fudge around with it because obviously, for whatever reason, the height here is not working out for me, but.

[00:17:26]
Pretty cool, though, right, it made it really easy to make this work on a mobile phone just by changing one property. Or we can even go down to a smaller phone, like a iPhone Mini. There you go, so that's working a little bit better. Or this could look fine on iPad, for example, which would look something more like this.

[00:17:52]
But I think this is gonna look better like this on iPad, right? And you can rotate it, yeah, all that fun stuff.