Smile Designer Smile

Since a while we are secretly working on a design relaunch for the InterNations Portal. The usual process is that a screen which is designed in photoshop will be implemented in html and css. To be honest: A F***cking amount of time is spent to get all borders, margins and paddings right.

To optimize that process we created a small jQuery Plugin which enables you to have an opaque overlay on top of your layout that contains the draft. Through drag and drop you can create a visual match and see if your layout fullfills the designers vision (and makes him smile at the next meeting).

DEMO

I don't really understand what you are doin' there - please show it to me.

Click to see a demo!

INSTALL

Download the code or get it from github through git

PLAIN TEXT
CODE:
  1. git clone git://github.com/sebastiandeutsch/smile-designer-smile.git

or browse the repository here.

USAGE

Just DOUBLE CLICK on the screen and the underlaying layout will be displayed opaque so you can visually match your result through drag and drop. To finetune you can even use your cursor keys. To hide the layout do a double click again.
Every position will be logged through console.log, so you can adjust the initialisation for the next page refresh (see optional hash).

IMPLEMENTATION

Just inititalize the plugin through

PLAIN TEXT
CODE:
  1. jQuery(document).smileDesignerSmile(pathToDraftPng, optionalArguments)

or look at some example code here:

PLAIN TEXT
JAVASCRIPT:
  1. jQuery(document).ready(function() {
  2. jQuery(document).smileDesignerSmile('my_awesomelayout', { backgroundPosition : "-100px 100px", opacity : "0.7"} );
  3. });

Optionally you can use an empty div as an image container:

PLAIN TEXT
CODE:
  1. jQuery('#dummy').smileDesignerSmile(pathToDraftPng, optionalArguments)

WHY DON'T YOU USE PixelPerfect

Oh we do use PixelPerfect - but sometimes you're testing on other browsers that FireFox (you know which one I mean, the really filthy ones) and then you can be happy that SmileDesignerSmile is Browser agnostic (and btw works in all major browsers).

COPYRIGHT

All code is © 2009, 9elements and is released under the MIT License.
Feel free to email (contact mofoat 9elements.com) us with any questions or feedback or drop me a line at Twitter.

I LIKE THIS - CAN I HELP

Yes - add this to del.icio.us or digg us or in case you're a maniac coder, checkout the repository and add more features.