Alignment Utility Classes

Makara provides a comprehensive set of alignment utility classes that allow you to control the layout and positioning of widgets without writing custom styles. These classes follow CSS flexbox conventions and work similarly to utility frameworks like Tailwind CSS.

Justify Content Classes

Justify content classes control the alignment of child elements along the main axis (horizontal for rows, vertical for columns).

Align Items Classes

Align items classes control the alignment of child elements along the cross axis (vertical for rows, horizontal for columns).

Align Content Classes

Align content classes control the alignment of wrapped lines when there are multiple rows/columns of content.

Usage Examples

Basic Centering

#![allow(unused)]
fn main() {
// Center content both horizontally and vertically
root_!(
    class: "justify-center align-center";
    [ text_!("Centered content") ]
)
}

Button Layout

#![allow(unused)]
fn main() {
// Distribute buttons evenly across a row
row_!(
    class: "justify-between align-center";
    [
        button_!("Cancel"),
        button_!("Submit")
    ]
)
}

Card Layout

#![allow(unused)]
fn main() {
// Create a vertically centered card with content aligned to start
column_!(
    class: "justify-center align-start p-4";
    [
        text_!("Card Title", font_size: 18.0),
        text_!("Card content goes here..."),
        button_!("Action", class: "mt-3")
    ]
)
}

Navigation Bar

#![allow(unused)]
fn main() {
// Create a navigation bar with logo on left, menu on right
row_!(
    class: "justify-between align-center p-3";
    [
        text_!("Logo", font_size: 20.0),
        row_!(
            class: "justify-end align-center";
            [
                button_!("Home", class: "mr-2"),
                button_!("About", class: "mr-2"),
                button_!("Contact")
            ]
        )
    ]
)
}

Grid-like Layout

#![allow(unused)]
fn main() {
// Create a grid of items with even spacing
column_!(
    class: "justify-start align-stretch";
    [
        row_!(
            class: "justify-around align-center mb-4";
            [
                button_!("Item 1"),
                button_!("Item 2"),
                button_!("Item 3")
            ]
        ),
        row_!(
            class: "justify-around align-center";
            [
                button_!("Item 4"),
                button_!("Item 5"),
                button_!("Item 6")
            ]
        )
    ]
)
}

Combining with Other Classes

Alignment classes work seamlessly with other built-in utility classes:

#![allow(unused)]
fn main() {
// Combine alignment with spacing and color classes
column_!(
    class: "justify-center align-center p-4 m-2";
    background_color: Color::WHITE;
    [
        text_!("Welcome!", class: "mb-3", font_size: 24.0),
        button_!("Get Started", class: "is-primary")
    ]
)
}

Responsive Considerations

While Makara doesn’t have built-in responsive breakpoints like web CSS frameworks, you can dynamically change classes based on window size or other conditions in your Bevy systems:

#![allow(unused)]
fn main() {
fn adjust_layout_system(
    mut commands: Commands,
    windows: Query<&Window>,
    mut widgets: Query<(Entity, &mut Class), With<SomeWidget>>
) {
    if let Ok(window) = windows.get_single() {
        for (entity, mut class) in widgets.iter_mut() {
            if window.width() < 600.0 {
                // Mobile layout
                class.set("justify-center align-center".to_string());
            } else {
                // Desktop layout
                class.set("justify-between align-center".to_string());
            }
        }
    }
}
}

Supported Widgets

Alignment utility classes are supported on container widgets that manage child element layout:

• root_!() - Main application container
• row_!() - Horizontal flex container
• column_!() - Vertical flex container
• scroll_!() - Scrollable container

Other widgets like button_!(), text_!(), image_!(), etc. have fixed internal layouts and don’t support alignment classes since they’re not intended to be containers for user-defined child elements.

Performance Notes

• Alignment classes are processed during widget build and when the class attribute changes
• No runtime overhead once the layout is computed
• Classes are parsed once and cached until the class attribute is modified
• Bevy’s layout system handles the actual positioning efficiently

Migration from Manual Styling

If you were previously setting alignment properties manually:

#![allow(unused)]
fn main() {
// Old way
root_!(
    justify_content: JustifyContent::Center,
    align_items: AlignItems::Center;
    [ /* children */ ]
)

// New way with utility classes
root_!(
    class: "justify-center align-center";
    [ /* children */ ]
)
}

The utility class approach provides the same functionality with more concise syntax and better consistency across your application.