# Layout — stacks, grids, containers, stage, scroll areas Source: https://ui.barua.tz/docs/layout.html Rules and conventions: https://ui.barua.tz/llms.txt ## Container .b-container centers content and clamps its width — the default cap is --b-container-lg (64rem). Size variants swap the cap; --fluid removes it. Wider variants clamp to this page's width here, which is exactly what they'd do on a narrow viewport. - Documentation: https://ui.barua.tz/docs/layout.html#container - Classes: `b-card__body` `b-container` `b-container--fluid` `b-container--md` `b-container--sm` `b-container--xl` ```html

--sm · 40rem

--md · 48rem

default · 64rem

--xl · 80rem

--fluid · no cap

``` ```tsx import { CardBody, Container } from "barua-ui"; --sm · 40rem --md · 48rem default · 64rem --xl · 80rem --fluid · no cap ``` ## Stack (VStack) .b-stack (alias .b-vstack ) is a vertical flex column with a token gap — the default building block for any view. Tune spacing with the gap scale — .b-gap-0 , .b-gap-1 , .b-gap-2 , .b-gap-3 , .b-gap-4 , .b-gap-6 , .b-gap-8 — instead of margins on children. - Documentation: https://ui.barua.tz/docs/layout.html#stack - Classes: `b-card__body` `b-gap-2` `b-grid` `b-grid--3` `b-stack` `b-stack--center` `b-stack--end` `b-stack--start` ```html

``` ```tsx import { CardBody } from "barua-ui";

1 2 3

``` ## HStack .b-hstack lays children out in a row, vertically centered. The alignment modifiers are shared with Stack — add .b-stack--between to spread children across the row. - Documentation: https://ui.barua.tz/docs/layout.html#hstack - Classes: `b-badge` `b-badge--accent` `b-btn` `b-btn--sm` `b-btn--tinted` `b-card__body` `b-gap-2` `b-headline` `b-hstack` `b-spacer` `b-stack--between` ```html

``` ```tsx import { CardBody } from "barua-ui";

1 2 3

``` ## Grid .b-grid is a 12-column grid by default: set --b-cols (or a .b-grid--2/3/4/6 preset) and place children with .b-col-span-* classes. - Documentation: https://ui.barua.tz/docs/layout.html#grid - Classes: `b-card__body` `b-col-span-4` `b-col-span-6` `b-col-span-full` `b-grid` `b-grid--auto` ```html

span 4

span 6

span full

``` ```tsx import { CardBody, Grid } from "barua-ui"; span 4 span 4 span 4 span 6 span 6 span full ``` ## Flex A thin display: flex shorthand for when a stack is too opinionated. --center and --between handle both axes; .b-grow and .b-shrink-0 tune individual children. - Documentation: https://ui.barua.tz/docs/layout.html#flex - Classes: `b-card__body` `b-flex` `b-flex--between` `b-grow` `b-shrink-0` ```html

--between

fixed

b-grow

fixed

``` ```tsx import { CardBody, Grow } from "barua-ui";

--between --between --between

fixed b-grow fixed

``` ## Split View Master–detail in one line of markup: .b-split stretches .b-panel children to equal height with a .b-resize-handle between them. Make the sidebar .b-resizable and dragging is native CSS resize — no JavaScript. - Documentation: https://ui.barua.tz/docs/layout.html#split-view - Classes: `b-card__body` `b-grow` `b-panel` `b-resizable` `b-resize-handle` `b-split` ```html

Sidebar

Detail

``` ```tsx import { CardBody, Grow, Resizable, ResizeHandle, Split } from "barua-ui"; Sidebar Detail ``` ## Resizable Panel .b-resizable adds the browser's native resize grip to any panel — horizontal by default, --vertical for height. Look for the grip in the bottom-trailing corner; min and max bounds are built in. - Documentation: https://ui.barua.tz/docs/layout.html#resizable-panel - Classes: `b-card__body` `b-panel` `b-resizable` `b-resizable--vertical` ```html

Drag my corner →

Drag me taller ↓

``` ```tsx import { CardBody, Resizable } from "barua-ui"; Drag my corner → Drag me taller ↓ ``` ## Panel .b-panel is the plain workhorse surface: surface background, hairline border, large radius. --plain strips the chrome for panels that only exist to scroll or resize. - Documentation: https://ui.barua.tz/docs/layout.html#panel - Classes: `b-card__body` `b-grid` `b-grid--2` `b-panel` `b-panel--plain` ```html

b-panel

b-panel--plain

``` ```tsx import { CardBody, Grid } from "barua-ui";

b-panel

b-panel--plain

``` ## Section .b-section adds generous block padding between page regions — the vertical rhythm of a landing or settings page. --tight is the compact cut. Dividers shown here only to make the padding visible. - Documentation: https://ui.barua.tz/docs/layout.html#section - Classes: `b-card__body` `b-divider` `b-section` `b-section--tight` ```html

b-section--tight

b-section

``` ```tsx import { CardBody, Divider, Section } from "barua-ui";

b-section--tight

b-section

``` ## Card Grid A responsive shelf of cards: auto-fill columns at least 17rem wide, token gap, no breakpoints. The default answer for dashboards and galleries. - Documentation: https://ui.barua.tz/docs/layout.html#card-grid - Classes: `b-card` `b-card-grid` `b-card__body` `b-card__subtitle` `b-card__title` ```html

Reports

Weekly digest

Automations

4 running

Contacts

1,208 people

Billing

Paid until March

``` ```tsx import { Card, CardBody, CardGrid, CardSubtitle, CardTitle } from "barua-ui"; Reports Weekly digest Automations 4 running Contacts 1,208 people Billing Paid until March ``` ## Masonry CSS-columns masonry for content of uneven height — pins, notes, image cards. Items flow down each column in source order; cap the column count with --b-masonry-cols . - Documentation: https://ui.barua.tz/docs/layout.html#masonry - Classes: `b-card` `b-card__body` `b-masonry` ```html

``` ```tsx import { Card, CardBody } from "barua-ui";

1 2 3 4 5 6

``` ## Scroll Area Give it a height and .b-scroll-area contains the scrolling: overscroll never leaks to the page and the scrollbar gutter stays stable. --fade masks both edges so clipped content looks intentional. - Documentation: https://ui.barua.tz/docs/layout.html#scroll-area - Classes: `b-card__body` `b-gap-2` `b-grid` `b-grid--2` `b-scroll-area` `b-scroll-area--fade` `b-stack` ```html

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 1 Row 2 Row 3 Row 4 Row 5 Row 6

``` ## Spacer Straight from SwiftUI: .b-spacer is an empty flex-1 element that absorbs leftover space. Push row siblings apart, or pin a footer to the bottom of a fixed-height stack. - Documentation: https://ui.barua.tz/docs/layout.html#spacer - Classes: `b-card__body` `b-hstack` `b-spacer` `b-stack` ```html

Leading

Trailing

Content

Pinned footer

``` ```tsx import { CardBody, Spacer } from "barua-ui";

Leading Trailing

Content Pinned footer

``` ## Divider Hairline separators drawn with --b-separator . Horizontal by default; use them sparingly — a stack gap is often separation enough. - Documentation: https://ui.barua.tz/docs/layout.html#divider - Classes: `b-avatar` `b-avatar--sm` `b-body` `b-btn` `b-btn--primary` `b-divider` `b-divider--inset` `b-divider--label` `b-divider--vertical` `b-gap-3` `b-hstack` `b-link` `b-link--danger` `b-list` `b-list-item` `b-list-item__content` `b-list-item__subtitle` `b-list-item__title` `b-stack` ```html

Above the fold

Below the fold

``` ```tsx import { Divider } from "barua-ui";

Above the fold

Below the fold

``` ## Responsive Barua is mobile-first and the components own their own shrinking — pages should not need bespoke media queries. .b-dashboard spans collapse to full width below md (768px) and the column grid engages above it. Floating surfaces clamp themselves to the viewport: toasts, notifications, menus and the command palette cap their width, and the dock tray scrolls when crowded. The breakpoint scale lives in Foundations ; when a component should respond to its box rather than the viewport, use container queries below. - Documentation: https://ui.barua.tz/docs/layout.html#responsive - Classes: `b-badge` `b-badge--accent` `b-btn` `b-btn--glass` `b-btn--primary` `b-btn--sm` `b-gap-2` `b-hide-desktop` `b-hide-mobile` `b-hstack` `b-spacer` `b-stack--wrap` ```html

Inbox Sent Archive

``` ```tsx import { Badge, Button, Spacer } from "barua-ui";

Inbox Sent Archive

``` ## Stage .b-stage turns a page into a fixed screen: full viewport height, no scrolling — the layout for ambient walls, kiosks and TV-style surfaces where everything must be visible at once. Its .b-container child stretches, a .b-dashboard inside shares the remaining height between rows, and cards clip internally instead of growing the page. Below md it steps aside and the page scrolls like any phone screen. The ambient example is built on it. - Documentation: https://ui.barua.tz/docs/layout.html#stage - Classes: `b-card` `b-card--compact` `b-card__body` `b-card__header` `b-card__title` `b-container` `b-dashboard` `b-gap-3` `b-span-6` `b-stack` `b-stage` ```html

Rows share the stage height.

Overflowing content clips inside the card — the page never scrolls.

``` ```tsx import { Card, CardBody, CardHeader, CardTitle, Container, Dashboard, Stage } from "barua-ui"; Fits Rows share the stage height. Clips Overflowing content clips inside the card — the page never scrolls. ``` ## Container Queries SwiftUI's ViewThatFits , the CSS way: mark a wrapper .b-cq and children respond to the container's width — .b-cq-show-sm/md/lg appear at ≥24/40/56rem, .b-cq-hide-* retire. The same component adapts in a sidebar and in a full-width main without media queries. - Documentation: https://ui.barua.tz/docs/layout.html#container-queries - Classes: `b-card` `b-card__body` `b-cq` `b-cq-hide-sm` `b-cq-show-sm` `b-footnote` `b-text-secondary` ```html

Narrow container → compact Wide container content

Narrow container → compact Wide container content — this card is past the 24rem detent, so the fuller layout renders.

``` ```tsx import { Card, CardBody, Footnote } from "barua-ui"; Narrow container → compact Wide container content Narrow container → compact Wide container content — this card is past the 24rem detent, so the fuller layout renders. ``` ## Text that fits SwiftUI has minimumScaleFactor ; CSS has no direct equivalent, but a container query unit does the same job honestly. .b-fit-text sizes its child as a fraction of the container's width, clamped so it can never become unreadable at one end or absurd at the other. - Documentation: https://ui.barua.tz/docs/layout.html#fit-text - Classes: `b-fit-text` `b-gap-3` `b-stack` `b-stat__value` ```html

TZS 4,208,500

``` ```tsx import { FitText } from "barua-ui";

TZS 4,208,500

```