Documentation

Layers

Layers can be managed from the Layers panel. A layer can be renamed by double clicking. The lock icon will freeze the layer in position. And the eye icon will show / hide the layer.

Button actions from left to right:

  • Move layer up
  • Move layer down
  • Delete layer
  • Add new layer
  • Duplicate layer

Moving Layers

Layers can be selected by clicking on them and moved by dragging them on the screen. Holding down the Control(ctrl) key will cause the layer to be snapped to any other layers side.

Inputs

There are two kind of inputs: range and color. The range sets values as pixels. Their minimum and maximum values differ by filter. Double clicking on the input opens a prompt where you can set the value manually (without limits).

Clicking in a color input will open the color picker where you can visually set the color.
Typing a hex color into the input will set the value also.

Images

Images can be added by dragging and dropping them into the application, or via the background filter. Images that are dropped are converted to layers, thier size will match the image dimensions and added as the background filter.

Exporting

All of your layers can be exported to separate CSS rules, by clicking the download icon in the toolbar. You will be promted for a filename, and then the file will be downloaded to your machine.

Rules are named as the Layers are named, with the difference that any none alphanumeric(plus: -_) characters will be stripped from them converted to lowercase, and spaces will be converted to dashes(-).

For example if you have a layer named Button Green the rule will be named button-green

The exported rules will have all styled css except position.

Limitations

In the free version you are limited to one document at a time wich is stored at your local machine.

Feedback

You can leave feedback in the Support Page of the application.

Shortcuts

* Desktop only

Keys Action
up Move Layer Up 1px
down Move Layer Down 1px
left Move Layer Left 1px
right Move Layer Right 1px
Keys Action
shift-up Move Layer Up 10px
shift-down Move Layer Down 10px
shift-left Move Layer Left 10px
shift-right Move Layer Right 10px
Keys Action
ctrl-z Undo
ctrl-shift-z Redo
ctrl-s Save Document
ctrl-o Open Document
ctrl-plus (+) Zoom In
ctrl-minus (-) Zoom Out
ctrl-f * Toggle fullscreen
ctrl-q * Quit