Kostom.net

Responsive Design


Whirl USS-Framework brings responsive design and state-driven styling to Unity UI Toolkit — features normally not supported by default. Whirl provides a powerful custom system that works in both the Editor and Runtime, using ScriptableObject themes, breakpoints, and a flexible class-switching engine.

Media Queries

Unity does not support CSS media queries, so Whirl implements its own lightweight responsive engine called ResponsiveBaseElement.

Whirl media queries use the root VisualElement’s size (not the screen size).This allows the system to work consistently in:
  • UI Toolkit Custom Editor Windows
  • Runtime Canvas/PanelSettings
  • Nested VisualElements (e.g., inside ScrollViews, Tabs, etc.)
  • Embedded UI layouts (e.g., in 3D world space)

Breakpoints are defined in the Theme ScriptableObject using CSS-like variables:
--breakpoint-sm: 250px
--breakpoint-md: 600px
--breakpoint-lg: 900px
--breakpoint-xl: 1200px

Check the theme section for more details on setting up themes.


Example Media Query Usage:
C#/ScriptableObjects
md:bg-red
lg:bg-aqua
UXML
md---bg-red
lg---bg-aqua

Orientative Queries

Whirl also supports orientative queries to target different device/panel orientations (landscape(ls) vs. portrait(pt)).

These can be combined with media queries for more specific styling rules.
pt:hover:sm:bg-black