Audio Player Base Styles

[00:00:00]
>> Okay, so that's our first part here. We've evaluated this, we've modified our HTML. So the next thing that I like to do is I like to simplify the CSS and add our standard styles, because of course, the person who built this audio player wrote a lot of CSS that we actually don't need.

[00:00:21]
True? So tell me, what do we not need?
>> The border.
>> Pardon?
>> The border.
>> The border, we definitely don't need the border. What else don't we need?
>> The button styles.
>> Some of these button styles, we definitely don't need those. During just sort of scroll through here.

[00:00:47]
If you're not sure about it, you can leave it, right? But some of this stuff, we can definitely delete. So for example, body, we already have a body style, right? It's coming from our base, so we can delete that. If you're scared, just comment it out. There's nothing wrong with that, okay?

[00:01:10]
Button styling, I'm gonna leave that for now. We may come back to that. But there's a paragraph down here, we definitely don't need that. Okay, and it's gonna start falling apart. Don't panic, don't panic, never panic. Okay, and the other thing that we're going to need now is our base styles.

[00:01:34]
So the base styles that we've been building all along with magenta lime, let's go grab those and bring them in. So if we take a look at our ending CodePen here, I'm just gonna open that up in another tab. And what we wanna copy from this is just the base styles here.

[00:01:56]
Copy that, and drop that on into our audio file right up here at the top. So that it will play a lot of styling to this page immediately, right? Because that's how we wrote all that flexible CSS to just apply to stuff. Look how much work that already just saved us.

[00:02:14]
Amazing, isn't it? Okay, as for the rest of these styles, we can set up a layer. I'm gonna call it audio, because that's what it is. And we'll wrap that layer around everything else that's here to keep our styles organized. So let's make a few modifications here to some of these styles now, and we'll start with the, Button here.

[00:02:44]
We're gonna delete the width and the height and this float left. We don't do floats really with layouts anymore. [LAUGH] Just get rid of the width, the height, and the float down here on the bottom. That's gonna make those a little bit bigger, but that's okay. We'll deal with that in a little while.

[00:03:05]
Now, take a look at the audio player container that's here and the before. So one of the things that you'll see going on here, here's a background color of white. Yeah, we definitely don't want that, so let's get rid of that. Now, we have a cool rainbow. So awesome, but so not what we want, right?

[00:03:30]
Where is that?
>> Linear gradient.
>> That's this linear gradient thing going on? Yeah, so we get rid of that. Hey, not so bad? Not so bad, getting better and better. So let's leave the rest of this just for the moment. One of the things you might notice that we have right now is the font, right?

[00:03:52]
The font is totally wrong. Why is that? Anybody have a guess? We put in our base styles, we've called for those fonts, right? What might be missing?
>> A variable.
>> We've got the variable, we've got the variable. It's right here in the base, yeah? So we've called for it.

[00:04:16]
We should at least see the default body font here, but that's not it. What's going on?
>> Do we need to go to the Settings > CSS, and then [INAUDIBLE].
>> That's exactly it, the settings, right? We have to actually link to those files. So if you go into your Audio player here> go into Settings> we'll go into CSS, there's a long URL right here, we can just copy that.

[00:04:50]
And we can paste that into our Audio player under CSS, Under External Stylesheets. Here we go. Okay, getting closer, okay? So now, let's go on and start writing some more styles that we've got here. We can continue to modify these styles as we go with whatever it is that we wanna have here.

[00:05:16]
But for now, let's just continue to modify this. So what we wanna do is, if we take a look at our HTML again, we need to set up our grid such that we've got the name of the track, the button, and the Track 7, right, all on one row.

[00:05:35]
And we said we wanted to put the player and the volume all on one row. So let's take a look at that and see if we can make that kinda stuff happen. So what would be my selector for this? I'm gonna set our styling. Let's put it here at the top of the audio file.

[00:06:00]
So what's my selector for this?
>> Name-play?
>> Yeah, so my class of name-play. So what I might do here is say audio-player-container.name-play. And we can set this up to display as a grid. We, very big, okay? Then we wanna have some grid template columns, right? Grid-template-columns, now do we want those all the same size?

[00:06:50]
1fr 1fr 1fr, Anybody have any opinions?
>> We want the play area to take up 2fr, and then maybe 1fr and 1fr on the other side.
>> We could do it. That would make a very big fat play button, and we'd have little skinny text on the sides, right?

[00:07:14]
We actually want bigger text and smaller button, right? Yeah, so what if we did instead something like 2fr and 2fr, that'll sort of squeeze it down a little bit, and then maybe even we can squeeze it down even further as 0.75 fr. Okay, That's a reasonable first pass at this.

[00:07:48]
And then we could say something like, we could give it a little bit of a gap, 1rem. We could give it a little margin, 1rem. Okay, so we're sort of getting things in the right spots. These aren't completely styled yet. One other thing we could add here would be a font-family: var(---cursive).

[00:08:22]
Okay, that's cool. Okay, easier than you thought, right? Okay, so how about the rest of this? Now, we have controls down here. Yeah, we need to get our play slider and our volume next to each other. So what would be our selectors for that?
>> Controls.
>> .controls, okay?

[00:08:58]
Good, and what are we gonna put in here for that? Should we use grid again? Sure, why not? Do we want those even?
>> No.
>> Probably not, right? Probably want this one bigger than that one? Maybe two-thirds, one-third, yeah? Okay, so our grid-template-columns will be something like 2fr, 1fr.

[00:09:29]
Okay, Well, those look a little bit funky. What's going on here, why does it look a little bit funky?
>> They're not aligned.
>> Yeah, they're not in line, why is that?
>> Looks like the volume sliders sitting on top of the Mute button.
>> It does, yeah, so we have this big 0 margin going on here.

[00:09:54]
Maybe there's something with that, we could try taking that out. See if that helps. Could be that my window isn't big enough yet. Maybe not, and we can just keep on going for the moment, because we'll have some more tweaking to do. So sometimes, the stuff doesn't present itself to be obvious from the beginning.

[00:10:17]
But generally speaking, we're trying to hack this to get things into the right spots broadly speaking, and then we'll clean it up and make it prettier. Okay, so we've got that our controls sort of generally next to each other now with the volume itself, right? We actually have three children on that volume.

[00:10:37]
We have an output, we have an input, and we have a button, okay? So that's what's going on over here. That's why this isn't quite lining up. So maybe we need to add another layer here of displaying grid. So after our controls here, let's add audio-player-container .volume. We'll lay that as grid too.

[00:11:14]
And we can say our grid-template-columns are 0.15fr 1fr 0.15. That made it really tiny, okay? So now, we have our number, we have our slider, we have our volume down over here. And back here on our controls, let's add a couple more things. Let's add a gap of 1rem, and let's add a margin of 1rem.

[00:12:01]
Now, for our volume, These things aren't quite all on the same line. We'd probably like them to be on the same line. Anybody have any idea how I could get them to be all kind of all on the same line?
>> Align content.
>> Yeah, so we've got a couple of properties here.

[00:12:24]
We've got justify-content: center; and we've got aligne-items. Center, and that's gonna help bring this into a straight line, right? Once it's there, now we can play around with the volume size. We're gonna get there even though it's ridiculously tiny right now. I totally see that. Then let's do the same thing for our play slider.

[00:12:58]
So we've got the volume there, we've got the play-slider next to it. Let's do that exact same kind of thing here for this play-slider. So our audio-player-container .play-slider. So this is here in our HTML, we have our time, our slider, and the other time on the end of it.

[00:13:24]
Let's use grid to bring that all into the same line as well. And to do that, we're gonna display, grid, grid-template-columns: 0.5fr 1fr 0.5fr, and we'll do the same thing again for the same reason. We'll justify-content: center; and we'll align, -items: center; to bring everything into line. See how much nicer that all looks?

[00:14:03]
We're getting closer, and closer, and closer to a good layout. We have just gone through here and put grids inside of grids inside of grids, haven't we? To get everything to lay out. So that's totally legal. You can put grids inside of grids all day long. So just try to think of that.

[00:14:19]
Everywhere you go inside of your HTML, we need these things to group together in the same line. So we'll group them together, and we'll lay that out with a grid. Now, that group of things and that group of things have to lay out together in the same line.

[00:14:32]
So we lay that out with grid, make sense? We just keep going until we run out of elements. [LAUGH] Laying everything out.