Image Gallery Styling

[00:00:00]
>> Brian Holt: So the way that we're gonna show and hide images, is that we're gonna be using CSS classes, right? We're gonna take advantage of the fact that we can add and subtract classes from image elements very simply. And so, let's go ahead and create another CSS file here.

[00:00:19]
And call it, I'm gonna call it styles.css, just cuz I'm not creative and that's what I call my CSS files, but feel free to call what you wanna call it. And we're just gonna put in it just a handful of CSS here. Did Jen talk about box sizing border box?

[00:00:42]
So did she ever do anything like this?
>> Speaker 2: Kind of skimmed it.
>> Brian Holt: Okay, this is literally the first thing I put in every CSS file that I open. This makes doing measurements with padding, and borders, and margins, and such. Just 1,000 times simpler to do. So I'm going to suggest that you should do this.

[00:01:08]
And I would say that's a common practice to do.
>> Speaker 2: Does the asterisk mean that applies to everything on the page?
>> Brian Holt: Yep, so if I save this. I'm gonna come back over here to my index.html, I have to link this, as well. So I'm gonna say, link./styles.css.

[00:01:28]
>> Brian Holt: So I just added line eight there.
>> Brian Holt: Right, cuz I need to link the two together.
>> Brian Holt: If I inspect element here on Luna, and refresh my page over here, you can see that it's literally gonna show up on every single element right there.
>> Brian Holt: So it's called the wild card selector, cuz it selects everything.

[00:01:57]
I'm going to go ahead and say with the wild card selector, this is the only thing you should ever do with it. Never do anything else with the wild card selector, or it's not gonna do what you want it to do. Then, you can actually sort on your page.

[00:02:11]
Because, as you might imagine applying the same style to everything, can be quite burdensome on the browser. Okay, good?
>> Brian Holt: Okay, we're gonna do gallery image here. This is gonna apply to all of this image tags here. The first thing we wanna do, is we wanna make them display none.

[00:02:35]
So by default, all the images are not going to show up, okay? And then, we're going to add an active class, which we put in here right here, this active one here on line 12. When it's the active image, that's when it's gonna show up, right? And then, all the rest ones are not gonna show up until you put that active class on it, okay?

[00:02:56]
So gallery image gets displayed on, and then, I'm gonna give it a max height of 600 pixels, so that, if the image is smaller than 600 pixels, then, it's gonna go ahead and shrink down to that height. Otherwise, it's going to not let it expand beyond 600 pixels.

[00:03:13]
Now, underneath this, I'm gonna put .active as a display, block.
>> Brian Holt: Now, something has both gallery image and .active, right? Like my first picture of Luna there, is it gonna be display block, or is it gonna be displayed none?
>> Brian Holt: It's gonna block, yeah, correct, reason being, is that they're gonna have equal specificity, right, they're both gonna have one class.

[00:03:45]
So what it's gonna do, is it's gonna look for the ones lower on the page. So this one came last, so therefore, that one wins. Make sense?
>> Speaker 2: And we're in the CSS page, right?
>> Brian Holt: Yep, yeah.
>> Brian Holt: Okay, so next, we gonna do, image gallery,
>> Brian Holt: Which is gonna be like everything around it, with 100%, it's gonna take up the whole page, wanna make it flex, display flex.

[00:04:15]
Cuz what I want it to be, is I want it to be centered on the page. So I'm gonna say display flex, justify content center, and align items center. These three things together, display flex, justify content, and align items center, that's a really easy way for you to center content inside of something.

[00:04:37]
So the image gallery is gonna take up 100% of the page, it's gonna have some amount of height, and it's going to center whatever it has inside of it. In other words, I use these three things together a lot. Okay, we have some buttons down at the bottom that will code up here in just a second.

[00:04:53]
These buttons are going to have, with 100%, and the same thing from up here, the display flex, justify content center, a line items center.
>> Brian Holt: Justify content, if you remember, is horizontally, what it's gonna do with it. So if you wanna space mount easier, you can do like space round, or space between, or space evenly across the page, or you can do center, which is just squished everything into the center.

[00:05:29]
And then, the line item sets it vertically.
>> Brian Holt: So this I want this to be center for now.
>> Brian Holt: Okay, we wanna give our buttons a little bit of style, so our buttons are gonna have background color. And you can choose whatever background color that suits your fancy.

[00:05:51]
I chose this nice shade of blue which was 0074D9.
>> Brian Holt: You can see there, it's kinda a nice blue. Okay, color, white, font size, I gave it like the size of 20 pixels. All of this is up to your interpretation. If you wanna get creative and do your own thing here, I'm 100% okay with that.

[00:06:22]
Padding, when you're making buttons, typically, you want them to have just a little bit of vertical spacing, but a lot of space on the side. So you're gonna do five pixels for up and down padding. And then, for left and right spacing, you want a lot, so you're gonna put 20 pixels, or something like that.

[00:06:43]
>> Brian Holt: Okay, border color, buttons come inherently with a border color, so I'm gonna make that transparent, so that we don't have to deal with it.
>> Brian Holt: Border radius, everyone likes rounded corners, right? So we need just a nice kind of soft corner there.
>> Brian Holt: And then, when you put your mouse over it, we want it to look like you can click it, so that you do that with cursor pointer.

[00:07:11]
That's how you make something look clickable when someone mouse is over it. Okay, .previous step, and we want to have a little bit of separation from each other, so we're gonna do margin, right, 15 pixels.
>> Brian Holt: And then, if you remember on this one over here, if I come over here, notice that when it's disabled here, the background changes color.

[00:07:36]
So you want it, when it's disabled, to change the background color. And also, notice that my mouse there, it goes to not allowed. That's another nice indicator to someone that you can't click on this, so we'll do that, as well.
>> Brian Holt: So btn, and then, you'll do :disabled.

[00:07:57]
And this is saying a button that has been disabled, apply these styles to it. So background color, I gave it something like 666, maybe, let's just do 777. And cursor not-allowed, that's how you get that nice, you can click on that.