Customization
Customizing Spacing
Spacing is a fundamental aspect of design in ZoboUI, affecting everything from layout to the rhythm of your UI. The spacing and negativeSpacing fields in the ThemeConfig asset allow you to define these values globally for your project.
The spacing values are used by a number of utilities in your project, and save time by allowing you to use a consistent spacing scale throughout your UI without having to define each value individually for each utility.
Why Both Positive and Negative Spacing?
Positive spacing is used to create padding, margins, and insets, and is often used to separate elements from each other. Negative spacing, on the other hand, can be used to pull elements closer together or overlap them. Having both allows for a more comprehensive design system that can handle a wide range of layout scenarios.
Default Spacing Scale
By default, ZoboUI includes a spacing scale inspired by Tailwind CSS. Since Unity does not support rem units, all values are in px for absolute sizing.
Here are the default spacing values:
| Key | Value |
|---|---|
| 0 | 0px |
| 1 | 4px |
| 2 | 8px |
| 3 | 12px |
| 4 | 16px |
| 5 | 20px |
| 6 | 24px |
| 7 | 28px |
| 8 | 32px |
| 9 | 36px |
| 10 | 40px |
| 11 | 44px |
| 12 | 48px |
| 14 | 56px |
| 16 | 64px |
| 20 | 80px |
| 24 | 96px |
| 28 | 112px |
| 32 | 128px |
| 36 | 144px |
| 40 | 160px |
| 44 | 176px |
| 48 | 192px |
| 52 | 208px |
| 56 | 224px |
| 60 | 240px |
| 64 | 256px |
| 72 | 288px |
| 80 | 320px |
| 96 | 384px |
| px | 1px |
| 0point5 | 2px |
| 1point5 | 6px |
| 2point5 | 10px |
| 3point5 | 14px |
Similarly, here are some default negative spacing values, which are prefixed with minus-:
| Key | Value |
|---|---|
| minus-0 | -0px |
| minus-1 | -4px |
| minus-2 | -8px |
| minus-3 | -12px |
| minus-4 | -16px |
| minus-5 | -20px |
| minus-6 | -24px |
| minus-7 | -28px |
| minus-8 | -32px |
| minus-9 | -36px |
| minus-10 | -40px |
| minus-11 | -44px |
| minus-12 | -48px |
| minus-14 | -56px |
| minus-16 | -64px |
| minus-20 | -80px |
| minus-24 | -96px |
| minus-28 | -112px |
| minus-32 | -128px |
| minus-36 | -144px |
| minus-40 | -160px |
| minus-44 | -176px |
| minus-48 | -192px |
| minus-52 | -208px |
| minus-56 | -224px |
| minus-60 | -240px |
| minus-64 | -256px |
| minus-72 | -288px |
| minus-80 | -320px |
| minus-96 | -384px |
| minus-px | -1px |
| minus-0point5 | -2px |
| minus-1point5 | -6px |
| minus-2point5 | -10px |
| minus-3point5 | -14px |
Customizing Your Spacing
You can customize your global spacing and sizing scale within the Theme Config asset. Under the Core section, you will find the Spacing and Negative Spacing fields where you can add or adjust the spacing values as needed.
With ZoboUI's spacing system, you have the flexibility to define a consistent and intuitive spacing scale, making your UI design cohesive and pixel-perfect.