gum-layout

Solid

Reference guide for Gum's layout system — dimension units, position units, children layout modes, layout calculation flow, and layout suspension. Load when working on Width/HeightUnits, XUnits/YUnits, stacking, wrapping, auto-sizing, Anchor/Dock, or GraphicalUiElement layout logic. For deep engine internals (debugging/optimizing UpdateLayout, UpdateChildren, dirty state), see the gum-layout-engine skill instead.

Web & Frontend 542 stars 77 forks Updated today MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
91
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Gum Layout System Gum's layout is driven by **unit enums** that tell the engine how to interpret numeric Width/Height/X/Y values, plus a **children layout** mode on containers. All layout lives in `GraphicalUiElement` (`GumRuntime/GraphicalUiElement.cs`). ## Key Concepts ### Dimension Units (Width & Height) `DimensionUnitType` enum (`GumDataTypes/DimensionUnitType.cs`) controls how a Width or Height value is interpreted. Units fall into dependency categories: | Dependency | Units | |---|---| | No dependency | Absolute, PercentageOfSourceFile, PercentageOfOtherDimension, MaintainFileAspectRatio, AbsoluteMultipliedByFontScale, ScreenPixel | | Depends on parent | PercentageOfParent, RelativeToParent, RelativeToMaxParentOrChildren* | | Depends on children | RelativeToChildren | | Depends on siblings | Ratio | \* `RelativeToMaxParentOrChildren` is classified as `DependsOnParent` but also depends on children — special-cased throughout the layout engine. See [dimension-units.md](dimension-units.md) for circular dependency handling. See [dimension-units.md](dimension-units.md) for detailed descriptions. ### Position Units (X & Y) `GeneralUnitType` enum (`GumDataTypes/UnitConverter.cs`) controls how X/Y values are measured: from edges, center, baseline, or as percentages. Combined with **XOrigin/YOrigin** (HorizontalAlignment/VerticalAlignment) to set which point on the element is being positioned. See [dimension-units.md](dimension-units.md) for detailed descriptions. ### ...

Details

Author
vchelaru
Repository
vchelaru/Gum
Created
11 years ago
Last Updated
today
Language
C#
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

layout-composition

Use when deciding responsive page or screen structure: section order, scan pattern, grid/flex composition, breakpoints, viewport hierarchy, responsive media, and density. Do NOT use for user-goal decomposition (use `task-analysis`), navigation taxonomy (use `information-architecture`), visual polish (use `visual-design-foundations`), or component/token contracts (use `design-system-architecture`).

0 Updated 1 weeks ago
jacob-balslev
AI & Automation Listed

flutter-building-layouts

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.

3 Updated 1 weeks ago
openplaybooks-dev
Web & Frontend Solid

hig-components-layout

Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about sidebar, split view, tab bar, tab view, scroll view, window design, panel, list view, table view, column view, outline view, navigation structure, app layout, boxes, ornaments, or organizing content hierarchically in Apple apps. Also use when the user says how should I organize my app, what navigation pattern should I use, my layout breaks on iPad, how do I build a sidebar, should I use tabs or a sidebar, or my app doesn't adapt to different screen sizes. Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.

353 Updated today
aiskillstore