Building the UI: CSS

[00:00:00]
>> Here's the thing about how I wrote this course. In general, I'm kind of against monolithic CSS files. Because what always, always happens is, you get a super long CSS file, and then you don't know what part's important and what part's not. It's not deletable, if we go back to my previous section that I was talking about that.

[00:00:23]
And so when I'm writing things like Angular, when I'm writing things like React, I try and match a component to a CSS file. That's in general kind of how I like to think about things. And I tried to do that initially when I wrote this course, and I found it looked really contrived and gross.

[00:00:41]
It just didn't make any sense, and it made things more complicated. So I actually refactoried it back into one style.css file. And so again, that kinda goes to show, you need to evaluate everything from the lens of pragmatism. Does this actually make sense to try and break this down?

[00:00:59]
Or am I just doing it to be idealistic? And then in that case, I was, I was trying to be too idealistic. And so I ended up refactoring back to just one style.css file, cuz it ended up making everything simpler. So that's kinda my spiel on that. So let's go ahead and get started writing some of our CSS.

[00:01:18]
The first thing is kind of two things that I put in everything. So I'm gonna put some comments up here. You don't have to put the comments, but I'm putting them in there so hopefully it's a little bit easier for you. So in general, the first thing I put on every project I do CSS with is *, then I put in box-sizing border-box.

[00:01:43]
This just makes everything easier to measure in CSS. It's saying, hey, when I measure something, always include the margin, the borders, and the padding, and the interior, and include all that in the measurements. If you don't do that, the measurements don't include the border, and I don't think they include the padding.

[00:02:04]
Yeah, they don't include the padding. It doesn't include the margin either way. Anyways, this makes everything easier. This is the only time I'll use the wildcard selector. I literally never use it any other time. And the star means apply to every DOM element on the page. Okay, then for the body, I want you to put in margin 0, padding 0, and font-family, and I used Arial, Helvetica, sans serif, just that first one there.

[00:02:41]
So an antiquity of browsers is that they just have a bunch of base level CSS included with it. And for whatever reason, back in 93 or whatever it is, they included padding and margin on the body, and we don't want that, right? We want everything to push up against the edges, so that's what that does.

[00:03:05]
And then font-family, we're just gonna use Arial. Every computer includes Arial, it's a nice looking font. They don't have to download any web fonts or anything like that. So that's what we're doing that for. You could totally hop on Google Web Fonts and grab a better font if that suits you better.

[00:03:23]
The only text on here, anyway, is the modal, so it doesn't matter a whole lot. Okay, let's go do the frame and background next, Frame and background. Notice I'm doing /* for comments, that's only valid in CSS. This doesn't work in CSS, works in SAS if you're doing SAS, but we're not doing SAS.

[00:03:55]
Okay, so to get that working, we'll do the container. And we're gonna use display flex cuz I love flex and I use it literally all the time. This is just a way of doing layout that's a lot easier that you can kinda say, this goes and this takes up this much space.

[00:04:10]
And you can vertically center very easily. It's an absolute godsend compared to doing floats like we used to. align-items, that's going to put everything in the center. And I think align-items is vertically, and justify-content I believe is horizontally. So we're putting everything centered. And we're gonna do a little hack that I do all the time, so position absolute.

[00:04:39]
So you're saying, position this absolutely within the container that it's in. And then if you say left 0, right 0, top 0, bottom 0, it's a fun little hack that actually allows you to take all of the parent container space. So if the parent container that it's in is 100 pixels by 100 pixels, it'll take that 100 pixels by 100 pixels.

[00:05:06]
There's other ways to do this, this is just the way that I have always done it. So you can see here, now everything's starting to be centered, so that's good, that's kinda what we wanted. Okay, now we're gonna go do the frame. Underneath that, I'm just gonna give it a height of 762 pixels.

[00:05:29]
And that's just cuz I looked at the image and that's how big it is. And width, it's a square, so it's 762 pixels. I'm generally not so specific, but in this case, we're not being responsive, so that's okay. And we'll do position relative. The reason why we're doing position relative is, we're gonna do some positioning inside of it.

[00:05:51]
And we want it to be relative to the frame and not to the parent. So when you do position relative, it's saying, all absolute and relative position is now relative to this container, and not the one outside of it. Same thing here with inner. We're gonna do inner position relative for the same reason.

[00:06:12]
Okay, then for the game, Let's scroll up here a bit. Width 628 pixels, again, just something I measured. Height 577 pixels, position absolute, and we're gonna give it a position of 62 pixels and a left of 67 pixels. So that's where the background has to sit to make sure it looks like it belongs inside of the frame.

[00:06:49]
Okay, and then the game.night, it just has to have its background shifted around a little bit. So width is 716 pixels, Top is 62 pixels. And this is just an artifact of working with the designer. The designer gave me things that were not the same proportions. So I had to shift them around a little bit to make them look nice.

[00:07:16]
And then the left is just saying, move it to the right, no, it's actually moving to the left 19 pixels. And then hidden, remember, we had the fox that was hidden as well as the poop bag. This is just saying, anything that has hidden on it, just put display none on it.

[00:07:39]
Okay, so we should save that, and I believe we should be seeing something like this. Right, something like that, this is pushed offscreen. That's because these things are not aligned yet, but you should be seeing the game with no buttons on it or anything like that, or none of the icons, but something akin to that.

[00:08:07]
So let's go write the buttons next. Buttons, We're gonna do .buttons. I'm gonna do position absolute, so that we can position them kinda absolutely within the frame. And we're gonna do top 674 pixels, left 266 pixels, height 71 pixels, width, and if you're wondering, how did I come up with all these numbers, it really was just guess and check, right?

[00:08:52]
I just opened the browser tools, moved things around until everything looked right, copied the numbers, and pasted them in here. Not any more complicated than that. display flex, align-items center, and justify-content center, just to horizontally and vertically center things. And now you can see we have buttons that are on the right places.

[00:09:26]
Right, That's fun. Okay, let's do the icons next. Position absolute, top 572 pixels, left 194 pixels. Height 67 pixels, width 374 pixels, 374. Display flex, align-items center, you can see that I use align-items and justify-content frequently. And then justify-content, we're gonna do space-between. So its what space-between is, it's telling you to take the items that I have inside of this, in fact, let's just save it and explain it to you this way.

[00:10:28]
So if we inspect element here, for icons, you can see that's the size of the container that we're looking at. space-between is saying, take the left or the first item, put it all the way to the left, take the last item, put it all the way to the right, and then space everything evenly.

[00:10:47]
So you can see that this space here and this space here are totally even. That's what space-between means. Whereas you can do space-around, you can do, there's another one, space something, evenly, yep, space-evenly. But space-between is saying, stretch that out in that way. Okay, so now you should be seeing the icons looking hopefully nice, right, that's kinda the idea.

[00:11:14]
And let's go ahead and do the next one. So the next one is gonna be everyone's favorite, We're gonna do the poop bag. And .poop-bag, just gotta give it a nice position, position absolute, top 300 pixels, left 160 pixels. Okay, so it's hidden right now. But if we go find the poop bag, right there, and we turn off display none, you can see there.

[00:11:55]
Whenever we clean up the poop, that's where the poop bag's gonna go. It's already got nice CSS animations. I mean, you can see here, it's coming in from the sprites.css. That's where it gets this nice animation from. Okay, Let's go do the modal. And the modal, Is position absolute.

[00:12:28]
And we're gonna do top 0, we want it to show up at the top of the game. And we want it to go all the way from left to right, so we're gonna say left 0 and right 0. You also could probably could've done width 100%, probably would've worked as well.

[00:12:44]
Same ways of doing different things, other way around, different ways of doing same things. Okay, so you can see here, it's up there, it's where we want it to be. And now we need to give it a color, so right now, we don't actually need it. But we'll put in modal:empty, so :empty gives it, it's a CSS pseudo-selector.

[00:13:16]
So it's letting you know, anytime that there's no content in it, apply this CSS class. So in this particular case, we'll say display none. So if there's nothing in the modal, it'll hide it, which is convenient, right? So then we can just say, hey, remove all the text, and it'll automatically hide it from you.

[00:13:32]
So that's what the modal:empty does there. And same thing with the modal-inner, empty, display none. Okay, and we wanna make this look a bit nicer than it does. So you can say, background-color, and we'll give it, I think I gave it blueviolet. You can pick whatever your favorite CSS color is.

[00:14:14]
I can also suggest peru, I don't know if you knew if peru is a color, but it is, that is the color of peru. We'll do blueviolet, and then we'll give it a text color of white. And then now you can look at it, and you can at least see it now.

[00:14:32]
I think later, we'll come back to this and we'll give it some more styling. But that's what it'll more or less end up looking like. Okay, And then we gotta go do some stuff for our fox friend, and then we will be done with CSS for now. .fox, position absolute, top 336 pixels, left 285 pixels, overflow hidden.

[00:15:07]
So we're positioning it absolutely on the page somewhere, and then we're saying don't overflow in any direction. So don't put scroll bars if it has more content. Okay, then we'll do .fox-pooping, top 319 pixels, left 159 pixels. fox-celebrate, and we want that to be top 290 and left 290.

[00:15:49]
.fox-rain, and we want that to be top 362 pixels, 362. And hungry, .fox-hungry, top 362 pixels as well. And .fox-eating, top 362 pixels. And .fox-egg, top 289 pixels, left 248 pixels, two more. And again, this is just us taking the fox and moving him around the page, depending on where is the appropriate place to do that.

[00:16:49]
.fox-sleep, top 351 pixels, left 445 pixels. And last, .fox-dead, And top 380 pixels, and left 243 pixels.