Retina Icons Sprite - Sass Mixins is generator tool for for front-end developers to easily integrate Retina Icons in your website. All you will need is SASS and Compass installed and you are good to go!
You can either use your own Compass setup by following the Basic How To Steps. If you want to enjoy automated processes and keep total control of your development resources; I must recommend - Follow Extended How to Section.
Easy to Integrate
Let's start with a very basic example to see how to use it. If you have already downloaded the package, you may find a CSS file called food-icons.css in the 'css' directory. For demonstration 18 food icons with grunge effect included in img/food-icons directory. You will also find two directories named 120 and 64 and both of them contains two other sub-directories which holds generated images for normal display and retina display. We will show you how to generated them in details on Extended How to Section.
First lets take a look at basic HTML markup and CSS class naming convention to get our Icons in it's place. You can add these generated icons in any block element. I am suggesting to use a <span> element as shown below.
That's all you will need to know if you want to use if you want to use given 18 icons set; used in this package. You can find all 18 icons with class="icon-name" class names.
18 Grunge Food Icons
Let's Get Deeper!Extended How To Section.
Are you familiar with Sass and Compass? Then creating Food Icons and calling them with Retina Display support in your website will be more easier! Sass Mixins for Retina Icon Sprites package includes a custom Sass(SCSS) mixins from ThemesTent Framework. This retina mixins generates an optimized sprite image from your defined directory. Below you will find step by step guidance on how to generate icons and how to use the Sass mixins.
If the package has been downloaded or cloned successfully; you will see a directory called food-icons-sprite.This folder includes config.rb to Configure Compass. You will also have package.json & Gruntfile.js to Run Several Automated Tasks. In example watch compass, LiveReload your browser on any file changes. It also includes a bash script filled called INSTALL.sh (Windows users please read the Note below). We will run this bash script first to create necessary environment so that Compass, Grunt Task Manager or necessary Package Installer like Bower may work properly.
Please make sure you have latest Node.js ( minimum required version is 0.8 ) installed in your system. You can download it from Node.js download page. I suggest you to read a page on 'How install Node.js via package manager'.
So, you have Node.js ready in your system. Great! Now let us type that simple one line command to start Installation process. It will include necessary packages and make an organized and powerful task manager for Front-Enders
Windows Users: To run Bash Scripts on Windows you can download and install msysGit
Just after you hit enter Grunt will start running tasks. It may look something like below.
A new browser window should automatically open with address: http://localhost:9090/. If not, then click on that link. Grunt connected web server for this package on localhost:9090. Moreover if you change any HTML,css or .js files in app directory; the browser will reload itself.
Let's Create our icons using ImageMagic
ImageMagick has been installed already in your system; when you ran that INSTALL.sh bash script. We can quickly crop size, convert any images into any format using ImageMagick by entering few lines of commands in terminal.
In this package I have used 18 images with dimension of 512 X 512. They can be found here '/img/food-icons/original'. In 'food-icons' directory you will also find two other directories like '64' and '120'. I wanted to resize those original .png files into 64x64 and 120x120 dimensional .png files. But to support retina display each of those resized images should have 2x dimension too. To get more organized I had created two child directories inside '64' and '120' folder and named them 'normal' & 'retina'. Now let's get back to our terminal.
NOTE: Don't forget to replaces your directory destination in '~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal/' lines.
If everything goes well, you will have all your images in it's right directory. We can move on to Sass and CSS section.
Include Sass Mixins and Sprite Generator
To generate our images sprites and to show them in our site I have created two different SCSS files and imported them into our main working SCSS.
Include Sass Mixins with Retina Display support
As mentioned earlier a custom Sass mixins used in this package to create Sprite Icons with retina display support. You can find a _retina-sprite-mixins.scss file in app/css/sass directory.
Generate Sprites for images
Now we are going import '_retina-sprite-mixins.scss' into food-icons.scss file where we will generate sprite of all the images we have created. We will also assign class names for each food icons according to their name. Here is the full snippet below
NOTE: You might already having an idea on how 'I am passing parameters in retina-sprite-background() mixins'. Pass the name of the icon. give them same height and width for each icons. Before doing these I have I had to use two 'sprite-map'. One for normal images another one for Retina display.
CSS for Each Icons
So, you are Here!! It means you might have able to do all those steps above without much problems. If everything runs without any Bell, then we already have a CSS file ready with class names for each food icons. Here is one example of generated css rules for 'Beer Icon':