react-native-vector-icons - Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling

•    Javascript

Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.

mobile-web-favorites - This is a favorites, with a mobile web tips.

This is a favorites, with a mobile web tips.

svg-sprite - SVG sprites & stacks galore — A low-level Node

•    Javascript

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

blazy - Hey, be lazy! bLazy

•    Javascript

bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn't browse the whole page. If you don't want to host the script yourself you can link to the latest minified file: //cdn.jsdelivr.net/blazy/latest/blazy.min.js on jsDelivr. Exchange latest with the specific version number if you want to lock it in.

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

•    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

retinize - Retinize will upscale (using nearest neighbor) images to look correctly on retina screens

•    Javascript

Retinize will upscale (using nearest neighbor) images to look correctly on retina screens. This is particularly useful for pixel art when you don't want to store an upscaled version. Here's a demo. The blurring issue has been mostly resolved with CSS now. The jQuery version remains the same, but this is only really needed if you need older browser support or just want use a canvas anyway so the class is canvas only.

node-sprite - A CSS Sprite Generation Library with Stylus and Retina Support.

•    CoffeeScript

node-sprite uses ImageMagick for its graphics operations. So make sure you have the convert and identify command available in your envirnoment. There are three exported functions: sprite, sprites and stylus. The following examples show how to use them.

autoscale-canvas - Retina-enable an HTML Canvas element

•    Javascript

Retina-enable an HTML canvas according to devicePixelRatio.

svg-sprite-data

•    Javascript

An attempt to make the svg-sprite lib work on strings only which will allow everyone to create their own awesome libs on top of it. The idea is to remove ALL file-system access and leave all that to the authors who create tools on top of this. So, this module only has a couple of methods, only accepts strings & only returns data - it never touches anything on the file-system.

puppet-archlinux-macbookretina - Puppet module and accompanying documentation to install/setup Arch linux on a MacBook Pro Retina 11,4

•    Ruby

Puppet module and accompanying documentation to install/setup Arch linux on a MacBook Pro Retina using Puppet (version 4 or 5). This is the puppet module I use to manage my shiny new MacBook Pro Retina (mine is a MacBookPro11,4).

postcss-at2x - Simplify handling of retina images in CSS

•    Javascript

Adds at-2x keyword to background and background-image declarations to add retina support for images. Change the identifier added to retina images, for example file@2x.png can be file-retina.png.

pixelratio-screenshots - Grab a screenshot of a website, defining your own pixelratio

•    Javascript

Grab a screenshot of a website, defining your own pixelratio. Uses phantomjs. Obviously, as the engine, it uses PhantomJS. However, by default PhantomJS does not allow you to set the pixelratio (think retina). pixelratio-screenshots allows you to take a screenshot of a website, in the pixelratio that you define.

res - Device resolution detection module

•    Javascript

res was mainly written for investigative purposes. Making retina design accommodations can be impractical. Consider alternatives to resolution detection. Methods return 0 where undetectable.

grunt-glue-nu - Create sprites automatically with Glue, but the grunt way!

•    Javascript

This Grunt plugin wraps and enhances the Glue command line spriting tool. It's built as a Grunt multiTask that supports extensible task and target-specific options, multiple source locations per target, globbing and so on. Every task target results in one sprite 'bundle', consisting of the sprite sheet PNG image and a style sheet. All of Glue's command line options are supported through the options, adding some sensible defaults in order to minimize the need for configuration.

isRetina - Simple function which determines if your code is running on a high DPR device or not

•    Javascript

Simple function which determines if your code is running on a high DPR device or not.

react-retina-image - React component for serving high-resolution images to devices with retina displays

•    CoffeeScript

React component for serving high-resolution images to devices with retina displays

media-blender - Easy and predictable SASS/SCSS media queries

•    CSS

The media mixin is receiving one or more parameters - the breakpoints we want to match.

postcss-retina-bg-img - Automatically add retina background images

•    Javascript

The idea of this plugin is to detect any background images in your CSS and, if a retina version of the same file is found, to automatically add that file within a retina-appropriate media query. The possible retina suffixes to find a retina image with. For example, if the background image is foo.png, and you've specified @2x as the retinaSuffix, then the file foo@2x.png would be used as the retina version. Note that the retina media query is only added if the file actually exists; if you don't have a foo@2x.png then this plugin won't change a thing.

react-adaptive-image - React component that allows for lazy image loading on scroll with resizing based on users viewport size and screen density (retina display)

•    Javascript

Lazy image loading with optional dynamic resizing based on viewport and screen pixel density. Deliver the right content for the right screen sizes. This react component look at its own dom node and ask for a properly sized image based on its own width. The image request will not happen until it should be lazy loaded into the dom.

angular-retina - Add support for Retina displays when using element attribute "ng-src"

•    Javascript

Replaces the AngularJS directive ng-src by a version which supports Retina displays. If the browser runs on a Retina display and the referenced image is available in double resolution, then load the high resolution version of that image from the server.