Decodize

console.log

PIXI : Tool to Create a Pixel Perfect Site.

I hate making sites pixel perfect, but some times its very important to match the site exactly with design. Earlier I have used tool like Pixel perfect – a Firefox Addon & also tried some JavaScript implimentations. Recent versions of FF is not supporting pixel perfect Addon. I filed to find anything that can serve my purpose. PIXI is small js & css file. When you activate PIXI you will get an overlay & you can drag n drop design mockup into it. You can adjust opacity, position and z-index.

PIXI Demo
PIXI Page
PIXI Download

PIXI

Note: Demonstrated template is not mine.

Install

Include pixi.js, pixi.css and jQuery in your site.

<link rel="stylesheet" href="http://praveenvijayan.github.com/PIXI/code/pixi.min.css">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://praveenvijayan.github.com/PIXI/code/pixi.min.js"></script>

Usage

Press G to activate the overlay. Drag n Drop design mockup/template into the overlay.

PIXI

Press shift + &mouse; drag image to adjust.

PIXI

Press 0-9 to set opacity.

Shortcuts

G Toggle overlay. Z Bring fornt or sent to back [z-index:0-9999]. ← Moves overlay image 1px left. → Moves overlay image 1px right. ↑ Moves overlay image 1px up. ↓ Moves overlay image 1px down. shift + Drag Moves overlay image. 0 – 9 Sets overlay opacity. P – Disables overlay’s pointer event. When pointer event is none, you can’t drag n drop images. Activate it (press ‘P’) when you want to inspect underlaing elements.

Browser support

PIXI uses HTML5 DnD, File API & Local storage to do things. It won’t work in IE. Tested in chrome & Firefox.