Core Principles

At the heart of ZoboUI, we're driven by a set of key principles that guide our approach to UI development in Unity. These principles are all about making the developer experience as intuitive and efficient as possible.

Why ZoboUI?

ZoboUI was born from the idea of bringing the flexibility of Tailwind CSS into the world of Unity's UI Toolkit. Our initial attempts made it clear that a direct adaptation of Tailwind to Unity would be either too restrictive or require a lot of custom workarounds to match HTML and CSS functionalities. We also aimed to ensure developers didn't have to double-check every Tailwind feature for Unity compatibility in the documentation.

Given these challenges, we shifted our strategy. We aimed to create a UI framework that captures the spirit of Tailwind CSS but is customized for the unique aspects and limitations of USS and UXML. This shift allowed us to develop a framework that resonates with UI developers while being specifically optimized for Unity's ecosystem and the demands of game development workflows.

Simplifying Development for Newcomers

ZoboUI is all about easing the learning curve for new developers. By offering straightforward and descriptive utility classes, it's easier for newcomers to grasp UI element behavior without sifting through numerous custom USS files. This is a more straightforward approach compared to the BEM (Block, Element, Modifier) method, which can be more complex and less intuitive for those new to Unity's UI Toolkit and USS.

Unified Style Sheet Approach

Instead of multiple smaller USS files, ZoboUI generates a single USS file. This unified approach not only simplifies management but is also aligned with Unity's performance guidelines, ensuring efficient load times and runtime performance.

Embracing a Component-Driven Approach

To address concerns about repeating code (DRY), ZoboUI promotes a component-driven development approach. This means encapsulating styles in reusable components and templates instead of repeating styles in multiple places. It encourages modularity and reusability, fitting well with modern UI development practices.

Diverging from Tailwind: Unique Features of ZoboUI

While ZoboUI shares foundational concepts with Tailwind CSS, several key differences set it apart, especially in the context of Unity's UI Toolkit:

Tailored for Unity and Non-Developers

• No Arbitrary Value Support: ZoboUI is designed to be user-friendly, even for non-developers. The Unity UI Builder's limitations on specific values and formats have led us to avoid arbitrary values in ZoboUI. We've updated modifiers to start with "_" by default (e.g., hover_bg-red) instead of ":" (e.g., hover:bg-red) to accommodate the UI Builder's character restrictions.

Working within the feature set of USS compared to CSS

• No Dynamic Alpha and Responsive Utilities: ZoboUI doesn't support dynamic alpha values (like text-blue-600/75) or responsive utilities (like sm:rounded-full). This is due to Unity USS's lack of support for nested variable functions and media queries respectively.
• No Grid Support: Unity's USS doesn't natively support grid layouts, leading to their exclusion from ZoboUI.

Pre-compiled Classes

• Pre-Generated and Purgeable Classes: To enhance the development workflow, ZoboUI generates all theme-configured classes upfront. This allows for immediate application of classes in the UI Builder without constant recompilation. Before going live, unused classes can be purged, resembling older Tailwind versions.

Why Not Just Mimic Tailwind Completely?

In developing ZoboUI, we consciously chose to align closely with USS and UXML's current capabilities, rather than force-fit all Tailwind features. Here's why:

Performance and Accessibility

• Performance and Platform Compatibility: We prioritize performance and cross-platform functionality. ZoboUI's core utilities will evolve alongside official USS updates.
• Non-Coder Friendly: ZoboUI is designed to be intuitive for non-coders, especially within the UI Builder environment.

Clarity and Extensibility

• Descriptive Class Names: We prefer clear and descriptive class names (like position-absolute) over more terse alternatives, catering to Unity developers who may not be familiar with standard CSS properties.
• Configuration Serialization: ZoboUI allows easy sharing and reusing of configurations across projects, thanks to its design for JSON serialization.
• Customizability: We encourage extensibility and customization in ZoboUI. Users can add or modify features, including utility naming (though sticking to the official naming aids in documentation usage).

Project Independence

• No Runtime Dependency: ZoboUI is designed to avoid dependencies in runtime/play-mode. This means you can remove ZoboUI from your project anytime, continuing to use the generated USS files independently.

In summary, ZoboUI is a distinct, Unity-tailored UI framework inspired by Tailwind CSS but adapted to meet the specific needs of Unity developers and the constraints of USS and UXML. Our goal is to make UI development in Unity not just more efficient, but also more inclusive for a wider range of creators.