Elements, such as buttons, images, or inputs, are created for each page individually.
Each element requires two types of information:
The former are individual for each type of element, while the latter are mostly information that are similar/consistent for all kinds of elements.
Each element offers a set of parameters that are the same for each of them:
Elements can be positioned and styled almost freely. An element comes with a variety of mandatory fields
For the first four parameters: These are entered with a value followed by a unit, e.g. '1500px' or '80%'.
See here for additional information and examples.
Apart from these required parameters, any additional CSS properties can be set here by entering the key-name in the 'Add key'-field, and entering a proper value for that property.
Note
Due to the frameworks used in the application, several properties need to be preceeded with two dashes,
e.g. --background: ...
This will be noted in the suggested properties for each element.
Also see here for further hints / tricks.
In case percentages are given, these refer to the size of the actual screen, meaning a width of 100% will always exactly span the user's screen.
The element is first placed on a canvas, with sizes equal to the background dimensions (see here).
Example
A background with a width of 1000px and a height of 1500px would result in a canvas with (1000px * 1500px).
A button with a width of 1000px and a value 'left' of 250px would span 2/3 of the canvas, and be 250px from either side edge of the canvas.
This final canvas, with all elements positioned on it, is then shrunk down / expanded to fit the screen exactly, and scales all elements with it, so that their relative position on the background canvas does not change.
For instance, if a background image is chosen, this method would allow the user to position a button at an exact location on this background image, regardless of the user's resolution.