All Projects → kaelig → Hidpi

kaelig / Hidpi

Licence: mit
Serve high resolution graphics to high density (Retina-like) displays with Sass.

Labels

Retinafy your website with Sass & Compass

hidpi() is a Sass mixin that seamlessly serves high resolution background images to high density (Retina-like) displays. It comes with a debug mode to test Retina graphics on a regular display.

Demonstration

How to Use It

  1. Install with Bower: bower install sass-hidpi
    OR Download _hidpi.scss to your Sass project (preferably with Compass enabled).
  2. Import the partial in your Sass files: @import 'path/to/hidpi';

Perfect, you can now use the mixin in your Sass project.

Passing Content to the Mixin

You can virtually pass anything to the mixin and it will be displayed on high density displays.

In this example, the border color of the #logo element is:

  • blue on regular displays
  • red on HiDPI (Retina-like) displays
#logo {
  background: url('../images/logo.png') no-repeat;
  border: 1px solid blue;

  @include hidpi {
    background-image: url('../images/logo_x2.png');
    background-size: 250px 188px;
    border-color: red;
  }
}

Compiles to:

#logo {
  background: url("../images/logo.png") no-repeat;
  border: 1px solid blue;
}
@media (-webkit-min-device-pixel-ratio: 1.3),
       (min-resolution: 124.8dpi),
       (min-resolution: 1.3dppx) {
  #logo {
    background-image: url("../images/logo_x2.png");
    background-size: 250px 188px;
    border-color: red;
  }
}

Image Only

When passing the name of an image as an argument, hidpi() serves the equivalent high-resolution image on high-definition displays.

Image files should be named as follows, placed in the images folder of your Compass project:

  • image.png: default image
  • image_x2.png: high-resolution image
#logo-auto {
  @include hidpi(logo);
}

Compiles to:

#logo-auto {
  background-image: url('../images/logo.png');
}
@media (-webkit-min-device-pixel-ratio: 1.3),
       (min-resolution: 124.8dpi),
       (min-resolution: 1.3dppx) {
  #logo-auto {
    background-image: url('../images/logo_x2.png');
    background-size: 250px 188px;
  }
}

Note: this feature requires Compass.

Debug Mode

You can force hidpi() to always serve high-resolution graphics and test the rendering on a standard, non-Retina display.

Set the $hidpi-debug variable to true:

#logo-auto-debug {
  $hidpi-debug: true; // Force high-resolution graphics on standard displays
  @include hidpi(logo);
}

Compiles to:

#logo-auto-debug {
  background-image: url('../images/logo_x2.png');
  background-size: 250px 188px;
}

It loads logo_x2.png by default (no @media queries).

Non-PNG images

hidpi(image) is looking by default for images/image.png.

If your image is a JPEG, for example image.jpg, you should specify it as a second argument:

#image-jpeg {
  @include hidpi(image, jpg);
}

Same story with a GIF:

#image-gif {
  @include hidpi(image, gif);
}

Requirements

  • Sass ~> 3.2 (for manual @include hidpi {})
  • Compass ~> 0.12.2 (for auto @include hidpi(image);)

Note: Compass is only needed when passing arguments to hidpi() instead of a content-block.

Also Read

More HiDPI examples and resources

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].