Em Calculator

Em Calculator

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