CSS Styling Exercise

[00:00:00]
>> So what I'd like you all to do for this exercise, is go ahead and just play around with some of the CSS stuff that we've learned. But to give you actually something to direct it towards, let me go ahead and flip this real quick. I'm gonna go app- todo, cuz you're gonna work on your photo gallery.

[00:00:16]
And for the photo gallery, I want you to just go ahead and add some styles to it. And so at the bare minimum, you're gonna try one thing to do try to make your actual photo gallery appear at some sort of grid. So that it's not just like a straight line of photos.

[00:00:27]
And if you can get that, I think it's good enough. But then if you have extra time and you wanna challenge yourself at some layout classes from Bulma play around with it a little bit. So last we left off we were talking a little bit about styling and such.

[00:00:44]
So I figured, let's go ahead and just wrap that up. And so what I'll do is I'm just gonna go ahead and style just a grid for our photo gallery, and then we can move on from there. So inside of our app.view, you can see here that we have everything here and then our starter block is empty.

[00:01:00]
And so for the sake of just keeping things on the simpler side, what I'm going to do here is I'm gonna create a list class for this gallery. And I'm gonna go ahead and actually use the module because what I wannna do is very unique to this particular one.

[00:01:16]
And I also know that list I'm pretty sure it already exists in Bulma. So just to be safe, let's just do the module. This is simple enough to understand at this point. So for me, I'm just gonna do a display grid and then grid-template-columns, repeat 5. So basically the way the repeat works is, how many times are you repeating it, 5 times and what unit are you expecting, in this case, it's 1 fraction.

[00:01:37]
So basically it's evenly divided between. So when you fetch it now, you'll see it's now sitting very nicely. We have the five columns looking good. And then if we really want, let's go ahead and clean this up a little bit. Go over to the Code. And then what we're gonna do, just make this a little bit nicer, is let's go ahead and wrap this thing in a container div.

[00:01:57]
And so this is one of the layout classes that Bulma provides. And I'm gonna wrap it once more cuz the container helps to basically, create a box that centers it, but then we're just gonna go ahead and create a section div around that. And so what you'll see here now is that when we refresh, Assuming I did that right, I think I know what happened.

[00:02:20]
Nothing's happening, why is that? Well, if you look at container in section, there's nothing attached to it, and there's a reason for that. Because the only time we import a Bulma was actually on the todo app, so that's why it's not appearing. So for now don't worry though by the way we're gonna stop the flip flopping between these two files very shortly.

[00:02:37]
I'm just gonna go ahead, just copy this over for posterity sake. Although I just realized that something's probably gonna break pretty bad. Refresh, yeah, I thought so. What my guess is happening right now is that the module is applying to everything that's being imported. So again, just for the sake now of just keeping things simple because again, this is there are plenty of amazing CSS resources on front end masters that y'all can check out later.

[00:03:05]
But let's just make this a little bit clearer. This is use the naming way to keep it scoped. And then like that, and then we save it like this. Yes.
>> I think you have to put Lang as CSS on the style tag.
>> Boom, perfect, yep. We don't have a preprocessor attached.

[00:03:23]
Let's do it, refresh. Okay, now that's making me wonder though, okay, we're gonna have to test this out because we are developing. Look at that all the list styling is gone it looks even better