Sizing input box controls


I think it'd be an awesome bit of polish for an upcoming release to have a "syntax-aware" textbox or widget like an IDE, so that people using the tool for the first time (or who just need a refresher) can enumerate / see what the options are for valid inputs.

Right now all of the sizing input boxes in subform basically let you type in little expressions in a layout DSL, and though I am sure designers who are used to slinging CSS all day will be quick to pick it up & internalize, it may be a little confusing/daunting for newcomers.

Each sizing input box can currently contain 3 distinct values, and each of those values lets you mix and match 3 different unit types (relative, %, or absolute px units). That's a lot to keep in your head when you're first starting, and a graphical widget could help convey that complexity/optionality!

In the same way that some tools have a bidirectional mapping between physical scrubbers and textboxes, you could have a widget that presents:

[min | size | max]
[px | s | %]

Which pops up (optionally) as you focus on a sizing textbox.

Sorry if this is a bit incoherent, can scribble a mockup!

How-to: Use the stretch unit in Subform

Ethan, I moved this over to a new topic since it's a feature request/discussion.

I think it's an interesting idea, discoverability of the sizing syntax and units is definitely lacking right now. Would love to see a basic mockup for what you're thinking.


Here's a mockup, made in Subform!

A little gnarly looking, but hopefully conveys the premise:


Awesome, thanks for making this Ethan! (And for doing it in Subform... :grinning: )

I really like the discoverability aspect and the idea of integrating some help information right there in context.

I think there are three issues that we face right now:

1. It's not clear what the available units are and how they work. Spacing and size can be set as the following units:

  • Absolute (i.e. device independent pixels)
  • Stretch (based on parent's size, number of siblings and their sizes)
  • Percentage (based on parent's size)

Size is unique in that it can also be set as:

  • Native (the absolute size of the corresponding image)
  • Hug (the minimum size required to contain all children and their spacing)

On top of this, there is also the Aspect Ratio setting, which can cause one of both of the width/height size values to display as AR, because the layout engine is driving the size, based on an aspect ratio. (e.g. 16:9)

2. The syntax isn't discoverable. What are the underscore and caret characters for and how do they work? Changing around the default (1s_20) doesn't always produce a result that makes it evident.

3. It's not clear what combinations of units are possible. Not all units can be combined in the syntax. Subform doesn't accept relative values (stretch, percentage) as min/max values, for example.

In our testing, we've found that these are mostly learning issues. That is, once the designer has learned how these things work, they're no longer an obstacle to use.

That doesn't make them any less important to solve, but it does potentially change how we might address them. We want to make sure, for example, that any solution doesn't end up making things awkward/slower for designers who have learned the system.

I think your solution does a good job on #2: it provides labels and inputs that describe the various parts of the size/space value.

Seeing what units are available to use in a dropdown mostly solves #3. It doesn't really explain why those are the options, though. We might be able to do this in the help text or in a linked video as you mention.

I think #1 is probably the least addressed issue here, because even with some experimentation, it's still hard to understand the unit and layout semantics without some explanation/examples.

Some other thoughts:

When would this popover appear? On hover or focus? Is that annoying for users who have internalized this? Can it be shut off? If so, how?

What happens for inputs that can't accept min/max values?

Right now, hug and native are acting as values and units all-in-one. In reality, they are units, and the value just isn't displayed. I think it could be useful to see the value (like the native pixel size of an image). This could happen in the input or the HUD, or both. But it could be confusing when the input disables when selecting certain units.


I’m thinking the popover would appear on focus after a longish time (e.g. 10 seconds…) delay if no input occurs. This way “pros” would seldom encounter it.

There could also be a little (?) button on the right-hand side of the input box to manually trigger the popover if the timer-based setup is finicky to get right.

For inputs that can’t accept min/max values, the popover sizing inputs for those values would not exist or be disabled/greyed-out!

I think the whole value proposition of having this hypothetical sizing input popover is to make it super explicit which input boxes accept which valid subset of the “sizing DSL”! => Make the GUI visually encode the semantics!


There is another similar tool called Antetype, probably is a good idea to have a look on it :slight_smile:


Since I found layouting with Antetype very intuitive here we have some screen-shoots