From f5931f1fbe6f880c9598cdcede4c3a85adab95e7 Mon Sep 17 00:00:00 2001 From: Kinneyzhang Date: Wed, 26 Aug 2026 16:27:48 +0800 Subject: [PATCH] refactor: put Flex and Grid participation on Box --- examples/comprehensive.ebox | 36 ++-- examples/flex-reference.ebox | 274 ++++++++++++++--------------- examples/grid-reference.ebox | 32 ++-- examples/responsive-reference.ebox | 40 ++--- 4 files changed, 189 insertions(+), 193 deletions(-) diff --git a/examples/comprehensive.ebox b/examples/comprehensive.ebox index 6f56818..0a1c93b 100644 --- a/examples/comprehensive.ebox +++ b/examples/comprehensive.ebox @@ -23,23 +23,19 @@ :width '(270) :padding '(0 (8)) :border "#BE185D" :bgcolor "#FCE7F3" :color "#831843" :wrap-mode 'word)) - (item - :flex '(1 1 (220)) - (box :content "item :flex (1 1 220)\ngrow shrink basis" - :width '(220) :height 4 - :padding '(0 (8)) :border "#1D4ED8" - :bgcolor "#DBEAFE" :color "#111827" :wrap-mode 'word)) - (item - :flex-grow 2 :flex-shrink 1 :flex-basis '(240) - :align-self 'center - (box :content "item grow 2\nshrink 1\nbasis 240" - :width '(240) :height 4 :padding '(0 (8)) - :border "#B45309" :bgcolor "#FEF3C7" :color "#78350F" - :wrap-mode 'word)) - (item :flex-shrink 3 - :flex-basis '(190) - :align-self 'flex-end - (box :content "item shrink 3\nbasis 190\nalign-self flex-end" - :width '(190) :height 4 :padding '(0 (8)) - :border "#15803D" :bgcolor "#DCFCE7" :color "#14532D" - :wrap-mode 'word)))) + (box :flex '(1 1 (220)) + :content "Box :flex (1 1 220)\ngrow shrink basis" + :width '(220) :height 4 + :padding '(0 (8)) :border "#1D4ED8" + :bgcolor "#DBEAFE" :color "#111827" :wrap-mode 'word) + (box :flex-grow 2 :flex-shrink 1 :flex-basis '(240) + :align-self 'center + :content "Box grow 2\nshrink 1\nbasis 240" + :width '(240) :height 4 :padding '(0 (8)) + :border "#B45309" :bgcolor "#FEF3C7" :color "#78350F" + :wrap-mode 'word) + (box :flex-shrink 3 :flex-basis '(190) :align-self 'flex-end + :content "Box shrink 3\nbasis 190\nalign-self flex-end" + :width '(190) :height 4 :padding '(0 (8)) + :border "#15803D" :bgcolor "#DCFCE7" :color "#14532D" + :wrap-mode 'word))) diff --git a/examples/flex-reference.ebox b/examples/flex-reference.ebox index aa9dba6..760d3d8 100644 --- a/examples/flex-reference.ebox +++ b/examples/flex-reference.ebox @@ -19,36 +19,36 @@ (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)))) + (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(42) :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "row-reverse" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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)))) + (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(42) :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "column" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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)))) + (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) + (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) + (box :content "C" :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "column-reverse" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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))))) + (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) + (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) + (box :content "C" :height 1 :bgcolor "#D97757" :color "#1F2328" :text-align 'center)))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -64,27 +64,27 @@ (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)))) + (box :flex-shrink 1 :content "A" :width '(92) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center) + (box :flex-shrink 1 :content "B" :width '(92) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center) + (box :flex-shrink 1 :content "C" :width '(92) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "wrap" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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)))) + (box :flex-shrink 0 :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center) + (box :flex-shrink 0 :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center) + (box :flex-shrink 0 :content "C 118" :width '(118) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "wrap-reverse" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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))))) + (box :flex-shrink 0 :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center) + (box :flex-shrink 0 :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center) + (box :flex-shrink 0 :content "C 118" :width '(118) :height 1 :bgcolor "#8FAF95" :color "#1F2328" :text-align 'center)))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -100,18 +100,18 @@ (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)))) + (box :content "A" :width '(170) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(170) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center) + (box :content "C wraps" :width '(170) :height 1 :bgcolor "#AFA3D1" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content ":flex-flow (column wrap)" :max-width '(440) :padding '(0 (10)) :border "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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))))) + (box :content "A" :width '(140) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(140) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center) + (box :content "C new column" :width '(140) :height 1 :bgcolor "#AFA3D1" :color "#1F2328" :text-align 'center)))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -124,53 +124,53 @@ (box :layout 'column (box :content "flex-start" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "center" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align '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)))) + (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "flex-end" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-between" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-around" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-evenly" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "start" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "start" :width '(70) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "end" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "end" :width '(70) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "left" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "left" :width '(70) :height 1 :bgcolor "#7DB8CE" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "right" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "right" :width '(70) :height 1 :bgcolor "#5F9CB5" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "normal" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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))))) + (box :content "normal" :width '(70) :height 1 :bgcolor "#3F6D88" :color "#FFFFFF" :text-align 'center)))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -183,47 +183,47 @@ (box :layout 'column (box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) + (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "center" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align '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)))) + (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) + (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) + (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "stretch" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "auto height stretches" :width '(72) :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) + (box :content "line height" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "baseline" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "baseline" :width '(90) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "start" :width '(62) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "end" :width '(62) :height 1 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "self-start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "self-start" :width '(78) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "self-end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "self-end" :width '(70) :height 1 :bgcolor "#9A6B43" :color "#FFFFFF" :text-align 'center))) (box :layout 'column (box :content "normal" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "normal" :width '(62) :bgcolor "#7A5132" :color "#FFFFFF" :text-align 'center))) (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) @@ -242,84 +242,84 @@ (box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "center" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-between" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-around" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-evenly" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "stretch" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "baseline" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "normal" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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)))) + (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "nowrap note" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (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))))) + (box :content "single line" :width '(96) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -335,25 +335,25 @@ (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)))) + (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content ":row-gap 2" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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)))) + (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content ":column-gap (32)" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (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))))) + (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center) + (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center) + (box :content "C" :width '(104) :height 1 :bgcolor "#71BDB0" :color "#1F2328" :text-align 'center)))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -363,10 +363,10 @@ (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)) - (item :order 1 (box :content "source 2\n:order 1" :width '(150) :height 2 :bgcolor "#DEA4B7" :color "#1F2328" :text-align 'center)) - (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))) + (box :order 3 :content "source 1\n:order 3" :width '(150) :height 2 :bgcolor "#F2C4D2" :color "#1F2328" :text-align 'center) + (box :order 1 :content "source 2\n:order 1" :width '(150) :height 2 :bgcolor "#DEA4B7" :color "#1F2328" :text-align 'center) + (box :order 2 :content "source 3\n:order 2" :width '(150) :height 2 :bgcolor "#C87F9A" :color "#1F2328" :text-align 'center) + (box :order 1 :content "source 4\nsame order" :width '(150) :height 2 :bgcolor "#A95F7C" :color "#FFFFFF" :text-align 'center)) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -380,9 +380,9 @@ (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)))) + (box :flex-grow 1 :flex-basis '(120) :content "grow 1\nbasis 120" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) + (box :flex-grow 2 :flex-basis '(120) :content "grow 2\nbasis 120" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center) + (box :flex-grow 3 :flex-basis '(120) :content "grow 3\nbasis 120" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "Shrink factors: overflowing bases lose space by weighted shrink." :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil @@ -390,9 +390,9 @@ (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)))) + (box :flex-shrink 1 :flex-basis '(320) :content "shrink 1\nbasis 320" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) + (box :flex-shrink 3 :flex-basis '(320) :content "shrink 3\nbasis 320" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center) + (box :flex-shrink 5 :flex-basis '(320) :content "shrink 5\nbasis 320" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))) (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 @@ -400,9 +400,9 @@ (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)))) + (box :flex-basis '(120) :content "basis 120\nwidth 240" :width '(240) :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) + (box :flex-basis 'auto :content "basis auto\nwidth 240" :width '(240) :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center) + (box :flex '(1 1 (160)) :content "flex tuple\nbasis 160" :width '(240) :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))) (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 @@ -410,12 +410,12 @@ (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 - (box :content "content\nnatural text" :width '(180) :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center)) - (item :flex-shrink 0 :flex-basis 'min-content - (box :content "min-content\nwrap choices" :width '(180) :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center)) - (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)))) + (box :flex-shrink 0 :flex-basis 'content + :content "content\nnatural text" :width '(180) :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) + (box :flex-shrink 0 :flex-basis 'min-content + :content "min-content\nwrap choices" :width '(180) :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center) + (box :flex-shrink 0 :flex-basis 'max-content + :content "max-content\nkeeps phrase width" :width '(180) :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -425,12 +425,12 @@ (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)) - (item :flex 'none (box :content ":flex none\n= 0 0 auto" :width '(140) :bgcolor "#C5D681" :color "#1F2328" :text-align 'center)) - (item :flex 'auto (box :content ":flex auto\n= 1 1 auto" :width '(140) :bgcolor "#AABE59" :color "#1F2328" :text-align 'center)) - (item :flex 'initial (box :content ":flex initial\n= 0 1 auto" :width '(140) :bgcolor "#8D9E3C" :color "#1F2328" :text-align 'center)) - (item :flex '(2 1 (120)) :flex-basis '(160) - (box :content ":flex (2 1 120)\nthen basis 160" :bgcolor "#66762D" :color "#FFFFFF" :text-align 'center))) + (box :flex 1 :content ":flex 1\n= 1 1 0" :bgcolor "#DDE8B2" :color "#1F2328" :text-align 'center) + (box :flex 'none :content ":flex none\n= 0 0 auto" :width '(140) :bgcolor "#C5D681" :color "#1F2328" :text-align 'center) + (box :flex 'auto :content ":flex auto\n= 1 1 auto" :width '(140) :bgcolor "#AABE59" :color "#1F2328" :text-align 'center) + (box :flex 'initial :content ":flex initial\n= 0 1 auto" :width '(140) :bgcolor "#8D9E3C" :color "#1F2328" :text-align 'center) + (box :flex '(2 1 (120)) :flex-basis '(160) + :content ":flex (2 1 120)\nthen basis 160" :bgcolor "#66762D" :color "#FFFFFF" :text-align 'center)) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -441,21 +441,21 @@ :border-top-p nil :bgcolor "#FFFAF7" :align-items 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap '(10) - (item :align-self 'auto (box :content "auto\ninherits start" :width '(118) :height 2 :bgcolor "#EFC7B6" :color "#1F2328" :text-align 'center)) - (item :align-self 'flex-start (box :content "flex-start" :width '(118) :height 2 :bgcolor "#DBA58D" :color "#1F2328" :text-align 'center)) - (item :align-self 'center (box :content "center" :width '(118) :height 2 :bgcolor "#BF7F63" :color "#1F2328" :text-align 'center)) - (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))) + (box :align-self 'auto :content "auto\ninherits start" :width '(118) :height 2 :bgcolor "#EFC7B6" :color "#1F2328" :text-align 'center) + (box :align-self 'flex-start :content "flex-start" :width '(118) :height 2 :bgcolor "#DBA58D" :color "#1F2328" :text-align 'center) + (box :align-self 'center :content "center" :width '(118) :height 2 :bgcolor "#BF7F63" :color "#1F2328" :text-align 'center) + (box :align-self 'flex-end :content "flex-end" :width '(118) :height 2 :bgcolor "#9D6048" :color "#FFFFFF" :text-align 'center) + (box :align-self 'stretch :content "stretch\nauto cross" :width '(118) :bgcolor "#7B4D38" :color "#FFFFFF" :text-align 'center) + (box :align-self 'normal :content "normal\nstretch-like" :width '(118) :bgcolor "#5D3929" :color "#FFFFFF" :text-align 'center)) (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) - (item :align-self 'start (box :content "start" :width '(118) :height 2 :bgcolor "#EFC7B6" :color "#1F2328" :text-align 'center)) - (item :align-self 'end (box :content "end" :width '(118) :height 2 :bgcolor "#DBA58D" :color "#1F2328" :text-align 'center)) - (item :align-self 'self-start (box :content "self-start" :width '(118) :height 2 :bgcolor "#BF7F63" :color "#1F2328" :text-align 'center)) - (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))) + (box :align-self 'start :content "start" :width '(118) :height 2 :bgcolor "#EFC7B6" :color "#1F2328" :text-align 'center) + (box :align-self 'end :content "end" :width '(118) :height 2 :bgcolor "#DBA58D" :color "#1F2328" :text-align 'center) + (box :align-self 'self-start :content "self-start" :width '(118) :height 2 :bgcolor "#BF7F63" :color "#1F2328" :text-align 'center) + (box :align-self 'self-end :content "self-end" :width '(118) :height 2 :bgcolor "#9D6048" :color "#FFFFFF" :text-align 'center) + (box :align-self 'baseline :content "baseline" :width '(118) :height 2 :bgcolor "#7B4D38" :color "#FFFFFF" :text-align 'center)) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") diff --git a/examples/grid-reference.ebox b/examples/grid-reference.ebox index b57c876..bc58383 100644 --- a/examples/grid-reference.ebox +++ b/examples/grid-reference.ebox @@ -336,8 +336,8 @@ (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 :grid-column 2 :content "C2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content ":grid-row 2\none row start" :padding '(0 (6)) @@ -345,8 +345,8 @@ (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 :grid-row 2 :content "R2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "AUTO" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content ":grid-column (1 :span 2)\nspan in the column value" :padding '(0 (6)) @@ -354,8 +354,8 @@ (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 :grid-column '(1 :span 2) :content "C1–C2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content ":grid-row (1 :span 2)\nspan in the row value" :padding '(0 (6)) @@ -363,8 +363,8 @@ (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 :grid-row '(1 :span 2) :content "R1–R2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content ":grid-column (1 3)\nexplicit end line" :padding '(0 (6)) @@ -372,8 +372,8 @@ (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 :grid-column '(1 3) :content "C1→C2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content ":grid-row (1 3)\nexplicit end line" :padding '(0 (6)) @@ -381,8 +381,8 @@ (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 :grid-row '(1 3) :content "R1→R2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content ":grid-column-span 2\nlonghand span" :padding '(0 (6)) @@ -390,8 +390,8 @@ (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 :grid-column-span 2 :content "C1–C2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "C3" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content ":grid-row-span 2\nlonghand span" :padding '(0 (6)) @@ -399,8 +399,8 @@ (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 :grid-row-span 2 :content "R1–R2" + :bgcolor "#CBC2E3" :color "#332B4B" :text-align 'center) (box :content "OTHER" :bgcolor "#E7E2F1" :color "#332B4B" :text-align 'center))) (box :layout 'column :width '(206) (box :content "direct child placement\n:grid-item is only a convenience" :padding '(0 (6)) diff --git a/examples/responsive-reference.ebox b/examples/responsive-reference.ebox index 53dd392..317c390 100644 --- a/examples/responsive-reference.ebox +++ b/examples/responsive-reference.ebox @@ -38,26 +38,26 @@ (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)) - (box :content "Overview\nThe row uses the current preview width automatically." - :min-width '(180) :max-width '(280) - :padding '(0 (10)) ;; :border "#2563EB" - :bgcolor "#DBEAFE" :color "#111827" :wrap-mode 'word)) - (item :flex '(1 1 (210)) - (box :content "Editor\nDrag slowly or quickly; resize rendering is debounced." - :min-width '(180) :max-width '(300) - :padding '(0 (10)) ;; :border "#4F46E5" - :bgcolor "#E0E7FF" :color "#111827" :wrap-mode 'word)) - (item :flex '(1 1 (210)) - (box :content "Preview\nThe preview buffer rerenders after the viewport settles." - :min-width '(180) :max-width '(320) - :padding '(0 (10)) ;; :border "#7C3AED" - :bgcolor "#EDE9FE" :color "#111827" :wrap-mode 'word)) - (item :flex '(1 1 (210)) - (box :content "Flow\nCards keep readable widths instead of overflowing." - :min-width '(180) :max-width '(280) - :padding '(0 (10)) ;; :border "#0891B2" - :bgcolor "#CFFAFE" :color "#164E63" :wrap-mode 'word))) + (box :flex '(1 1 (210)) + :content "Overview\nThe row uses the current preview width automatically." + :min-width '(180) :max-width '(280) + :padding '(0 (10)) ;; :border "#2563EB" + :bgcolor "#DBEAFE" :color "#111827" :wrap-mode 'word) + (box :flex '(1 1 (210)) + :content "Editor\nDrag slowly or quickly; resize rendering follows the viewport." + :min-width '(180) :max-width '(300) + :padding '(0 (10)) ;; :border "#4F46E5" + :bgcolor "#E0E7FF" :color "#111827" :wrap-mode 'word) + (box :flex '(1 1 (210)) + :content "Preview\nThe preview updates from the current viewport width." + :min-width '(180) :max-width '(320) + :padding '(0 (10)) ;; :border "#7C3AED" + :bgcolor "#EDE9FE" :color "#111827" :wrap-mode 'word) + (box :flex '(1 1 (210)) + :content "Flow\nCards keep readable widths instead of overflowing." + :min-width '(180) :max-width '(280) + :padding '(0 (10)) ;; :border "#0891B2" + :bgcolor "#CFFAFE" :color "#164E63" :wrap-mode 'word)) (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."