Retina responsive sprites with smart touch hover behavior

.gitignore

.DS_Store
.sass-cache
public/images/stickers-retina-s28fb90c6bd.png
public/images/stickers-s8db04c2c8a.png
public/stylesheets/application.css

.gitkeep

README.md

What's that?

The goal of this gist is to craft some retina responsive sprites with smart hover support, using Bootstrap and Compass.

Instructions

To setup the project, just run:

compass compile
gem install sinatra
ruby index.rb

Then go to http://localhost:4567 and enjoy!

application.js

function isTouchDevice() {
  return !!('ontouchstart' in window);  // Courtesy of http://stackoverflow.com/a/4819886/197944
}

$(function() {
  if (isTouchDevice()) {
    $("[rel=touch-sprite]").each(function() {
      var selector = $(this).data('selector');
      if(selector) {
        $(this).addClass(selector + "-hover");
      }
    });
  }
});

// Fix bootstrap rotation bug on ipad (portrait => landscape)
// Courtesy of https://github.com/twitter/bootstrap/issues/1531#issuecomment-3802791
var addEvent = 'addEventListener',
    type = 'gesturestart',
    qsa = 'querySelectorAll',
    scales = [1, 1],
    meta = document[qsa] ? document[qsa]('meta[name=viewport]') : [];

function fix() {
    meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
    document.removeEventListener(type, fix, !0);
}

if ((meta = meta[meta.length - 1]) && document[addEvent]) {
  fix();
  scales = [.25, 1.6];
  document[addEvent](type, fix, true);
}
// End of bootstrap rotation bug fix

application.scss

@import "compass/reset";
@import "compass/utilities";
@import "compass/utilities/sprites";
@import "compass/css3/background-size";

@import "stickers/*.png";
@import "stickers-retina/*.png";
@include all-stickers-sprites(true);
$image-list: (sheldon, leonard, raj, penny, bbt, howard);  // TODO(ssaunier): is there a way to retrieve this list programatically?

@mixin retina-sprite($name, $sprites, $sprites2x, $percent) {

  $spritePath: sprite-path($sprites);
  $spriteWidth: image-width($spritePath);
  $spriteHeight: image-height($spritePath);
  $width: image-width(sprite-file($sprites, $name));
  $height: image-height(sprite-file($sprites, $name));

  @include background-size(ceil($spriteWidth * $percent) ceil($spriteHeight * $percent));
  width: ceil($width * $percent);
  height: ceil($height * $percent);
  background-position: 0 floor(nth(sprite-position($sprites, $name), 2) * $percent);

  // Retina
  @media (#{-webkit-min-device-pixel-ratio}: #{1.5}), (#{min--moz-device-pixel-ratio}: #{1.5}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.5}) {
    & {
      $position: sprite-position($sprites, $name);
      $position2x: sprite-position($sprites2x, $name);

      @if ($position != $position2x / 2) {
        $xpos: nth(sprite-position($sprites2x, $name), 1) * $percent / 2;
        $ypos: nth(sprite-position($sprites2x, $name), 2) * $percent / 2;
        background-position: $xpos $ypos;
      }

      background-image: sprite-url($sprites2x);
    }
  }
}

.stickers-sprite {
  display: block;
  border: 4px solid #EFEFEF;
  margin: auto;
}

@each $selector in $image-list {
  .stickers-#{$selector} {
    @include retina-sprite(#{$selector}, $stickers-sprites, $stickers-retina-sprites, 1);
  }

  .stickers-#{$selector}:hover, .stickers-#{$selector}.#{$selector}_hover, .stickers-#{$selector}.#{$selector}-hover {
    @include retina-sprite(#{$selector}_hover, $stickers-sprites, $stickers-retina-sprites, 1);
  }
}

@media (min-width: 768px) and (max-width: 979px) { 
  @each $selector in $image-list {
    .stickers-#{$selector} {
      @include retina-sprite(#{$selector}, $stickers-sprites, $stickers-retina-sprites, 228 / 300);
    }

    .stickers-#{$selector}:hover, .stickers-#{$selector}.#{$selector}_hover, .stickers-#{$selector}.#{$selector}-hover {
      @include retina-sprite(#{$selector}_hover, $stickers-sprites, $stickers-retina-sprites, 228 / 300);
    }
  }
}

bbt.png

bbt.png

bbt_hover.png

bbt_hover.png

config.rb

http_path = "/"
css_dir = "public/stylesheets"
sass_dir = "sass"
images_dir = "public/images"
javascripts_dir = "javascripts"

relative_assets = true

howard.png

howard.png

howard_hover.png

howard_hover.png

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Touch-Compatible Retina Responsive Sprite</title>
    <meta name="description" content="We show you how to do a responsive page using sprite with compass">
    <meta name="author" content="Applidget">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" media="all" type="text/css">
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" media="all"  type="text/css">
    <link rel="stylesheet" href="stylesheets/application.css" media="all" type="text/css">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/application.js"></script>
  </head>
  <body>
      <div class="container">
        <div class="row">
          <div class="span4">
            <a href="#" class="stickers-sprite stickers-sheldon" rel="touch-sprite" data-selector="sheldon"></a>
            <br />
            <a href="#" class="stickers-sprite stickers-leonard" rel="touch-sprite" data-selector="leonard"></a>
          </div>

          <div class="span4">
            <a href="#" class="stickers-sprite stickers-penny" rel="touch-sprite" data-selector="penny"></a>
            <br />
            <a href="#" class="stickers-sprite stickers-howard" rel="touch-sprite" data-selector="howard"></a>
          </div>

          <div class="span4">
            <a href="#" class="stickers-sprite stickers-bbt" rel="touch-sprite" data-selector="bbt"></a>
            <br />
            <a href="#" class="stickers-sprite stickers-raj" rel="touch-sprite" data-selector="raj"></a>
          </div>
        </div>
      </div>
  </body>
</html>

index.rb

require 'sinatra'

get '/' do
  File.read(File.join('public', 'index.html'))
end

leonard.png

leonard.png

leonard_hover.png

leonard_hover.png

penny.png

penny.png

penny_hover.png

penny_hover.png

raj.png

raj.png

raj_hover.png

raj_hover.png

sheldon.png

sheldon.png

sheldon_hover.png

sheldon_hover.png