From 5a176ff42798dba2435d26e7cfa43a12e6397445 Mon Sep 17 00:00:00 2001 From: Kinneyzhang Date: Wed, 26 Aug 2026 16:26:03 +0800 Subject: [PATCH] refactor: use canonical Box tags in Ebox examples --- examples/comprehensive.ebox | 8 +- examples/flex-reference.ebox | 246 +++++++++++------------ examples/grid-reference.ebox | 300 ++++++++++++++-------------- examples/public-layout-gallery.ebox | 16 +- examples/responsive-reference.ebox | 14 +- tests/ebox-playground-tests.el | 21 +- 6 files changed, 304 insertions(+), 301 deletions(-) diff --git a/examples/comprehensive.ebox b/examples/comprehensive.ebox index 18ea608..6f56818 100644 --- a/examples/comprehensive.ebox +++ b/examples/comprehensive.ebox @@ -1,17 +1,17 @@ -(column +(box :layout 'column (box :content "Ebox comprehensive DSL showcase\nThe outer sections omit :width so Playground viewport sizing drives the layout." :padding '(1 (16)) :border "#334155" :bgcolor "#F8FAFC" :color "#0F172A" :text-align 'center) - (spacer :width '(viewport) :height 1 :bgcolor "#F8FAFC") + (box :width '(viewport) :height 1 :bgcolor "#F8FAFC") (box :content "Width rule in this file\nContainer sections use auto width. Fixed widths remain only where the example demonstrates exact item sizing, basis, min-width, or max-width." :padding '(0 (14)) :border "#64748B" :bgcolor "#F8FAFC" :color "#111827" :wrap-mode 'word) - (spacer :width '(viewport) :height 1 :bgcolor "#F8FAFC") + (box :width '(viewport) :height 1 :bgcolor "#F8FAFC") - (flex + (box :layout 'flex :margin '(1 0 0 1) :padding '(1 (8)) :border "#475569" :bgcolor "#F8FAFC" :flex-flow '(row wrap) diff --git a/examples/flex-reference.ebox b/examples/flex-reference.ebox index 8425219..aa9dba6 100644 --- a/examples/flex-reference.ebox +++ b/examples/flex-reference.ebox @@ -1,366 +1,366 @@ -(column +(box :layout 'column :height '(viewport-height) :width '(viewport) :overflow 'scroll :bgcolor "#FAF7F0" (box :content "Ebox CSS Flex Reference\nA modern, self-explaining DSL gallery for CSS flex container and item properties." :padding '(1 (24)) :border "#2F3437" :bgcolor "#FAF7F0" :color "#1F2328" :text-align 'center) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :flex-direction\nMain axis selection. Reverse values swap main-start and main-end while keeping source order intact." :padding '(0 (18)) :border "#D97757" :bgcolor "#FFF5ED" :color "#3D2B1F") - (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) + (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) :border "#D97757" :border-top-p nil :bgcolor "#FFF8F2" - (column + (box :layout 'column (box :content "row" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757" + (box :layout 'flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757" :border-top-p nil :bgcolor "#FFF8F2" :flex-direction 'row :column-gap '(10) :align-items 'center (item (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(42) :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "row-reverse" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757" + (box :layout 'flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757" :border-top-p nil :bgcolor "#FFF8F2" :flex-direction 'row-reverse :column-gap '(10) :align-items 'center (item (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(42) :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "column" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757" + (box :layout 'flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757" :border-top-p nil :bgcolor "#FFF8F2" :flex-direction 'column :row-gap 1 :align-items 'stretch (item (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center)) (item (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center)) (item (box :content "C" :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "column-reverse" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757" + (box :layout 'flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757" :border-top-p nil :bgcolor "#FFF8F2" :flex-direction 'column-reverse :row-gap 1 :align-items 'stretch (item (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center)) (item (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center)) (item (box :content "C" :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center))))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :flex-wrap\nLine creation. nowrap keeps one flex line; wrap creates new lines; wrap-reverse stacks lines from the opposite cross side." :padding '(0 (18)) :border "#5E7F6A" :bgcolor "#F3FAF4" :color "#24352A") - (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) + (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) :border "#5E7F6A" :border-top-p nil :bgcolor "#F8FCF8" - (column + (box :layout 'column (box :content "nowrap" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" + (box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" :border-top-p nil :bgcolor "#F8FCF8" :flex-wrap 'nowrap :column-gap '(8) :align-items 'center (item :flex-shrink 1 (box :content "A" :width '(92) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center)) (item :flex-shrink 1 (box :content "B" :width '(92) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center)) (item :flex-shrink 1 (box :content "C" :width '(92) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "wrap" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" + (box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" :border-top-p nil :bgcolor "#F8FCF8" :flex-wrap 'wrap :column-gap '(8) :row-gap 1 (item :flex-shrink 0 (box :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center)) (item :flex-shrink 0 (box :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center)) (item :flex-shrink 0 (box :content "C 118" :width '(118) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "wrap-reverse" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" + (box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" :border-top-p nil :bgcolor "#F8FCF8" :flex-wrap 'wrap-reverse :column-gap '(8) :row-gap 1 (item :flex-shrink 0 (box :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center)) (item :flex-shrink 0 (box :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center)) (item :flex-shrink 0 (box :content "C 118" :width '(118) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center))))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :flex-flow\nShorthand for direction and wrapping. These examples use one property to set both behaviors." :padding '(0 (18)) :border "#6F6A95" :bgcolor "#F7F4FC" :color "#2F2B45") - (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) + (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) :border "#6F6A95" :border-top-p nil :bgcolor "#FBF9FF" - (column + (box :layout 'column (box :content ":flex-flow (row wrap)" :max-width '(440) :padding '(0 (10)) :border "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95" + (box :layout 'flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95" :border-top-p nil :bgcolor "#FBF9FF" :flex-flow '(row wrap) :gap '(1 (12)) (item (box :content "A" :width '(170) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(170) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center)) (item (box :content "C wraps" :width '(170) :height 1 :bgcolor "#AFA3D1" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content ":flex-flow (column wrap)" :max-width '(440) :padding '(0 (10)) :border "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95" + (box :layout 'flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95" :border-top-p nil :bgcolor "#FBF9FF" :flex-flow '(column wrap) :gap '(1 (12)) (item (box :content "A" :width '(140) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(140) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center)) (item (box :content "C new column" :width '(140) :height 1 :bgcolor "#AFA3D1" :color "#1F2328" :text-align 'center))))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :justify-content\nMain-axis packing after sizing. Distributed values change the space before, between, and after items." :padding '(0 (18)) :border "#3F6D88" :bgcolor "#F1F8FB" :color "#20313A") - (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) + (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" - (column + (box :layout 'column (box :content "flex-start" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-start + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-start (item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "center" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'center + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'center (item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "flex-end" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-end + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-end (item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "space-between" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-between + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-between (item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "space-around" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-around + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-around (item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "space-evenly" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-evenly + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-evenly (item (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "start" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'start + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'start (item (box :content "start" :width '(70) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "end" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'end + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'end (item (box :content "end" :width '(70) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "left" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'left + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'left (item (box :content "left" :width '(70) :height 1 :bgcolor "#7DB8CE" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "right" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'right + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'right (item (box :content "right" :width '(70) :height 1 :bgcolor "#5F9CB5" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "normal" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'normal + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'normal (item (box :content "normal" :width '(70) :height 1 :bgcolor "#3F6D88" :color "#FFFFFF" :text-align 'center))))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :align-items\nCross-axis alignment inside each flex line. Stretch/normal enlarge auto-sized items; start/end/center move shorter ones." :padding '(0 (18)) :border "#9A6B43" :bgcolor "#FFF7EE" :color "#3A2A1D") - (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) + (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" - (column + (box :layout 'column (box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-start + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-start (item (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center)) (item (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "center" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'center + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'center (item (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center)) (item (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-end + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-end (item (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center)) (item (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "stretch" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'stretch + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'stretch (item (box :content "auto height stretches" :width '(72) :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center)) (item (box :content "line height" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "baseline" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'baseline + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'baseline (item (box :content "baseline" :width '(90) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'start + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'start (item (box :content "start" :width '(62) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'end + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'end (item (box :content "end" :width '(62) :height 1 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "self-start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-start + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-start (item (box :content "self-start" :width '(78) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "self-end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-end + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-end (item (box :content "self-end" :width '(70) :height 1 :bgcolor "#9A6B43" :color "#FFFFFF" :text-align 'center)))) - (column + (box :layout 'column (box :content "normal" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'normal + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'normal (item (box :content "normal" :width '(62) :bgcolor "#7A5132" :color "#FFFFFF" :text-align 'center)))) - (column + (box :layout 'column (box :content "stretch note" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (box :content "normal behaves stretch-like for auto cross size in this DSL." :width '(146) :height 4 :padding '(0 (8)) :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :color "#3A2A1D"))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :align-content\nCross-axis packing between multiple flex lines. It has no visible effect on a nowrap single-line container." :padding '(0 (18)) :border "#7C6A2F" :bgcolor "#FBF8E8" :color "#362F16") - (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) + (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" - (column + (box :layout 'column (box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'flex-start :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "center" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'center :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'flex-end :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "space-between" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'space-between :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "space-around" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'space-around :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "space-evenly" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'space-evenly :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "stretch" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'stretch :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'start :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'end :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "baseline" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'baseline :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "normal" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'normal :row-gap 1 :column-gap '(8) (item (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "nowrap note" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" :flex-wrap 'nowrap :align-content 'normal :row-gap 1 :column-gap '(8) (item (box :content "single line" :width '(96) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center))))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container properties: :gap, :row-gap, :column-gap\n:gaps define spacing between flex items and flex lines. Explicit row/column values override matching sides." :padding '(0 (18)) :border "#3D7068" :bgcolor "#F1FAF8" :color "#1D3935") - (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) + (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" - (column + (box :layout 'column (box :content ":gap (1 (14))" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(293) + (box :layout 'flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" :flex-wrap 'wrap :gap '(1 (14)) (item (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content ":row-gap 2" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" + (box :layout 'flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" :flex-wrap 'wrap :row-gap 2 :column-gap '(8) (item (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content ":column-gap (32)" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" + (box :layout 'flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" :flex-wrap 'wrap :row-gap 1 :column-gap '(32) (item (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center)) (item (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center)) (item (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center))))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Item property: :order\nVisual ordering sorts by :order, then source order. The labels expose both values." :padding '(0 (18)) :border "#8E4A63" :bgcolor "#FFF4F7" :color "#3A1F2A") - (flex :height 5 :padding '(0 (12)) :border "#8E4A63" + (box :layout 'flex :height 5 :padding '(0 (12)) :border "#8E4A63" :border-top-p nil :bgcolor "#FFF8FA" :column-gap '(12) :align-items 'center (item :order 3 (box :content "source 1\n:order 3" :width '(150) :height 2 :bgcolor "#F2C4D2" :color "#1F2328" :text-align 'center)) @@ -368,46 +368,46 @@ (item :order 2 (box :content "source 3\n:order 2" :width '(150) :height 2 :bgcolor "#C87F9A" :color "#1F2328" :text-align 'center)) (item :order 1 (box :content "source 4\nsame order" :width '(150) :height 2 :bgcolor "#A95F7C" :color "#FFFFFF" :text-align 'center))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Item sizing: :flex-grow, :flex-shrink, :flex-basis, and child :width\nFlex starts from basis or width/content, then distributes positive or negative space." :padding '(0 (18)) :border "#2F5F7C" :bgcolor "#F1F8FC" :color "#1C303D") - (column + (box :layout 'column (box :content "Grow factors: same basis, different growth weights." :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#FFFDF8" :color "#3D3A35") - (flex :padding '(0 (12)) :border "#2F5F7C" + (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#F8FCFE" :column-gap '(10) (item :flex-grow 1 :flex-basis '(120) (box :content "grow 1\nbasis 120" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center)) (item :flex-grow 2 :flex-basis '(120) (box :content "grow 2\nbasis 120" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center)) (item :flex-grow 3 :flex-basis '(120) (box :content "grow 3\nbasis 120" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "Shrink factors: overflowing bases lose space by weighted shrink." :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#FFFDF8" :color "#3D3A35") - (flex :padding '(0 (12)) :border "#2F5F7C" + (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#F8FCFE" :column-gap '(10) (item :flex-shrink 1 :flex-basis '(320) (box :content "shrink 1\nbasis 320" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center)) (item :flex-shrink 3 :flex-basis '(320) (box :content "shrink 3\nbasis 320" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center)) (item :flex-shrink 5 :flex-basis '(320) (box :content "shrink 5\nbasis 320" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "Basis versus width: explicit basis overrides width; auto basis uses width/content." :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#FFFDF8" :color "#3D3A35") - (flex :padding '(0 (12)) :border "#2F5F7C" + (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#F8FCFE" :column-gap '(10) (item :flex-basis '(120) (box :content "basis 120\nwidth 240" :width '(240) :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center)) (item :flex-basis 'auto (box :content "basis auto\nwidth 240" :width '(240) :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center)) (item :flex '(1 1 (160)) (box :content "flex tuple\nbasis 160" :width '(240) :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center)))) - (column + (box :layout 'column (box :content "Intrinsic basis keywords: content, min-content, and max-content derive size from text." :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#FFFDF8" :color "#3D3A35") - (flex :padding '(0 (12)) :border "#2F5F7C" + (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil :bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1 :column-gap '(10) (item :flex-shrink 0 :flex-basis 'content @@ -417,12 +417,12 @@ (item :flex-shrink 0 :flex-basis 'max-content (box :content "max-content\nkeeps phrase width" :width '(180) :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Item property: :flex shorthand\nSupported forms: number, none, auto, initial, and (grow shrink basis). Longhands can override shorthand parts." :padding '(0 (18)) :border "#52612F" :bgcolor "#F8FAEF" :color "#293116") - (flex :height 7 :padding '(0 (12)) :border "#52612F" + (box :layout 'flex :height 7 :padding '(0 (12)) :border "#52612F" :border-top-p nil :bgcolor "#FCFDF6" :flex-wrap 'wrap :row-gap 1 :column-gap '(8) :align-items 'center (item :flex 1 (box :content ":flex 1\n= 1 1 0" :bgcolor "#DDE8B2" :color "#1F2328" :text-align 'center)) @@ -432,12 +432,12 @@ (item :flex '(2 1 (120)) :flex-basis '(160) (box :content ":flex (2 1 120)\nthen basis 160" :bgcolor "#66762D" :color "#FFFFFF" :text-align 'center))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Item property: :align-self\nPer-item cross-axis override. auto inherits :align-items; other values replace the container setting." :padding '(0 (18)) :border "#7B4D38" :bgcolor "#FFF6F0" :color "#392319") - (flex :height 7 :padding '(0 (12)) :border "#7B4D38" + (box :layout 'flex :height 7 :padding '(0 (12)) :border "#7B4D38" :border-top-p nil :bgcolor "#FFFAF7" :align-items 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap '(10) @@ -447,7 +447,7 @@ (item :align-self 'flex-end (box :content "flex-end" :width '(118) :height 2 :bgcolor "#9D6048" :color "#FFFFFF" :text-align 'center)) (item :align-self 'stretch (box :content "stretch\nauto cross" :width '(118) :bgcolor "#7B4D38" :color "#FFFFFF" :text-align 'center)) (item :align-self 'normal (box :content "normal\nstretch-like" :width '(118) :bgcolor "#5D3929" :color "#FFFFFF" :text-align 'center))) - (flex :height 6 :padding '(0 (12)) :border "#7B4D38" + (box :layout 'flex :height 6 :padding '(0 (12)) :border "#7B4D38" :border-top-p nil :bgcolor "#FFFAF7" :align-items 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap '(10) @@ -457,7 +457,7 @@ (item :align-self 'self-end (box :content "self-end" :width '(118) :height 2 :bgcolor "#9D6048" :color "#FFFFFF" :text-align 'center)) (item :align-self 'baseline (box :content "baseline" :width '(118) :height 2 :bgcolor "#7B4D38" :color "#FFFFFF" :text-align 'center))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Summary\nUse direction and wrap to create lines, basis/width to choose starting sizes, grow/shrink to distribute space, then justify/align properties to pack items and lines." :padding '(1 (24)) :border "#2F3437" diff --git a/examples/grid-reference.ebox b/examples/grid-reference.ebox index a30fa07..b57c876 100644 --- a/examples/grid-reference.ebox +++ b/examples/grid-reference.ebox @@ -1,4 +1,4 @@ -(column +(box :layout 'column :height '(viewport-height) :width '(viewport) (box :content "Ebox CSS Grid Reference\nA complete, self-explaining gallery of the public Ebox Grid properties and value forms." @@ -6,60 +6,60 @@ :color "#20252B" :bgcolor "#FFFDF8" :face 'bold :text-align 'center) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :grid-template-columns\nTrack sizing accepts fixed sizes, auto, fractional tracks, minmax, and repeat." :padding '(0 (18)) :border "#B85C3C" :bgcolor "#F1D4C9" :color "#4C271D" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#B85C3C" :border-top-p nil :bgcolor "#FFF9F4" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "fixed\n:((120) (74))" :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center) - (grid :width '(206) :height 3 :padding '(0 (2)) + (box :layout 'grid :width '(206) :height 3 :padding '(0 (2)) :grid-template-columns '((120) (74)) :grid-template-rows '(2) :gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2" (box :content "120 PX" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center) (box :content "74 PX" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto\nauto tracks use intrinsic content" :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center) - (grid :width '(206) :height 3 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 3 :padding '(0 (6)) :grid-template-columns '(auto auto) :grid-template-rows '(2) :gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2" (box :content "intrinsic" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center) (box :content "content" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "fractional symbols\n1fr distributes by weight" :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center) - (grid :width '(206) :height 3 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 3 :padding '(0 (6)) :grid-template-columns '(1fr 2fr) :grid-template-rows '(2) :gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2" (box :content "1FR" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center) (box :content "2FR" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "fractional forms\n(fr FACTOR) is equivalent to NFR" :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center) - (grid :width '(206) :height 3 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 3 :padding '(0 (6)) :grid-template-columns '((fr 1) (fr 2)) :grid-template-rows '(2) :gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2" (box :content "(fr 1)" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center) (box :content "(fr 2)" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "minmax\nminimum protects a readable track" :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center) - (grid :width '(206) :height 3 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 3 :padding '(0 (6)) :grid-template-columns '((minmax (74) (120)) (74)) :grid-template-rows '(2) :gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2" (box :content "74 → 120" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center) (box :content "fixed" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "repeat\nrepeat 2 visibly expands the template" :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center) - (grid :width '(206) :height 3 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 3 :padding '(0 (6)) :grid-template-columns '((repeat 2 (62)) (fr 1)) :grid-template-rows '(2) :gap '(0 (6)) :border "#B85C3C" :bgcolor "#FFF8F2" @@ -67,60 +67,60 @@ (box :content "REPEAT B" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center) (box :content "FR" :bgcolor "#BF7F63" :color "#FFFFFF" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :grid-template-rows\nThe same track grammar works on the block axis; fixed lines, auto sizing, fractions, minmax, and repeat are shown independently." :padding '(0 (18)) :border "#537A63" :bgcolor "#DCEBDD" :color "#26402F" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#537A63" :border-top-p nil :bgcolor "#F7FBF7" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "fixed rows\n(1 2)" :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (grid :width '(206) :height 5 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 5 :padding '(0 (6)) :grid-template-columns '((192)) :grid-template-rows '(1 2) :gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8" (box :content "ROW 1" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center) (box :content "ROW 2" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto rows\nintrinsic line heights" :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (grid :width '(206) :height 5 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 5 :padding '(0 (6)) :grid-template-columns '((192)) :grid-template-rows '(auto auto) :gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8" (box :content "short" :height 1 :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center) (box :content "tall\ncontent" :height 2 :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "fractional rows\n1fr / 2fr" :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (grid :width '(206) :height 6 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 6 :padding '(0 (6)) :grid-template-columns '((192)) :grid-template-rows '(1fr 2fr) :gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8" (box :content "1FR" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center) (box :content "2FR" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "fractional row forms\n(fr 1) / (fr 2)" :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (grid :width '(206) :height 6 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 6 :padding '(0 (6)) :grid-template-columns '((192)) :grid-template-rows '((fr 1) (fr 2)) :gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8" (box :content "(fr 1)" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center) (box :content "(fr 2)" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "minmax rows\n(min 1 / max 3)" :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (grid :width '(206) :height 6 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 6 :padding '(0 (6)) :grid-template-columns '((192)) :grid-template-rows '((minmax (1) (3)) 1) :gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8" (box :content "MINMAX" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center) (box :content "FIXED" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "repeat rows\nrepeat 3 expands lines" :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (grid :width '(206) :height 6 :padding '(0 (6)) + (box :layout 'grid :width '(206) :height 6 :padding '(0 (6)) :grid-template-columns '((192)) :grid-template-rows '((repeat 3 (1))) :gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8" @@ -128,49 +128,49 @@ (box :content "ROW B" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center) (box :content "ROW C" :bgcolor "#7EA887" :color "#FFFFFF" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container properties: :grid-auto-columns and :grid-auto-rows\nImplicit tracks use the same fixed, auto, fractional, and minmax track forms. Ebox resolves one normalized implicit track at a time." :padding '(0 (18)) :border "#416E8A" :bgcolor "#D9EAF2" :color "#203A4A" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#416E8A" :border-top-p nil :bgcolor "#F6FBFD" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-columns · fixed\n:grid-auto-columns ((64))" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((64)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64)) :grid-template-rows '(1 1) :grid-auto-columns '((64)) :grid-auto-flow 'column :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) (box :content "C" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-columns · auto\nintrinsic implicit width" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((64)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64)) :grid-template-rows '(1 1) :grid-auto-columns 'auto :grid-auto-flow 'column :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "LONG C" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center) (box :content "C" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-columns · 1fr\nimplicit remainder" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((64)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64)) :grid-template-rows '(1 1) :grid-auto-columns '1fr :grid-auto-flow 'column :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "1FR" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center) (box :content "C" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-columns · minmax\nminimum implicit width" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((64)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((64)) :grid-template-rows '(1 1) :grid-auto-columns '((minmax (64) (120))) :grid-auto-flow 'column :gap '(0 (6)) @@ -178,37 +178,37 @@ (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "MINMAX" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center) (box :content "C" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-rows · fixed\n:grid-auto-rows 2" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94)) :grid-template-rows '(1) :grid-auto-rows 2 :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) (box :content "AUTO ROW" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-rows · auto\nintrinsic implicit height" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94)) :grid-template-rows '(1) :grid-auto-rows 'auto :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) (box :content "TALL\nAUTO ROW" :height 2 :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-rows · 1fr\nimplicit remainder" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 6 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 6 :grid-template-columns '((94) (94)) :grid-template-rows '(1) :grid-auto-rows '1fr :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) (box :content "1FR ROW" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "auto-rows · minmax\nbounded implicit height" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 6 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 6 :grid-template-columns '((94) (94)) :grid-template-rows '(1) :grid-auto-rows '((minmax (1) (3))) :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" @@ -216,29 +216,29 @@ (box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) (box :content "MINMAX ROW" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :grid-auto-flow\nAutomatic placement is row-major or column-major. Ebox intentionally supports row and column, not the browser dense variants." :padding '(0 (18)) :border "#416E8A" :bgcolor "#D9EAF2" :color "#203A4A" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#416E8A" :border-top-p nil :bgcolor "#F6FBFD" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "row\nfills each row before creating the next" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94)) :grid-template-rows '(1 1) :grid-auto-flow 'row :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :content "1A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) (box :content "1B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) (box :content "2A" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center) (box :content "2B" :bgcolor "#8DBDCE" :color "#203A4A" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "column\nfills each column before creating the next" :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((94)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94)) :grid-template-rows '(1 1) :grid-auto-columns '((94)) :grid-auto-flow 'column :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" @@ -247,64 +247,64 @@ (box :content "C2/R1" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center) (box :content "C2/R2" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container properties: :gap, :row-gap, :column-gap\nThe shorthand accepts one shared value or a row/column pair. Longhands override the matching side; grid-row-gap and grid-column-gap remain public aliases." :padding '(0 (18)) :border "#3D7068" :bgcolor "#CDEBE5" :color "#1D3935" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "gap scalar\n:gap 1" :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94)) :grid-template-rows '(1 1) :gap 1 :border "#3D7068" :bgcolor "#F7FCFB" (box :content "A" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center) (box :content "B" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) (box :content "C" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "gap pair\n:gap (1 (14))" :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94)) :grid-template-rows '(1 1) :gap '(1 (14)) :border "#3D7068" :bgcolor "#F7FCFB" (box :content "ROW GAP" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center) (box :content "COLUMN GAP" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) (box :content "PAIR" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "row-gap\n:row-gap 2" :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((94) (94)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((94) (94)) :grid-template-rows '(1 1) :row-gap 2 :column-gap '(8) :border "#3D7068" :bgcolor "#F7FCFB" (box :content "A" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center) (box :content "B" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) (box :content "ROW 2" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "column-gap\n:column-gap (28)" :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((88) (88)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((88) (88)) :grid-template-rows '(1 1) :row-gap 1 :column-gap '(28) :border "#3D7068" :bgcolor "#F7FCFB" (box :content "LEFT" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center) (box :content "RIGHT" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) (box :content "LONG GAP" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "aliases\n:grid-row-gap / :grid-column-gap" :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((88) (88)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((88) (88)) :grid-template-rows '(1 1) :grid-row-gap 2 :grid-column-gap '(28) :border "#3D7068" :bgcolor "#F7FCFB" (box :content "ROW ALIAS" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center) (box :content "COLUMN ALIAS" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) (box :content "OVERRIDE" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "override\nexplicit sides win over :gap" :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((88) (88)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((88) (88)) :grid-template-rows '(1 1) :gap '(1 (8)) :row-gap 2 :column-gap '(28) :border "#3D7068" :bgcolor "#F7FCFB" @@ -312,361 +312,361 @@ (box :content "OVERRIDDEN" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) (box :content "SIDES" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Item properties: :grid-column, :grid-row, :grid-column-span, :grid-row-span\nPlacement is one-based. A property accepts a start number, (start :span count), or (start end); span longhands work with automatic placement too." :padding '(0 (18)) :border "#6A5C8B" :bgcolor "#E7E2F1" :color "#332B4B" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#6A5C8B" :border-top-p nil :bgcolor "#FBF9FF" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "automatic placement\nno item coordinates" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (box :content "A" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center) (box :content "B" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "C" :bgcolor "#AFA3D1" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-column 2\none column start" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-column 2 (box :content "C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-row 2\none row start" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-row 2 (box :content "R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-column (1 :span 2)\nspan in the column value" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-column '(1 :span 2) (box :content "C1–C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-row (1 :span 2)\nspan in the row value" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-row '(1 :span 2) (box :content "R1–R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-column (1 3)\nexplicit end line" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-column '(1 3) (box :content "C1→C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-row (1 3)\nexplicit end line" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-row '(1 3) (box :content "R1→R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-column-span 2\nlonghand span" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-column-span 2 (box :content "C1–C2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content ":grid-row-span 2\nlonghand span" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (grid-item :grid-row-span 2 (box :content "R1–R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center)) (box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "direct child placement\n:grid-item is only a convenience" :padding '(0 (6)) :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) + (box :layout 'grid :width '(206) :height 4 :grid-template-columns '((58) (58) (58)) :grid-template-rows '(1 1) :gap '(0 (4)) :border "#6A5C8B" :bgcolor "#FBF9FF" (box :grid-column 2 :grid-row 2 :content "DIRECT\nC2/R2" :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :justify-items\nInline-axis item alignment supports start, center, end, stretch, and normal. Fixed-size items make the first three positions visible." :padding '(0 (18)) :border "#B07836" :bgcolor "#F3E4C7" :color "#513718" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#B07836" :border-top-p nil :bgcolor "#FFF9ED" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194)) :grid-template-rows '(3) :justify-items 'start :align-items 'center :border "#B07836" :bgcolor "#FFF9ED" (box :width '(72) :content "START" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "center" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194)) :grid-template-rows '(3) :justify-items 'center :align-items 'center :border "#B07836" :bgcolor "#FFF9ED" (box :width '(72) :content "CENTER" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "end" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194)) :grid-template-rows '(3) :justify-items 'end :align-items 'center :border "#B07836" :bgcolor "#FFF9ED" (box :width '(72) :content "END" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "stretch" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194)) :grid-template-rows '(3) :justify-items 'stretch :align-items 'center :border "#B07836" :bgcolor "#FFF9ED" (box :content "AUTO WIDTH\nSTRETCH" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "normal" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((194)) :grid-template-rows '(3) :justify-items 'normal :align-items 'center :border "#B07836" :bgcolor "#FFF9ED" (box :content "AUTO WIDTH\nNORMAL" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :align-items\nBlock-axis item alignment supports start, center, end, stretch, and normal. The fixed row height exposes the vertical offset." :padding '(0 (18)) :border "#B07836" :bgcolor "#F3E4C7" :color "#513718" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#B07836" :border-top-p nil :bgcolor "#FFF9ED" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194)) :grid-template-rows '(5) :justify-items 'center :align-items 'start :border "#B07836" :bgcolor "#FFF9ED" (box :width '(82) :height 1 :content "START" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "center" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194)) :grid-template-rows '(5) :justify-items 'center :align-items 'center :border "#B07836" :bgcolor "#FFF9ED" (box :width '(82) :height 1 :content "CENTER" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "end" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194)) :grid-template-rows '(5) :justify-items 'center :align-items 'end :border "#B07836" :bgcolor "#FFF9ED" (box :width '(82) :height 1 :content "END" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "stretch" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194)) :grid-template-rows '(5) :justify-items 'center :align-items 'stretch :border "#B07836" :bgcolor "#FFF9ED" (box :content "AUTO HEIGHT\nSTRETCH" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "normal" :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (grid :width '(206) :height 5 :grid-template-columns '((194)) + (box :layout 'grid :width '(206) :height 5 :grid-template-columns '((194)) :grid-template-rows '(5) :justify-items 'center :align-items 'normal :border "#B07836" :bgcolor "#FFF9ED" (box :content "NORMAL" :bgcolor "#F3E4C7" :color "#513718" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :justify-content\nInline-axis track packing supports start, center, end, space-between, space-around, space-evenly, stretch, and normal." :padding '(0 (18)) :border "#2F7180" :bgcolor "#CFE8EA" :color "#1E4148" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#2F7180" :border-top-p nil :bgcolor "#F6FCFC" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'start :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "center" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "end" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'end :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "space-between" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'space-between :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "space-around" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'space-around :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "space-evenly" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'space-evenly :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "stretch" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'stretch :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "normal" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 3 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 3 :grid-template-columns '((60) (60)) :grid-template-rows '(2) :gap '(0 (6)) :justify-content 'normal :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "Container property: :align-content\nBlock-axis track packing mirrors justify-content: start, center, end, space-between, space-around, space-evenly, stretch, and normal." :padding '(0 (18)) :border "#2F7180" :bgcolor "#CFE8EA" :color "#1E4148" :wrap-mode 'word) - (grid :grid-template-columns '((206) (206) (206)) + (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between :padding '(0 (12)) :border "#2F7180" :border-top-p nil :bgcolor "#F6FCFC" - (column :width '(206) + (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'start :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "center" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'center :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "end" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'end :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "space-between" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'space-between :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "space-around" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'space-around :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "space-evenly" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'space-evenly :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "stretch" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'stretch :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" (box :content "A" :bgcolor "#CFE8EA" :color "#1E4148" :text-align 'center) (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center))) - (column :width '(206) + (box :layout 'column :width '(206) (box :content "normal" :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (grid :width '(206) :height 7 :grid-template-columns '((60) (60)) + (box :layout 'grid :width '(206) :height 7 :grid-template-columns '((60) (60)) :grid-template-rows '(1 1) :gap '(0 (6)) :align-content 'normal :justify-content 'center :justify-items 'center :align-items 'center :border "#2F7180" :bgcolor "#F6FCFC" @@ -674,7 +674,7 @@ (box :content "B" :bgcolor "#9ACED2" :color "#1E4148" :text-align 'center) (box :content "C" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))) - (spacer :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :content "GRID TOOLKIT\n:grid-template-columns · :grid-template-rows · :grid-auto-columns · :grid-auto-rows · :grid-auto-flow · :gap · :row-gap · :column-gap · :grid-row-gap · :grid-column-gap · :justify-items · :align-items · :justify-content · :align-content · :grid-column · :grid-row · :grid-column-span · :grid-row-span\nTrack forms: fixed · auto · (fr FACTOR) · NFR · minmax · repeat. Placement forms: start · (start :span count) · (start end)." :padding '(1 (16)) :border "#2E3740" diff --git a/examples/public-layout-gallery.ebox b/examples/public-layout-gallery.ebox index 13e43ca..66888fb 100644 --- a/examples/public-layout-gallery.ebox +++ b/examples/public-layout-gallery.ebox @@ -1,4 +1,4 @@ -(column +(box :layout 'column (box :content "Ebox Playground\nPixel-precise layout, composed only from public nodes." :width '(720) :padding '(1 (18)) @@ -7,7 +7,7 @@ :bgcolor "#FFFDF8" :face 'bold :text-align 'center) - (spacer :width '(720) :height 1 :bgcolor "#FAF7F0") + (box :width '(720) :height 1 :bgcolor "#FAF7F0") (box :content "01 FIXED + FRACTIONAL\nA definite Grid width divides into one exact track and one flexible track." :width '(720) :padding '(0 (16)) @@ -16,7 +16,7 @@ :color "#252A2E" :bgcolor "#F1D4C9" :wrap-mode 'word) - (grid + (box :layout 'grid :width '(720) :grid-template-columns '((220) 1fr) :gap '(1 (12)) @@ -32,7 +32,7 @@ :grid-column '(1 :span 2) :width '(718) :padding '(1 0) :color "#663322" :bgcolor "#FFFDF8" :text-align 'center :wrap-mode 'word)) - (spacer :width '(720) :height 1 :bgcolor "#FAF7F0") + (box :width '(720) :height 1 :bgcolor "#FAF7F0") (box :content "02 EXPLICIT PLACEMENT\nSpan columns, target cells, and leave the remaining nodes to auto placement." :width '(720) :padding '(0 (16)) @@ -41,7 +41,7 @@ :color "#252A2E" :bgcolor "#DCEBDD" :wrap-mode 'word) - (grid + (box :layout 'grid :width '(720) :grid-template-columns '((210) (210) 1fr) :gap '(1 (10)) @@ -60,7 +60,7 @@ :text-align 'center :color "#24422D" :bgcolor "#E3F0E5") (box :content "STABLE CELLS" :width '(278) :padding '(1 0) :text-align 'center :color "#24422D" :bgcolor "#D4E6D7")) - (spacer :width '(720) :height 1 :bgcolor "#FAF7F0") + (box :width '(720) :height 1 :bgcolor "#FAF7F0") (box :content "03 PUBLIC COMPOSITION\nColumn, Flex, and Grid share the same public node contract." :width '(720) :padding '(0 (16)) @@ -69,7 +69,7 @@ :color "#252A2E" :bgcolor "#D9EAF2" :wrap-mode 'word) - (flex + (box :layout 'flex :width '(720) :flex-flow '(row wrap) :gap '(1 (12)) @@ -88,7 +88,7 @@ :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width '(180) :padding '(1 (12)) :color "#6B3020" :bgcolor "#F1D4C9")) - (spacer :width '(720) :height 1 :bgcolor "#FAF7F0") + (box :width '(720) :height 1 :bgcolor "#FAF7F0") (box :content "PUBLIC CONTRACT ebox-create · ebox-column · ebox-flex · ebox-grid · ebox-spacer" :width '(720) :padding '(0 (16)) diff --git a/examples/responsive-reference.ebox b/examples/responsive-reference.ebox index 59c19c7..53dd392 100644 --- a/examples/responsive-reference.ebox +++ b/examples/responsive-reference.ebox @@ -1,19 +1,19 @@ -(column +(box :layout 'column :margin-left 1 :margin-top 1 :padding '(1 2 1 2) :bgcolor "linen" (box :content "Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout." :padding '(1 (18)) :border "#334155" :text-align 'center :color "#000" :bgcolor "ghost white") - (spacer :height 1) + (box :height 1) (box :content "No explicit viewport width here\nThis page mostly omits :width. The Playground binds the current preview width while rendering, so auto width behaves like a responsive container." :padding '(0 (16)) :border "#0F766E" :bgcolor "#F0FDFA" :color "#134E4A" :wrap-mode 'word) - (spacer :height 1) + (box :height 1) (box :content "Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps." :padding '(0 (16)) :border "#EA580C" :border-bottom-p nil :bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word) - (flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1 + (box :layout 'flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1 :padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5" (box :content "Render" :width '(96) :padding '(0 (8)) :border "#EA580C" :bgcolor "#FED7AA" :color "#111827" @@ -30,12 +30,12 @@ (box :content "Write" :width '(88) :padding '(0 (8)) :border "#9333EA" :bgcolor "#F3E8FF" :color "#3B0764" :text-align 'center)) - (spacer :height 1) + (box :height 1) (box :content "Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow." :padding '(0 (16)) :border "#2563EB" :border-bottom-p nil :bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word) - (flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1 + (box :layout 'flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1 :padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF" :justify-content 'center (item :flex '(1 1 (210)) @@ -58,7 +58,7 @@ :min-width '(180) :max-width '(280) :padding '(0 (10)) ;; :border "#0891B2" :bgcolor "#CFFAFE" :color "#164E63" :wrap-mode 'word))) - (spacer :height 1) + (box :height 1) (box :content "What to watch\nNarrow preview: cards stack and text wraps. Wide preview: cards share a row and expand up to max-width. The source/preview split is preserved." :padding '(0 (16)) :border "#475569" diff --git a/tests/ebox-playground-tests.el b/tests/ebox-playground-tests.el index b223091..ec1a38a 100644 --- a/tests/ebox-playground-tests.el +++ b/tests/ebox-playground-tests.el @@ -463,17 +463,20 @@ (should (cl-every (lambda (width) (<= width viewport)) (ebox-playground-test--line-widths text))))) -(ert-deftest ebox-playground-grid-reference-spacers-paint-the-viewport () - "Grid reference separators should fill the active viewport canvas." +(ert-deftest ebox-playground-grid-reference-separators-paint-the-viewport () + "Grid reference separator Boxes should fill the active viewport canvas." (let ((path (expand-file-name "examples/grid-reference.ebox" ebox-playground-directory))) - (let ((spacers (ebox-playground-test--forms-named - 'spacer (ebox-playground--read-file path)))) - (should (= (length spacers) 11)) - (dolist (spacer spacers) - (should (equal (plist-get (cdr spacer) :width) - '(quote (viewport)))) - (should (equal (plist-get (cdr spacer) :bgcolor) "#FAF7F0")))) + (let ((separators + (cl-remove-if-not + (lambda (form) + (and (equal (plist-get (cdr form) :width) + '(quote (viewport))) + (equal (plist-get (cdr form) :height) 1) + (equal (plist-get (cdr form) :bgcolor) "#FAF7F0"))) + (ebox-playground-test--forms-named + 'box (ebox-playground--read-file path))))) + (should (= (length separators) 11))) (dolist (viewport '(691 720)) (let* ((ebox-viewport-width viewport) (lines (ebox-string-lines