Social Icons Layout with Flexbox

[00:00:00]
>> Jen Kramer: So now that we've got the basic styling done here on this page so far, let's turn to these overwhelming SVGs because, whoo, they are big and ugly. So the first thing that we wanna do is we wanna get these out of the list, 1 and 2, or at least the list styling, and 2, we wanna make them a reasonable size.

[00:00:23]
So remember that in our HTML, we have a UL with a class called icons. Then each of these items is an individual list item. They have a link and then we have our title and our path properties here, and the path property has a class of social assigned to it.

[00:00:45]
So it's always good to review your HTML, remember what you wrote. So now let us write some code here, I'm giving myself a comment. I'm gonna call this the SVG social icon bar. Refer there to our icons class, and I'm going to say my list style type is none.

[00:01:07]
That will get rid of the little dots here next to these. So our list item bullet icon goes away. We also set our margin to zero, and that will get rid of the little bit of space by each of these SVGs. Sometimes some borders use padding, so I usually do both margin and padding here for this, zero those out.

[00:01:33]
>> Jen Kramer: Now for the svgs inside of our unordered list, I'm gonna set my width to 36 pixels and my height to 36 pixels. Phew, and now they are no longer overwhelming, okay, [LAUGH] here we go. All right, now, I said earlier, we didn't put these svgs inside of an image element, because when you put them in an image element, you cannot manipulate the svg itself.

[00:02:11]
But here, since I've put the actual svgs into my HTML, I can change their color, and the way that I do that is with the social CSS class, and I'm gonna say, fill. So this is not background color, which is what we use everywhere else in CSS. This is a svg property specifically called fill, and we can refer to our usual CSS variables for this.

[00:02:38]
So this is windsurfing. Once again, our blue, and that will turn all of our SVGs blue. We don't have to pre-color them going into this. And what makes this wonderful is that now we can also have a hover state, yay, so .social:hover. And we can have a fill state of var('''marina).

[00:03:07]
So now, as I roll my mouse over these, now they change color on hover. How cool is that? Great, we have a vertical list of all of our links. The next thing we wanna do is get them all in a row. How are we going to do that?

[00:03:22]
>> Speaker 2: On the other list.
>> Jen Kramer: We have an unordered list, correct.
>> Speaker 2: We can start that class that we created.
>> Jen Kramer: We can use our unordered list to style this. In order to set these up to whatever layout we want, what would be a methodology that we use in order to make it go horizontal?

[00:03:38]
>> Speaker 3: Alice online says, Flexbox.
>> Jen Kramer: Flexbox. Flexbox is what we wanna use in order to make this go horizontally across the page, you could use grid. The difference with grid is that, grid is probably gonna stretch the divide this into four equal segments. The nice thing with Flexbox is that, each of our boxes are flexible in size, and so, they will be as big as the icon itself going across the screen, which is exactly what we need.

[00:04:05]
So back on our icons class here, we can add to this display: flex, and then say flex flow, row, wrap. Okay, so that puts it, boom, two style or two properties there, it already goes horizontal exactly the way we want. And then we could say something like align items: flex end.

[00:04:35]
All right, I am doing this to get them all aligned on the bottoms. Yeah, and then let's give them a gap of 2'rem.
>> Jen Kramer: Which looks nice, that much gap is good, because, remember, somebody on a mobile phone will be using their finger. We wanna make sure we have enough room between each of those items in order for people to click without clicking on its neighbors and so forth.

[00:05:02]
So here we go. All right, all that code should be pretty close to the screenshot that I gave you for how we make this look, and you are all done with that. How are people feeling?
>> Jen Kramer: Yay [APPLAUSE] not as hard and impossible as you thought, right? Break it down into just a piece of our design, and we just apply some basic styling to it.