Sass Mixins Icons Sprite with Retina Support

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.

HTML and CSS Class Name 
<!-- First call the CSS file in your site <head> -->
<link rel="stylesheet" href="css/food-icons.css" >
<!-- Let's call lemon icon within a <span> element .. -->
<span class="icon-lemon" aria-hidden="true"></span>
<!-- Above class will show Lemon Icon.
Here the Icon's naming convention follows as icon-'yourfoodname' -->
<a href="#"><span class="icon-lemon" aria-hidden="true"></span>Lemon Icon</a>

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

beer
berry
bone
bowl
burger
cone-icecream
doughnut
drinks
egg-poach
hotdog
juice
lemon
lemon-2
lollipop
pomegranete
popcorn
pumpkin
watermelon

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.

Download & Install

Download

Download or Clone the package from Github. If you are using terminal just type:

Step 1: Create new directory & clone the repository 
### Create a new Directory ###
mkdir icon-sprite
### Get into newly created Directory ###
cd icon-sprite
### Clone the Repository ###
git clone git@github.com:themestent/retina-icon-sprites.git

Install

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

Step 2: Install Required Packages 
### Move to Cloned Folder ###
cd icons-sprite
### Run Bash Script ###
bash INSTALL.sh
## After successful installation You may find Following MSG ###

'*****************************************';
'*****************************************';
'*********   PACKAGE SETUP DONE   ********';
'*****************************************';

#### You are now ready to start Grunt Task Manager ###
#### Type 'grunt server' in your terminal ###

grunt-server

Just after you hit enter Grunt will start running tasks. It may look something like below.

Processes starts by Grunt 
Running "clean:server" (clean) task
Running "coffee:dist" (coffee) task
Running "compass:server" (compass) task
Running "livereload-start" task
... Starting Livereload server on 35729 ...
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9090.
Running "open:server" (open) task

Running "watch" task
Watching app/js/{,*/}*.coffee
Watching test/spec/{,*/}*.coffee
Watching app/css/sass/{,*/}*.{scss,sass}
Watching app/{,*/}*.html,{.tmp,app}/css/{,*/}*.css,{.tmp,app}/js/{,*/}*.js,app/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}

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.
Resize Images 
cd app/img/food-icons/original
for file in *.png; convert $file -resize 120x120 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal/$file
for file in *.png; convert $file -resize 240x240 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/retina/$file

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.

Sprite Retina Mixins ('_retina-sprite-mixins.scss') 

// Retina Sprite Mixins

@mixin retina-sprite-background($name,$normal,$retina){
  background-repeat: no-repeat;
  background-image: sprite-url($normal);
  background-position: sprite-position($normal,$name);
  height:image-height(sprite-file($normal, $name));
  width: image-width(sprite-file($normal, $name));

  // Media Query for retina
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {

          background-image: sprite-url($retina);
          background-position: 0 round(nth(sprite-position($retina, $name), 2) / 2);
          height:round(image-height(sprite-file($retina, $name)) / 2);
          width: round(image-width(sprite-file($retina, $name)) /2 );

          // treat the @2x retina sprite sheet as 50% wide for double resolution upon display
          $double-width:ceil(image-width(sprite-path($retina)) / 2);
          $auto-height:auto;
          @include background-size($double-width $auto-height);
         }
}

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

Food Icons Sprite ('food-icons.scss') 
@import "compass/css3";
@import "compass/typography";

/* Core Variables & Mixins */
@import "variables";
@import "mixins";
@import "retina-sprite-mixins";

/* Bourbon */
@import "bourbon/bourbon";
//  Food Icons

$food-icon-normal: sprite-map("food-icons/120/normal/*.png");
$food-icon-retina: sprite-map("food-icons/120/retina/*.png");

[class^="icon-"],
[class*=" icon-"]{
  display: block;
  @include size(120);
}

.icon-beer{
  @include retina-sprite-background(beer,$food-icon-normal,$food-icon-retina);
}
.icon-berry{
  @include retina-sprite-background(berry,$food-icon-normal,$food-icon-retina);
}
.icon-bone{
  @include retina-sprite-background(bone,$food-icon-normal,$food-icon-retina);
}
.icon-bowl{
  @include retina-sprite-background(bowl,$food-icon-normal,$food-icon-retina);
}
.icon-burger{
  @include retina-sprite-background(burger,$food-icon-normal,$food-icon-retina);
}
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':

Generated CSS styles with retina display support 
/* Beer Icon Class */
.icon-beer {
  background-repeat: no-repeat;
  background-image: url('../img/food-icons/120/normal-s8778c84cbc.png');
  background-position: 0 -360px;
  height: 120px;
  width: 120px; }
  @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .icon-beer {
      background-image: url('../img/food-icons/120/retina-s7367f0e004.png');
      background-position: 0 -480px;
      height: 120px;
      width: 120px;
      -webkit-background-size: 120px auto;
      -moz-background-size: 120px auto;
      -ms-background-size: 120px auto;
      -o-background-size: 120px auto;
      background-size: 120px auto; }
  }

That's all you will need to do! Easy right? I'm quite sure you may have opinions or issues using this Sass Mixins. Please Submit your issues right on Github.