3.4 Fluid, Variable Number Social Icons
In this lesson we’re going to dig into something a little more complex to give an example of what can be achieved when the power of postcss-ant and a preprocessor are combined.
We’ll be creating a display of icons that are completely fluid in size, adjust to perfectly fit their container with equal distribution, maintain their aspect ratio, and yet can have the number of icons changed at any time without doing any complex math.
1.Introduction1 lesson, 00:56
2.Postcss-Ant Basics6 lessons, 34:52
3.Postcss-Ant Techniques4 lessons, 34:45
4.Conclusion1 lesson, 00:59
3.4 Fluid, Variable Number Social Icons
Hey, and welcome to the last lesson in Grids and Layout Tricks with postcss-ant. In this lesson, we're gonna use some nifty little tricks to make a fully adjustable row of social icons. We're gonna to make sure that you can change the number of icons in your row any time and they'll still remain fluid. They'll arrange themselves evenly in the row and they'll also resize fluidly, keep their aspect ratio and keep looking the way that they're supposed to look. And once again, there's a couple of files for this lesson to save you from typing out code that's not really related to what we're covering here. So you've got a slightly modified style.scss file with a couple of extra lines added in. And you've also got an indexed.html file with some HTML in here. In here we've got a bunch of icons already set up, so you've got a repo with the class icons. Inside that, we have divs, and then inside that we have i elements, each with a class representing a certain icon. The code that we're already have in the style sheet is setting the background image for each of those icons, to an svg image. And if you look inside your source, you'll find there is an svg folder. And inside that are each one of your social icons. Right now, none of those social icon backgrounds is showing up on any of our i elements here because they don't have any layout. So right now, they're all just zero by zero, the little elements you can't see. So let's change that. The first thing that we're gonna do before we start using a grid to control the layout of these elements is we're just going to add some layout to each one of these i elements. So we'll target that i element. And first we're gonna set the display to block. We're gonna set the background size, To cover, and that's gonna make sure that that svg background image, always stretches to fill the maximum height and width of this div container. We're gonna be applying a grid to this icons class which is in turn going to make grid cells out of these divs. So by setting background size cover, we make sure that each one of these icons is going to fill up those divs that are forming our grid. And then finally, we're gonna add padding-top 100%. And that's just a cool little trick, that's gonna make sure that however our icons resize, they're gonna maintain the same aspect ratio by giving it padding-top 100%, we're gonna keep that height to 100% of the width. And that's just gonna make sure that they stay square. All right now, let's see the effect of that. So now we can see our icons, obviously they are humongous, but if we resize you can see that they're already maintaining their aspect ratio as we increase and decrease the viewport size. So now all we need to do is add some code to use postcss-ant to control those divs that are wrapping around each one of our icons and we're gonna shortcut that process by using our pre-processor. Now the first thing that we're gonna do is define the number of icons that we have as a variable. So right now, we're using five icons, we have five just here. We're gonna change that a little bit later to show you how flexible this method is. So we're gonna create a variable called icon_count. And we're gonna set it to 5. Now, because we have five icons and we want them to be evenly spaced along our row, we're gonna wanna generate a grid with five columns that are each one-fifth in width. So don't type this out, this isn't CSS, I just wanna show you the value that we actually wanna pass through to our columns method. We want to be able to pass through this code. So we're gonna use our pre-processor to generate this code and plug that into our generate grid method. So let's see how we can do that. The first thing we're gonna do is create a variable named $cols and this is gonna hold the information that we're gonna pass through our columns method later. And what we're gonna do is add 1/ then we're gonna put a # a pair of curly brackets and then, we're gonna pass in this variable that we just created. And what that's actually doing is taking this number here and inserting it here, so that's setting cols to equal one-fifth. Now if we were to change that number, let's say we change it to 9, now $cols would equal one-ninth. So we just put that back, so with this variable, we've actually now got the first value that we need to have in our size set. Remember we're trying to get five lots of one-fifth. So now all we need to do is figure out a way to add those extra one-fifth values on to the end of our cols variable. So we're gonna do that with a for loop. We gonna say @ for, $i and i is just a temporary variable. From 2, through, $icon_count. So what this effectively means is we're gonna start at 2. And then we're gonna count all the way up to this number which is currently 5. So we're gonna start from 2 and count up to 5. As we're counting up, we're gonna add another one of these one-fifths on to our cols variable. So we're gonna say $cols and then we're going to append onto our $cols variable, and then we're just gonna copy this bit of code here which is giving us our one-fifth. Add that in, so now every time we loop through this for loop, we're gonna be adding an extra one-fifth on to the end but we also need to separated it in between each of those one-fifth. And that's gonna be a space. So now what's gonna happen is, as we go through this code, we have this $cols variable at this point, $cols is gonna equal one-fifth. And then every time we loop through this code here, it's gonna add on to that 1/5 with a space and another 1/5. And it'll keep doing that, counting up from two until it reaches the value of $icon_count. So, now that we have cols holding the size set that we wanna plug into our columns method, let's go ahead and use that. So we're gonna to target the icons class, we're gonna generate a grid, we set up our columns. And now because $cols already has the size set that we wanna use, all we have to do is just plug it straight in. We also wanna have a little bit of space in between our columns. So we're gonna set the gutter to 5%. Now let's see the results. All right, so now there is our row of icons. Our code is set each one to be a fifth of the available space with the allowance for that 5% gutter in between each. And when you resize, the icons can go as large as you want and they're gonna maintain their aspect ratio and they're gonna keep taking up the appropriate portion of the available space. Now obviously these are fairly big. So, if you're icons are becoming too big using this method, all you need do is put a wrapper around them, that restricts the overall width and that will stop them from getting too large. Now the big advantage of this method is that once you've written this code, you can change the number of icons that you wanna use at any time. So in your HTML, go ahead and uncomment the extra icons that are there. Now, we have nine icons. Now if we were just to refresh without changing our CSS, you can see that these extra icons are going on to the next line. But we don't want that, we wanna have all our icons on one line. But we don't need to recalculate the amount of width that should be allocated to each one of these icons. We don't need to do anything other than just changing the value of this variable here. Now we have nine icons. So we just enter 9 and we Save. And now all of our icons fit perfectly on a single row. So that's just one example of the kind of things that you can do, when you take all the extra functionality that a pre-processor gives you and you use that in combination with postcss-ant. So, that wraps up the last lesson in Grids and Layout Tricks with procss-ant. We have just one more video, we're gonna go through and have a quick recap of everything that you've learned through the course. So, I hope you'll join me there and I'll see you in the final video.