Em Calculator

Em Calculator

Sep 15 / 5:10pm

Rainbow colors

Slick design shouldn’t compromise HTTP requests or size of DOM tree. That’s why the new version is going to use as little images as possible – you can see how each new color pane was made – just by changing some RGB values in CSS.

Background mask

This effect was created by using one large PNG mask and a few smaller semitransparent black sprites (triangles, X circles). There is no need to make new images for each color, as semitransparency takes care of everything – starting from darker border to hover effects.

Jul 3 / 6:01pm

Preview of Preferences

Preferences will work on the fly – everything is saved instantly. [Watch in HD]

Jun 21 / 6:11pm

Sneak peek of Em Calc 3.0

Em Calculator 3.0 Comp

You can probably tell where the inspiration came from. Frankly, I wanted the new version to blend with my desktop as much as possible. I’m planning to run it in Fluid.app. Enough about visuals already, here comes the new stuff:

  1. Project toolbar at the top – ‘new project’ button, project switcher (editable select), save and delete buttons. On the very right config button, sliding in the sidebar.
  2. Sidebar – all configuration was moved here. You can see some new features regarding autosave and ability to export / import data (because as you probably already know, projects are saved only in your browser).
  3. Main tree pane – all magic happens here.
    • ‘Add sibling / child’ buttons are visible on hover. Keyboard shortcuts for these actions are planned too.
    • There’s a new button with ‘plus’ icon – it allows to add CSS properties to the tree, like em-based line-height.

What’s probably not gonna change:

  • No drag & drop.
  • Deleting a node means deleting its children too.

Other things: No support for IE whatsoever. If you’re using cutting-edge browser like Safari 4 or Firefox 3.5, you’ll be rewarded with slicker look & greater performance.

Looking forward to your comments.

Filed under  //  css   design   em calculator   mockup   prototype   psd comp