Overview
GPUI provides CSS-like styling with Rust type safety.
Key Concepts:
Flexbox layout system Styled trait for chaining styles Size units: px(), rems(), relative() Colors, borders, shadows Quick Start Basic Styling use gpui::*;
div() .w(px(200.)) .h(px(100.)) .bg(rgb(0x2196F3)) .text_color(rgb(0xFFFFFF)) .rounded(px(8.)) .p(px(16.)) .child("Styled content")
Flexbox Layout div() .flex() .flex_row() // or flex_col() for column .gap(px(8.)) .items_center() .justify_between() .children([ div().child("Item 1"), div().child("Item 2"), div().child("Item 3"), ])
Size Units div() .w(px(200.)) // Pixels .h(rems(10.)) // Relative to font size .w(relative(0.5)) // 50% of parent .min_w(px(100.)) .max_w(px(400.))
Common Patterns Centered Content div() .flex() .items_center() .justify_center() .size_full() .child("Centered")
Card Layout div() .w(px(300.)) .bg(cx.theme().surface) .rounded(px(8.)) .shadow_md() .p(px(16.)) .gap(px(12.)) .flex() .flex_col() .child(heading()) .child(content())
Responsive Spacing div() .p(px(16.)) // Padding all sides .px(px(20.)) // Padding horizontal .py(px(12.)) // Padding vertical .pt(px(8.)) // Padding top .gap(px(8.)) // Gap between children
Styling Methods Dimensions .w(px(200.)) // Width .h(px(100.)) // Height .size(px(200.)) // Width and height .min_w(px(100.)) // Min width .max_w(px(400.)) // Max width
Colors .bg(rgb(0x2196F3)) // Background .text_color(rgb(0xFFFFFF)) // Text color .border_color(rgb(0x000000)) // Border color
Borders .border(px(1.)) // Border width .rounded(px(8.)) // Border radius .rounded_t(px(8.)) // Top corners .border_color(rgb(0x000000))
Spacing .p(px(16.)) // Padding .m(px(8.)) // Margin .gap(px(8.)) // Gap between flex children
Flexbox .flex() // Enable flexbox .flex_row() // Row direction .flex_col() // Column direction .items_center() // Align items center .justify_between() // Space between items .flex_grow() // Grow to fill space
Theme Integration div() .bg(cx.theme().surface) .text_color(cx.theme().foreground) .border_color(cx.theme().border) .when(is_hovered, |el| { el.bg(cx.theme().hover) })
Conditional Styling div() .when(is_active, |el| { el.bg(cx.theme().primary) }) .when_some(optional_color, |el, color| { el.bg(color) })
Reference Documentation Complete Guide: See reference.md All styling methods Layout strategies Theming, responsive design