Tracklist Styles

[00:00:00]
>> All right, let's move on then. So that was our album, let's make another layer, and I'm gonna call this the tracklist. Because that's what this is, it's a tracklist. Okay, so our track list is gonna look like this. Anybody have any suggestions, how should we start? And, I recommend that we start on the outside and work in.

[00:00:35]
>> So let's start with the table.
>> So we'll start with the table, great place to start, table. Table, okay? So one of the things I'd recommend that you do, since we have our box on the top, we gave it a max width of 500 pixels, let's do the same for our table.

[00:00:53]
Max width. 500 pixels, okay? But we'll say our width 100%. So why would we do both of those things? The widths a hundred percent but the max width is 500 pixels, does that make any sense?
>> So from a breakpoint standpoint, if you're on mobile it's always gonna span a hundred percent of the viewport width.

[00:01:23]
>> Right.
>> But it cannot extend beyond 500 pixels.
>> Correct, right? So it can't go past 500 pixels, but it can occupy all of the space up to that point in time, all right. What should we do now? Center it, we need to center it, right? So, it'll look nice under that box, so our margin is 0 auto again.

[00:01:53]
Okay, good. Let's see, in our design. The track numbers here that specific row, the song name that specific row, the time that's our sarafan, Qumran Garamond, right? And this across the top, the heading that is poppins. So since we use Pacific go on to things, let's set that up as our default font here on the table.

[00:02:28]
So I'm going to set my font family, to var cursive and then we can override that font family a little bit later on Actually, it looks pretty good already right, okay. All right, one last thing that we need to add. Now, in the table by default, if you go back to the bad old days of the web in the beginning, there was always, if you put it actually I'll show it to you.

[00:03:00]
If in the table HTML, you put in a border, I think it was border is 1. Does that work, yeah border equals 1, you get this. Anybody vibing back to the 90s, yeah cuz it was everywhere, right? So, modern browsers don't display that anymore, but the space for it is still there.

[00:03:23]
No okay, so let me take out that border one, all right so remember that space is still there. So the way we get rid of that space, is we're gonna say border-collapse:collapse. And you'll see it twitch just a little bit, that's that default border, 90s border disappearing. So it doesn't cause us problems later.

[00:03:54]
So that border collapse collapse might be something you wanna put on every table, cuz nobody goes back to the 90s anymore, right. Okay, let's move on to our caption. So for our caption, we actually don't want it to display on the table or on our web page at all, because to a sighted user this is obvious, right?

[00:04:19]
Let's somebody's using a screen reader, they are the ones that need to have this identifier. So, what we'll do here is we can say visibility, collapse, not display none but visibility collapse, okay. And the reason why we do it this way is that it will still be accessible to screen readers, although it's not visible on the webpage to sighted readers.

[00:04:42]
All right, so that's why we choose visibility collapse for that. Sweet, we're actually almost done with this, believe it or not. Let's address those headings, actually, let's address the headings and the cells right now TH,TD. Let's put a little bit of padding on these, one rim zero. So give us a little bit of space here on the page, easier to read.

[00:05:12]
Remember padding is additive, so we wind up with a two REM gap between each of our track names right. All right, what about my headings? Somebody give me some some styling that we need to do to our headings [INAUDIBLE]
>> We need to as text align left. What else?

[00:05:35]
>> Color, new font family.
>> New font family, right poppins. There is definitely a new colo, we actually don't have it in our variable list, so we're gonna need to add it. That gives us that gray color there. Anything else?
>> Border.
>> That border, that bottom border, right gives us that line.

[00:05:57]
All right, so let's write that code. So here on our th text align left, Font family, var sans serif. Okay. Border-bottom, 1px solid var, we're gonna call it grey. Nothing is gonna happen, because we don't actually have grey set yet, but we'll put the code in. And color, will be var grey.

[00:06:46]
Okay, Everybody, alright. Okay, so let's set that variable then, if we go back up to our base, let's set our variable here in our colors, and I'm gonna call this gray. And the value is adb0c0. And then all that styling should apply. We have one more thing to do, does anybody see it?

[00:07:20]
Take a look away our page looks good, take a look at this what's the last thing we need to do time that time right? What do we need to do with time
>> Change the color and font family
>> Change color and the font family. Did anybody have any suggestions of how we could change the color and the font family for those?

[00:07:46]
Not Jason.
>> [LAUGH]
>> Should we make a class and go apply it to all those cells? Who wants to have the joy of doing that?
>> [LAUGH]
>> You don't? What is another way we could do it? We have a pattern in our HTML, can we leverage this pattern?

[00:08:08]
Somebody told me what the pattern is in the HTML.
>> The tracking number is a title and then the time.
>> It's the track number, the title and the time over and over again, right? So that last column, is always the time. That means we there's probably a CSS selector for it.

[00:08:28]
Yeah.
>> Selector or last selector. Yeah, something with last in it, right. And so let's do that. So it's gonna be a TD last of type, the last of the td types. And that would mean we can apply the font family, of var serif, And the color of var magenta.

[00:09:06]
And a font weight of 600, just to make it a little bolder and make it stand out a little bit more. How sweet is that, how many of you would have made a class and. Spend an hour, like, yeah, Andrew's, Andrew's brave enough to admit it. Spend an hour going through and labeling all those classes and blah, blah, right?

[00:09:31]
Way better solution here.