Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.
react-native icon icon-pack ui react-component react-native-component react mobile ios android osx icons vector retina fontThis is a favorites, with a mobile web tips.
favorites css html5 iphone html5-css3 zepto android retina viewportIt 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.
icon icons svg png sprite spritesheet stack generator css sass less stylus stylesheet inline html vector rwd retina mustache gulpfriendlybLazy 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.
blazy blazyjs blazy.js lazy lazyload lazyloading image images picture srcset iframe video unity retina responsive performanceThis 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.
gulpplugin icon icons svg png sprite spritesheet stack generator css sass less stylus stylesheet inline html vector rwd retina mustacheRetinize 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.
upscale retina-screens pixel-art canvas nearest-neighbor retina pixelatenode-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.
css sprite sprites stylus retina imagesRetina-enable an HTML canvas according to devicePixelRatio.
canvas retina hdAn 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.
icon icons svg png sprite generator css sass less vector rwd retinaPuppet 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).
arch-linux puppet retina macbookAdds 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.
at2x postcss retina-images css postcssplugin retinaGrab 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.
pixel-ratio phantomjs retina screenshotres was mainly written for investigative purposes. Making retina design accommodations can be impractical. Consider alternatives to resolution detection. Methods return 0 where undetectable.
resolution dppx dpi dpcm device screen browser detection responsive retina device-pixel-ratio ender mobile detect dprThis 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.
gruntplugin glue sprites spriting retinaSimple function which determines if your code is running on a high DPR device or not.
retina dpr device-pixel-ratioReact component for serving high-resolution images to devices with retina displays
image react react-component retinaThe media mixin is receiving one or more parameters - the breakpoints we want to match.
sass media media-query mixins retina-support retina tablet breakpoint bootstrap orientation desktop media-blender susy scss mixin mobile blender landscape portrait cssThe 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.
background-image retina images postcss css postcss-plugin background imageLazy 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.
lazy image resize dynamic retinaReplaces 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.
angularjs ngsrc retina high-resolution-image
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.