Layout

Kuika's Layout feature allows easy visual organization of elements, such as perimeter spacing, alignment and sizing. Especially when using organizer structures such as Row or Column, the alignment commands given affect not only these structures themselves, but also the layout of all the elements they contain. In this way, a consistent look can be achieved when creating complex designs. Kuika's Responsive Layout approach allows you to create designs that are compatible across different screen sizes, while offering a customizable structure for each element thanks to settings such as Padding and Size.

You can save Layout styles created in the Custom Style section and use them on different screens or on other elements on the same screen. For this operation, you can select a previously saved style with the Load Style feature. You can edit, duplicate or delete saved Layout styles at any time.

Padding (Inner Space)

You can use the Padding property to add internal space to elements. This area is the space between the content and the boundaries of the element. By setting the Top, Bottom, Right and Left options to a specific value, you can add space in any direction of the element.

In UI (User Interface) design, Margin allows you to specify the space or distance around an element (for example, a button, label). Kuika does not have Margin. However, you can easily make the space structure between elements or objects without using Margin with the Padding structure.

Size

You can use the following properties to edit the size of the elements you add to the workspace:

1. Width: Specifies the horizontal size of the element.
2. Height: Specifies the vertical size of the element.

You can use px (pixels) or % (percent) units for sizing:

• PX: Specifies a fixed value. For example, a width of 200px appears the same size on all devices.
• %: Specifies a proportional value. For example, a width of 20% adjusts to the browser screen width.
• 100% Value: Allows the element to occupy the entire area according to the browser width or height.

Max Size

Max Size determines the maximum width and height values that the element can take.

• For example, when Max Width: 480px is entered in an Image element, the maximum width will be 480px according to the browser width, this width may be reduced on narrower screens.

Min Size

Min Size refers to the smallest width or height that an element can be reduced to.

• Min Size is used to preserve the appearance order of elements and is usually defined together with Max Width or Max Height.

Align

It is used to align the content of the elements themselves or other elements in the container they are in.

• Vertical Alignment
  • Up aligned
  • Ortali
  • Down aligned
• Horizontal Alignment
  • Left aligned
  • Ortali
  • Right aligned

Display (Display Type)

You can use the Display property to specify whether the elements should be arranged side by side or one below the other.

• Block Places the element on a line by itself in the container.
• Inline: Arranges the elements side by side, one below the other. However, some elements may not support this display type.

With these editing tools, you can shape your user interface (UI) design in an efficient and organized way.