What’s up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using CSS sprites. On top of that, we will also add a fallback for browsers that do not support SVG files.
\nSVG - Stands for Scalable Vector Graphics. In short it scales perfectly and you don’t need to worry about having a pixelated image anymore.
\nSprite - Google said it’s a fairy. This is not a fairy. It’s just a bunch of different icons in 1 image. Use it as background image and shift the positioning to show 1 icon. This saves you a lot of loading time. Because instead of loading, say 10 images, you’re loading just 1.
\nCSS - Cascading Style Sheet. If you don’t know what this is, I have bad news for ya.
\nFirst things first, we need a sprite image that consists four icons – or more, it’s up to you. Luckily, I have one in my digital pocket.
\nWe’re just going to use a normal PNG file at first and change it later. Make sure it has a transparent background.
\nNow, let’s make their placeholder. The icons you see above is using a grid of 32px by 32px and it’s lining up vertically. I made it like that so it’s easier to find anything, you’ll see why later.
\n</pre>\n <div class="frame"></div>\n<pre>Now we need to style them.
\n.icon {\n width: 32px;\n height: 32px;\n background: #eee;\n float: left;\n background-image: url("[ put your image here ]");\n background-size: 100% auto;\n /*extra fluff*/\n margin: 10px;\n border-radius: 5px;\n}Explanation
\nLooks simple right? But the one thing that’s very important here is the background-size, which makes our sprite responsive. When you put 100% as the value, it will stretch the image depending on what width and height you have. So, be very careful when putting a value on both X and Y axis, because this will distort the image. To stop it from distorting, you should only put a value on one axis and put the other on ‘auto’ so the image scales proportionally.
\nIf you look at the image I provided, there’s only one icon on X-axis. That means we can just say 100% on X and auto on Y.
\nSo, we get background-size: 100% auto.
\nCool, right? No crazy percentage. Your icon should look like this:
\nIt’s time to map those icons properly. Facebook is not a problem because it’s first on the list. But for defaults sake, let’s add a code for it.
\n .icon.facebook {\n background-position: 0 0;\n background-color: #3b5998;\n }The positioning of 0 0 will map it to the top left of the element.
\nFor the background-color, you can get almost all of the official social icon colors in hex here.
\nHow about the rest? Well, there’s a simple formula for that.
\nSince we’re making this responsive, we need to use percentage. We need to get the height of the image via percentage. Remember what I said earlier about x and y and scaling proportionally? Since the icons are lined up vertically, we need to get the Y-axis, which is the height. The easy way to do that is to just use 100% and never touch x axis again.
\nNow, we have to get the position of the icons. Let’s start by counting the icons starting with 0 (zero).
\n0 = Facebook
\n1 = Google
\n2 = LinkedIn
\n3 = Twitter
\nFacebook isn’t really a problem because we already know where it is. So, let’s exclude it from the count. That gives us 3 icons. We can now use those numbers to get the icon position.
\nimageHeight = 100%
\niconCount = 3
\niconPosition = [1, 2 or 3]
\nWe need to go downwards on the sprite. That means it’s negative.
-imageHeight / iconCount * iconPosition
\n-100% / 3 / 1 = 33.33% is Google’s position
\n-100% / 3 / 2 = 66.66% is LinkedIn’s position
\n-100% / 3 / 3 = 99.99% is Twitter’s position
\nThat gives us this code
.icon.twitter {\n background-position: 0 -33.33%;\n background-color: #55acee;\n}\n.icon.linkedin {\n background-position: 0 -66.66%;\n background-color: #007bb6\n}\n.icon.google {\n background-position: 0 -99.99%;\n background-color: #F90101;\n}If you use stylus you can just do this:
\nCreate the mixin
getPos(imageHeight, iconCount, iconPosition)\n imageHeight / iconCount * iconPositionThen call it.
\n.icon.twitter\n background-position 0 getPos(-100%, 3, 1)\n background-color #55acee\n \n.icon.linkedin\n background-position 0 getPos(-100%, 3, 2)\n background-color #007bb6\n \n.icon.google\n background-position 0 getPos(-100%, 3, 3)\n background-color #F90101By now your icon should look like this.
\nThis is why controlling your own code is better than letting other apps do it. Just like what my mentor said, \"Don't let the apps write your own code, they screw it up\". Let's get started Let's make a responsive grid without using any crazy percentages or complicated margins. Sounds cool? Good. By now you know how complicated it is to calculate all the width and margins to make sure they correspond with each other. Not to mention that you need to use percentages on both of them which sometimes doesn't work, especially with our friend IE8. What if we create a grid that doesn't need margins for spacing? Or using percentages to separate objects? Sounds awesome right? No more calculating for the right percentages and getting crazy numbers. Let's start with 4 grids first. So 100 / 4 = 25 then add a percentage (%) sign and we get 25% for our 4 grid system. No crazy numbers there, but we need spacing. To add spaces between those elements just add padding on left and right. Pixels or percent, it's up to you. Yes, yes, padding adds width but, if you add \"box-sizing: border box\" on our lovely grid, the padding will start respecting your decision to add a width of 25% and start pushing everything inside. There you have it, Spacing. By now your CSS code will look like this. Problem Of course, there's no perfect code. Since we're using padding on both left and right. you'll see some spacing too on the left and right side of your website. For example, I used 5px padding. That means I will have a 5px offset on the left and right side of my screen. It doesn't align with my site anymore. Solution To tackle this problem we need to add a margin on the parent of our grid. Since my padding is 5px, I need to add a -5px margin on left and right to stretch it back to it's intended size. So our code will look like this now. I'd like to also point out that if your parent has a width (which it doesn't really need because our grid css will add a width to the parent), the negative margins won't work. So, be careful. Another thing to watch out for, because we're using floats, we will also need to use a clearfix hack on our parent. Using the simple code we learned today will create all the grids you want. 1 = 100% and so on. See it on codepen. And this is where it ends. I hope this will help you easily create a grid in the near future. If you have any other tips, leave it in the comments and I'll be happy to try it out. Cheers.
\ndiv {\n width: 25%;/*4 grid system*/\n padding: 0 5px;/*spacing*/\n box-sizing: border-box;/*removes the added with from padding*/\n float: left; /*put them side by side*/\n}
\nparent {\n margin: 0 -5px;\n}\nparent div {\n width: 25%;/*4 grid system*/\n padding: 0 5px;/*spacing*/\n box-sizing: border-box;/*removes the added with from padding*/\n float: left; /*put them side by side*/\n}
\n2 = 50%
\n3 = 33.33%
\n4 = 25%
\n5 = 20%
\n6 = 16.66%
\n7 = 14.28%
\n8 = 12.5%
\n9 = 11.11%
\n10 = 10%