CSS Transitions & Custom Table Scrollbar

[00:00:00]
>> So now is the last part of the problem that we have, so we have our button, our button is doing what we want it to do. Our table is loading here, it's doing exactly what we want it to do. But it's a little bit skinny, we really would like this a little bit wider so we can actually read what's in there.

[00:00:16]
And we of course have lots of little styling affordances that we'd like to add to this. So how are we going to make this container grow? So right now we have our main grid, it set to a width of 100 and 500 pixels, so 100 pixels for our button, 500 pixels for our album cover.

[00:00:42]
We'd like to have happen is that when the button is clicked, I want that column to grow to 300 pixels wide and so how can we go about doing that? Once again, we can swap our classes and use that same little bit of JavaScript. So still on the same button click, we're gonna swap this class as well.

[00:01:01]
And if we go back into our JavaScript, scroll on down to that, little bit of a function here and we'll continue to add to it. So now we're gonna copy those same couple of lines of code, drop that in place and so now what we wanna do is take our main grid.

[00:01:33]
Main grid, which is where our grid is declared with the 100, 500 pixel columns and we're gonna change this to a new class of main-grid-open. So now we can redeclare the width of our grid columns with this new CSS class. Let's go back and do that. And I could put it right here in our CSS just after the main grid class inside of media query here.

[00:02:05]
So we can say main grid open. And we're gonna say grid template columns cuz of course we're gonna continue to carry down the styling that we had earlier. We just need to change what is actually going to change here. We'll change this to 300 pixels 500 pixels and we'll have a max width of 800 pixels, add them together you get 800 pixels.

[00:02:40]
So now when we take a look at our track list and we click, you see that our track list gets larger. And it shifts a little bit here on the page, so if you watch the header here on top you'll see that shift happen. You'll see that that jumps open like that, making the navigation look good.

[00:03:08]
Okay, great. So now comes the last little bits of fun, let us add the extra little bit of polish that's needed. In order to really give this sizzle, now that we've got all of the elements here in place. So, the first thing that I'm going to do is I'm going to do some transitions.

[00:03:30]
Because as cool as this looks, where it just sort of pops open and it shows and all of that wouldn't it be better if it actually had a little bit of animation with it. And so, what I'm going to do then is add here in my CSS, in a bunch of places I'm gonna actually add the same line of CSS.

[00:03:52]
So here under main grid, I am going to say transition colon, all 0.5 seconds, ease. So what exactly does that mean? Well, the transition is we're going to move from one state to another, we tell it which properties we wanna have transition and I'm saying all of them.

[00:04:14]
Just transition absolutely everything, we could pick specific properties so for example I could say just grid template columns or just the max width. But it says easy enough just to say all of them in this particular case, we're gonna do it over half a second and we're gonna do it via the ease style of animation.

[00:04:36]
There's a whole bunch of different ones of these that are described by various kinds of keywords. There is a whole course here at Front End Masters that goes into animations and transitions. That will talk about what's the difference between Ease and Ease In and Ease Out and all the rest of them.

[00:04:53]
I thought this looked fine, so this is the one that I chose, please feel free to play around with all of these transitions, it's part of the fun part of doing a design like this. So you'll see the impact of this immediately when I click my button, now you can see that it sort of slides nicely there on the page, just with that little bit of animation.

[00:05:18]
So let's continue to add this exact same line here, we'll put it on main grid., we'll put it on main grid open. So we'll transition that as well as we go back to our other state. We can put it on our table. Whoops, sorry, rephrase. Let's put it on our button We want our button to move from its current location up to the top of the page like that.

[00:05:57]
So since we're transitioning everything the background color, the rotation shows up, everything shows up there, okay? We can add that to the closed state as well. And that gives us a very nice polish to the whole thing, so it opens up very smoothly, it closes very smoothly, really add a lot to that particular design by adding that.

[00:06:29]
All right, next let's take a look at that table, it's all smashed up against the edges of the window here, so let us take care of that particular issue. So, I'm going to say .tracklist table and I worked out the margin here for this, -4rem 1rem 0.5rem 1rem.

[00:06:59]
And what this is gonna do obviously with the negative margin, it'll pull it up here in space a little bit and move things around here a little bit. And then for our last of type notice that this is getting cut off here all of the time at the moment.

[00:07:14]
So we'll fix that as well, so tracklist. Table TD last of type. Padding right to REM, so that will give us a little bit of space. The scrollbar will sit on top of this padding space and the numbers going to appear. So, click on the tracklist and now you can read the numbers there as well.

[00:07:43]
Very, very nice, looking incredibly cool. The last thing to deal with is that scroll bar and of course, this is the default scroll bar that our browser gives us. So it shows up white with a gray bar because I'm on a Mac and I happen to be looking at this in Chrome.

[00:07:59]
If I'm looking at it on different browsers, it will look a little bit different and again, that's just coming from your browser styling. Unfortunately, for scroll bars at this point in time, there's not really a standard that's accepted. So we're going to have style for Chrome and will style for Firefox and so to set that up, we're gonna do this.

[00:08:23]
So, we'll say tracklist double colon hyphen WebKit hyphen scrollbar and shockingly, this is for Chrome and other WebKit browsers. They will allow you to style this with a width, which is nice, so we'll give it a width of 10 pixels, so it will be a narrow scroll bar.

[00:08:53]
And that is showing up right there. We can then say .tracklist double colon hyphen webkit hyphen scroll bar, hyphen track. This will give us a color, so our background color will be var cyan, So now I have a cyan bar here instead of white. And then we can style the actual little, they call it thumb here, but the little item that you use to move it up and down.

[00:09:43]
And so we'll call this .tracklist, double colon, hyphen webkit, hyphen scrollbar, hyphen track, Hyphen thumb. And this one will have a box shadow with an inset of 0, 0, 6 pixels, RGBA, 0, 0, 0, 1. And so what that will do is give us our scroll bar here, it looks kind of shadowy, blends in really, really nicely there, looks pretty cool here on Chrome.

[00:10:41]
Now, those of you who are following hereon Firefox are like, well, my scroll bar still looks pretty ugly. Well, scrollbars for Firefox are actually a lot easier than what I just went through here for Chrome. So we can add to this a little comment, scrollbar for Firefox. All we have to do is say HTML, we set it globally, right at the head of the document.

[00:11:08]
And we'll say our scrollbar-color is var cyan, so that'll be the background of the scroll bar, and var-gray, that'll be the thing that moves up and down. And Firefox will not allow you to have a width associated with your scroll bar in terms of pixels, as I did before.

[00:11:37]
But there is a keyword for thin, so we can just say scroll bar hyphen width of thin. So here I am in Firefox just to show you what this looks like when I click on my tracklist here, you'll see that I've set up a scroll bar. I actually give it a gray background and with the blue scroll widget there, scrolling up and down on the page, you could reverse those colors.

[00:12:02]
You could make the widget gray with the background of cyan, but again with Firefox are a little bit more limited as to what you can do. Notice that my scroll bar over here on the side for the web page here in code pen Is also styled as well, which was not true inside of Chrome.

[00:12:24]
Okay, so that's all done there. All right, so at this point, we now have a wonderful working track list, it collapses on mobile, it shows up here really nicely in our tablet footprint. On desktop, it will use the same footprint which we are going to have another column of information that'll be next to this.

[00:12:49]
So we just have those two states to style, our mobile state and our tablet state. With our wonderful working flyout track list, with custom style scroll bars and awesome transitions.