Social Icons

[00:00:00]
>> Next thing to do is our social icons that are on the cover, okay? So we have these cool social icons, there they are. And we want them to appear on the cover of the album. This is at mobile dimensions, okay? So on the cover itself, and then when we get to larger dimensions, we want those social icons to appear right here on the edge.

[00:00:24]
Wow. A lot going on with that? Okay, so you guys ready to dive into that? All right, so let's open up that beginning code pen. And fork it to your account. There's our audio player, okay, great. So first of all let's start off with our HTML here. And the first thing that we need to do is add our social sharing icons right here in our HTML.

[00:01:33]
So we know that they're gonna be near the cover. So here's my main with the class of cover. There's the image for the album cover right there. And then under this is the audio player container, make sense? Okay, right after the image here, we're going to put in a div with a class of icons.

[00:01:57]
Slash div. Inside of this, we're gonna make this a list. Why are we making this a list?
>> A series of icons.
>> It's a series of icons, kind of like a list of possible links that you might wanna visit, right? So the correct markup here would be UL cuz you can visit them in any order.

[00:02:24]
And then we'll put in an LI. Okay, and then inside of that, we're gonna have our link, ahref equals something. We go somewhere, we can put in a target = "_blank". Slash a slash li. So we're gonna have this come in three times. So I'm gonna put it in once, gonna put it in a second time, gonna put it in a third time.

[00:03:07]
While we're here, target = "_blank", tell me about that. What is "_blank"?
>> It goes to a different tab, a new tab.
>> It opens in a new tab or a new window. Why does it start with an underscore? Isn't that kind of weird? Would it do the same thing if I did this, target blank?

[00:03:30]
It actually does not, okay? This goes back to our days in frame land. Do you guys remember frames? They were chunks of web pages that we put together. And when you click the link in a frame, so it was like one webpage and another webpage, kinda like iframes are now except super ugly with scroll bars, okay?

[00:03:52]
So if you clicked a link in the frame that was over here and you wanted to load something in the page over here, you had to have a name for that frame. And so we use this target thing a lot and back in those days. But when you call it " _blank", this is a special keyword, will open into a new window or a new tab depending on how the person has the browser configured, okay?

[00:04:16]
So you can use other values there, but generally speaking, we're are in the 2020s, we don't do that anymore. [LAUGH] Makes sense? Okay, so now we're going to add to this our various icons, which I may have neglected to give you once again. So let's just grab the icons that we have down here in the footer for now.

[00:04:41]
So if you open up, go back to like your navigation CodePen. Did we have a footer down there? We did not. Okay, we opened up our CodePen collection. Go on back to our, Our double border corners CodePen. If we go back to that, that one has a footer down there on the bottom.

[00:05:15]
Let's just grab those links that are down there. So I am going to scroll in my HTML down to the footer. And in fact, I can just grab this whole list, and we'll use those. So I'm gonna start here around line 76 in the double border corners ending CodePen.

[00:05:38]
And I'm gonna copy one, two, three icons, all the way down to line number 92. Okay, and that'll grab us Instagram, Spotify, and SoundCloud. It won't give us the sharing icon, but whatever, you can swap that out later, make sense? Okay, and we're gonna paste that here inside of our div with a class of icons.

[00:06:06]
Paste that in, we should wind up seeing some icons, and I copy a whole lot of stuff. This is all okay, this is all okay, everything is great. Okay, so why didn't those SVGs show up? I see bullets here, but I don't actually see the SVGs, what's going on?

[00:06:31]
>> Is there a lack of default fill?
>> Yeah, we probably have a lack of default fill. So let's add ourselves here another layer. Add layer. And we can call it icons, or you can put this inside of the audio or whatever you want to do. I'm just gonna put it here inside of icons and we can now set up our SVGs.

[00:06:57]
So these are gonna be .cover svg and we can say fill var(--line) I think. And that's what we need. There they are, okay? And while we're here, let's set up a hover state for them. So .cover svg:hover, fill:var(--cyan). So we have a hover state, yay, there they are.

[00:07:36]
So far, so good? Cool, okay, the next thing we ought to do is turn off our bullets, always a good thing to do. So .cover ul, we'll say list-style-type:none, padding:0, margin:0. So I'll turn off all the listy kind of stuff and give us a set of three icons, right?

[00:08:05]
All right, now, Notice that we have our div with the class of icons. It's inside of our main class of cover, see how we did that? So, now we've got inside of our main class of cover, we have our image, that's the big cover image. We have our icons, they're right there, and then we have our audio player, all right?

[00:08:35]
Now what we need to do is take these icons and we need to move them up onto the album, all right? Now, there's a bunch of ways we could do that, anybody have any ideas how we could do that?
>> Position absolute.
>> We could do absolute positioning for sure.

[00:08:53]
What else could we do? There's actually a very cool technique that we could use to make this happen. Grid cells are allowed to overlap. So if we have two grid cells and we call out their same location, they will sit very happily on top of each other. Why don't we do that?

[00:09:15]
Because that's gonna make our layout so much easier later when we take our icons and we wanna make them go horizontal, right? So let's try doing that. So to set this up, let us start with .cover. Let's turn on a border for all of the children of cover, so border: 1 pixel solid white.

[00:09:43]
So there's our cover, there's our icons, there's our audio player. Now what I wanna do is set this up, kind of unusually, I wanna set it up with a series of rows and one column, okay? So if I go to .cover, we're going to display grid. We'll say grid-template-columns, there's only one 1fr, [LAUGH] all right?

[00:10:19]
And we'll say grid-template-rows: repeat (3, auto). In other words, there as tall as however they need to be, but we want three rows. So there we go, there's our three rows, our album, our icons, and our audio player. Make sense? Guess what the next thing I'm gonna do is?

[00:10:48]
Tell them where to display, right? We need to get those icons on top of the cover and we need to have the cover occupy the same spot, that image. So we'll say .cover img, border: 2 pixels solid var(--cyan), right? So that's our border that's on that image already, right?

[00:11:16]
Grid-column will be what?
>> 1.
>> 1.
>> 1/2. Grid row will be what?
>> 1.
>> Yeah, 1/?
>> 2.
>> 3.
>> Is it 2?
>> Maybe 3.
>> 3. It'll be 1/3 because we wanna have our album and the icons eventually overlap each other, okay?

[00:11:50]
So right now nothing changes. Very happily grid has added a fourth row for us, [LAUGH] even though we didn't tell it we wanted one, it added one. All right, so now let's go to our .icons. And basically we're gonna do the same thing here. We're gonna say the same grid-column and grid row associated with those icons.

[00:12:15]
Boom, look at that. Woo. [LAUGH] It worked, okay? And then our audio player will show up right underneath of our album, right? And we can spell out exactly where we want that to be if you want. Obviously, it's displaying without us explicitly calling for that location. But if you feel more comfortable doing it, we can add it.

[00:12:45]
Audio-player-container is gonna be grid-row: 3/4, and it's gonna be grid-column: 1/2. Now, why did I put in all these grid column 1/2's? Why didn't I just leave off the columns? We're not dealing with the columns, we want these in rows, right? Well, the answer is this, if we take out the column, what will happen is grid will very happily make another column for us.

[00:13:22]
Because grid really doesn't want you to have things on top of each other by default. Okay, so our last thing to do then, how about these icons? Let's add to this a border. 1 pixel solid var(--Lime) just to show us where that box is. It's as big as that whole album, isn't it?

[00:13:48]
Okay, so how are we gonna push these icons over? There's a grid property that will do this. Okay, so we'll add to this justify-self end, that will push our grid icons there over to the right. And then we can give it padding on the right and potentially on the top too, if you want, of 1 rem.

[00:14:19]
Just so that they're not smashed into the side. Make sense? And we can get rid of that border. Sweet, all right, so I'm gonna get rid of that border there. All right, so now we have our icons here on top of our album, right? So far so good?

[00:14:39]
Now all we have to do is make them go horizontal. So what are we gonna do for that?
>> Media query.
>> Probably want a media query, add media, min-width 800 pixels. So 800 pixels and higher, double check CodePen, make sure we're there, there we are. I want those icons to go horizontal, so what might I do?

[00:15:20]
>> You display flex.
>> Yeah, display flex. Flex flow. Row wrap.
>> Would you want them to wrap in this context?
>> Oops, I've got it on the wrong thing, Icons ul, there we go.
>> Should be able to just say flex because the default is row and the default is no wrap.

[00:15:52]
>> There's no wrap.
>> Would you want them to wrap in this context?
>> Probably not, so we could leave that off. We could leave this off altogether if you wish, and that would be fine. They'll display like that by default. We can give them a little bit of a gap though, gap.

[00:16:09]
Gap, 1 rem or whatever, make them look a little bit better. And now we want them on that border. How do we get them there?
>> Relative positioning.
>> We can do it with relative positioning or?
>> Negative margin.
>> Negative margin, margin top. Negative something, right? 20 pixels or whatever.

[00:16:35]
Something like that. Cool, so now we go from icons here to icons there. Looks even better with the right icons, but you get the idea.