Style Editors – Antetype 1.3

The Style Inspector in Antetype contains all properties that can be edited for any element in Antetype. Unless you have an enormous monitor it is not possible to see all of the entries in the Style Inspector and styling tasks often involves at least one scroll of the inspector and often groups must be expanded and collapsed.

In Antetype 1.3 we have introduced pop-up Style Editors than can be shown either in-place next to your content (using a keyboard shortcut) or from the new style bar with a button press.

Border Style Editor

This post covers the details of the new style editors and uncovers a couple of hidden features that will speed up workflows with Antetype.


In an effort to help designers focus on their designs we have created the style editors so that focus on a single styling tasks. We have Style Editors for these styling areas:

  • Visibility
  • Size
  • Fill
  • Border
  • Layout
  • Rounded Corners
  • Margin
  • Padding
  • Drop Shadow
  • Inner Shadow
  • Float
  • Text Color
  • Text Shadow

Each editor focuses on just the task in hand, so for example the visibility editor only has two controls one to select the visibility mode (Visible, Hidden or Collapsed) and another to control opacity.

The editors can easily be accessed from the Style Bar in Antetype 1.3 by clicking on the relevant buttons.

There is another way to open the Style editors though…..

Open in-place

It is also possible to open Style Editors using Keyboard shortcuts. When a Style Editor is opened using a keyboard shortcut rather than from the Style Bar it will open right next to the element to be styled within the document. By opening the Style Editor next to the selection there is less distraction and focus remains on the design.

There are two types of Keyboard shortcuts that will trigger the Style Editors to pop-up, modifier shortcuts and single character shortcuts.

Screenshot 2013-12-06 14.06.44

The modifier shortcuts work as standard Keyboard Shortcuts in OS X – they can be seen in the View menu under Inline Editors. Modifier Shortcuts can also be customised in the System Preferences for OS X.


The single character shortcuts will only work when the main window in Antetype has the focus and are not customisable you can find these shortcuts in the Context menu.

Using Arrow keys and Scrolling to manipulate number fields

Unlike the Style Inspector the Style Editors have custom behaviour that allow any number fields to be manipulated with arrow keys or with the scroll wheel on a mouse or two finger scrolling on a trackpad.

All number entry fields in the Style editors will increase or decrease their values using the up or down arrows respectively. Using the shift key will jump the value by 10 rather than single digits.

A number field does not need to be the focused control either to have the value manipulated with a mouse or trackpad you can change the value by hovering over the control. Once your pointer is over the control then you can use the scroll wheel on the mouse or a two finger scroll on the trackpad to increase or decrease the values.

Single Undo Entry each time you use a Style Editor

An advantage of making changes using a Style Editor is that all changes that are while the style editor is open are grouped together into a single undo entry. This enables designers to try out many different values for style properties such as the exact colours in a gradient without polluting their undo list with hundreds of entries.
While a Style Editor is open changes can be reverted to their state prior to opening the Style Editor using ⌘ – Z or ESC.

Changes can be committed by clicking outside of the Style Editor or by pressing ⌘-⏎ or just ⏎.

Enable keyboard access to all fields in the Style Editors

The default System Preferences in OS X do not allow all controls in the Style Editors to be able to take the focus. This means that keyboard manipulation of segmented controls and stepper controls is not possible.

If you open System Preferences in OS X and Choose Keyboard and then Shortcuts you will see a preference for Full Keyboard Access – ensure that his is set to All Controls – see below.

Screenshot 2013-12-06 14.42.03

Further Reading

Read more about Antetype 1.3.

Find some hidden secrets in the new Style bar in Antetype 1.3.

Read about the new navigation and selection possibilities with the Status bar in Antetype 1.3.

This post is part of a series of posts about Antetype 1.3.

3 Responses to Style Editors – Antetype 1.3

Leave a Reply