Size and position

The size and position module is comprised of the following submodules:

All width and height fields are of the dimension type and can be tokenized and accept the following units: PX / VW / VH / EM / REM, and ‘auto’ or ‘none’ strings which don’t have a unit.

Width submodule

1. Width field - can also accept ‘auto’ string, which sets the width to be determined by the content’s width (after adding padding and border if exists).

2. Max / Min width fields - can also accept ‘None’ string (Coming soon)

Height submodule

1. Height field - can also accept ‘auto’ string which sets the height to be determined by the content’s height (after adding padding and border if exists).

2. Max / Min height fields - can also accept ‘None’ string

Allowing width, height and also min/max

---

Position sub-module

The position sub-module in the ‘Size and Position’ module allows the designer to switch between the main 3 position methods for all elements on the canvas:

1. Position - static

2. Position - relative

3. Position - absolute

For ‘relative’ and ‘absolute’ position options the submodule allows to set a Z-index value which helps determine the hierarchy of overlapped stacked objects.

All types of position types

Position 'static'

This position option is the default one for all elements and components. It makes the element follow the natural DOM flow, being pushed by things before it, and pushing things after it.

The static position does not allow setting a Z-index and will be counted as if it had the Z-index of 0 in relation to other elements that do have a Z-index set.

Position static does not have any other DDP fields opening when choosing it.

Position 'relative'

This position option allows the designer to ‘move’ the object visually in relation to its original ‘static’ place by a set amount of dimension units (PX/VM/VH/Auto) in either of 4 directions. The object is kept in the ordinary DOM flow, just like position ‘static’.

Relative example

You can set a Z-index for objects with position ‘relative’.

Once set to ‘relative’, the object can be freely dragged around with a mouse/trackpad, while it’s original positioning (if it was static) is kept in the flow.

Note that a position ‘relative’ with no values is visually indistinguishable from position ‘static’ and is useful to set to parent objects that have children which are set to ‘absolute’.

You can use different position values on different states and props (for example a card pops up 20px upon hover) or even just to change the Z-index between states (overlapping avatars, the hovered avatar needs to be above all the rest).

Position ‘absolute’

This position option allows the designer to ‘move’ the object visually in relation to the first parent that has its position to anything but ‘static’ (so relative or absolute). The absolutely positioned object is removed from the regular DOM flow and is not affected or affecting other sibling objects.

absolut example

You can set the Z-index for objects with position ‘absolute’.

Once set to ‘absolute’, the object can be freely dragged around with a mouse/trackpad. It also has an info unit that shows who the parent is to whom this object is absolutely positioned.

Position absolute is useful for allowing some elements to ‘break away from the mold’ for example to show a badge over buttons.