IndigoUI Style Guide

From Scribus Wiki
Revision as of 15:08, 2 February 2025 by Nitramr (talk | contribs) (Created page with "Category:EN Category:User interface ==UI Spacing== ===Grid=== The UI spacing grid follows a rule of 4, 8, 16, 24, 32 etc. In example, button group spacing is 4, widget margin is 8, icon size is 16. ===Rules=== thumb|alt=General UI spacing|General UI spacing The standard spacing between layout blocks within a container is 8px. <br> File:Spacing - widget margin.png|thumb|alt=widget spacing inside a container widget|Widget spacing...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


UI Spacing

Grid

The UI spacing grid follows a rule of 4, 8, 16, 24, 32 etc. In example, button group spacing is 4, widget margin is 8, icon size is 16.

Rules

General UI spacing
General UI spacing

The standard spacing between layout blocks within a container is 8px.

widget spacing inside a container widget
Widget spacing inside a container widget

The inner spacing of a container is always 8px (Qt default is 9). The spacing can either be set in the layout of the container, or in the layout of the widget that is added to the container.

Widget group spacing
Widget group spacing

The spacing of widgets within a FormWidgets (button group) is 4px.

The spacing between 2 FormWidgets is 16px. There are several ways to define the spacing. If the two FormWidgets are within a layout, you can set the layoutSpacing property to 16. If that is not possible, you can set a horizontal spacer with a fixed width between the two FormWidgets. The width of the spacer depends on the layoutSpacing of the parent layout. With a layoutSpacing of 4, a horizontal spacer of 12px is required (4 + 12 = 16).