Layout

webwrench provides layout primitives that map to bitwrench’s container system. All layout components are context managers.

Columns

Create a multi-column layout. Pass an integer for equal columns or a list for weighted columns:

import webwrench as ww

cols = ww.columns(2)  # Two equal columns

with cols[0]:
    ww.text("Left column")

with cols[1]:
    ww.text("Right column")

ww.serve()

# Weighted columns: 2/3 + 1/3
cols = ww.columns([2, 1])

with cols[0]:
    ww.chart([10, 20, 30], type="bar", labels=["A", "B", "C"])

with cols[1]:
    ww.metric("Total", "60")

Tabs

tab_set = ww.tabs(["Overview", "Details", "Settings"])

with tab_set[0]:
    ww.text("Overview content")

with tab_set[1]:
    ww.text("Details content")

with tab_set[2]:
    ww.text("Settings content")

Accordion

with ww.accordion("Click to expand", open=False):
    ww.text("Hidden content revealed on click")

Cards

with ww.card("User Info"):
    ww.text("Name: Alice")
    ww.text("Role: Admin")

Grid

CSS Grid layout with a template string:

with ww.grid("1fr 1fr 1fr"):
    ww.metric("Users", "1,234")
    ww.metric("Revenue", "$56K")
    ww.metric("Growth", "+12%")

Sidebar

with ww.sidebar():
    ww.text("Sidebar content")
    ww.button("Action")

ww.title("Main Content")
ww.text("This is the main area.")

Modal

with ww.modal("Confirm Action"):
    ww.text("Are you sure you want to proceed?")
    ww.button("Yes")

Navigation

ww.nav([
    {"href": "/", "text": "Home"},
    {"href": "/about", "text": "About"},
    {"href": "/contact", "text": "Contact"},
])

Nesting

Layout containers can be nested:

cols = ww.columns(2)
with cols[0]:
    with ww.card("Card A"):
        ww.text("Content A")
with cols[1]:
    with ww.card("Card B"):
        ww.text("Content B")