jQuery pixel perfect tool
A simple tool for convenient work with design mockups in a browser
jQuery-Pixel-Perfect is a small plugin that conveniently allows you to transpose a design layout over a developed site. With jQuery-Pixel-Perfect, you do not need to make measurements and you can write CSS code that pixel-matches to the design layout.
How to install:
Create an overlay image for page you are coding and put it in any folder in your project. For example in
How to use:
Use the following buttons:
- [Up] / [Down] / [Left] / [Right] keys or mouse to move the mockup
- [Q] / [W] keys to change the opacity
- [S] key to show/hide mockup
- [F] key to change the "absolute/fixed" positioning property of mockup
You can actually change the default parameters (like actions of keyboard keys, image path, mockup draggability). To do so, you need to specify the input parameters in the jQuery-Pixel-Perfect method.
P.S. Here you can find the full table with keyboard keys code