diff --git a/DESIGN.md b/DESIGN.md index 4e03462..46d4d4b 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -41,7 +41,7 @@ - Imagery/iconography: Text-only. ## Components -- Existing components to reuse: `ebox-create`, `ebox-column`, `ebox-row`, `ebox-flex`, `ebox-grid`, and `ebox-spacer`. +- Author forms to reuse: String, `text`, `box`, `row`, `column`, `flex`, and `grid`. Empty `box` nodes express spacing directly without another public form. - New/changed components: Header band, property section bands, track-function cards, implicit-track/flow cards, gap/placement cards, alignment cards, and public-contract footer. - Variants and states: Static semantic color families only. - Token/component ownership: Palette values and example composition live in `.ebox` fixtures; the runner owns only parsing and rendering. The migrated references remain data files, so adding a layout does not add a fixture-specific Elisp branch. diff --git a/DESIGN.zh-CN.md b/DESIGN.zh-CN.md index 7b140db..2dbf289 100644 --- a/DESIGN.zh-CN.md +++ b/DESIGN.zh-CN.md @@ -41,7 +41,7 @@ - 图像与图标：纯文本。 ## 组件 -- 复用的现有组件：`ebox-create`、`ebox-column`、`ebox-row`、`ebox-flex`、`ebox-grid` 和 `ebox-spacer`。 +- 复用的作者 form：String、`text`、`box`、`row`、`column`、`flex` 和 `grid`。空 `box` 直接表达间距，不再引入另一个公共 form。 - 新增/调整的组件：标题带、能力分区标题带、固定/分数轨道卡片、放置卡片和公开契约页脚。 - 变体与状态：仅使用静态语义色组。 - Token/组件归属：配色值和示例组合放在 `.ebox` fixture 中；运行器只负责解析和渲染。迁移来的参考仍然是数据文件，新增布局不需要在 Elisp 中增加针对 fixture 的分支。 diff --git a/ebox-playground.el b/ebox-playground.el index 6f77ffa..df2fc4b 100644 --- a/ebox-playground.el +++ b/ebox-playground.el @@ -167,7 +167,9 @@ CANVAS-BACKGROUND fills display space outside generated root lines." (prog1 (progn (ebox-playground--apply-preview-display-settings - (and (consp node) (plist-get node :bgcolor))) + (and (consp node) + (ebox-style-node-specified-value + node :background-color))) (ebox-render-to-buffer buffer node)) (setq published-p t)) (unless published-p diff --git a/examples/basic.ebox b/examples/basic.ebox index bc027f1..70f695d 100644 --- a/examples/basic.ebox +++ b/examples/basic.ebox @@ -1,7 +1,3 @@ -(box :content "Playground file" - :box-sizing 'border-box - :padding '(1 (12)) - :border t - :border-color "#2563EB" - :bgcolor "#EFF6FF" - :color "#1E3A8A") +(box :box-sizing 'border-box :padding '(1 (12)) :border t + :border-color "#2563EB" :bgcolor "#EFF6FF" :color "#1E3A8A" + "Playground file") diff --git a/examples/comprehensive.ebox b/examples/comprehensive.ebox index 0a1c93b..0b00e38 100644 --- a/examples/comprehensive.ebox +++ b/examples/comprehensive.ebox @@ -1,41 +1,29 @@ -(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) - +(column + (box :padding '(1 (16)) :border "#334155" :bgcolor "#F8FAFC" :color + "#0F172A" :text-align 'center + "Ebox comprehensive DSL showcase\nThe outer sections omit :width so Playground viewport sizing drives the layout.") (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) - + (box :padding '(0 (14)) :border "#64748B" :bgcolor "#F8FAFC" :color + "#111827" :wrap-mode 'word + "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.") (box :width '(viewport) :height 1 :bgcolor "#F8FAFC") - - (box :layout 'flex - :margin '(1 0 0 1) :padding '(1 (8)) - :border "#475569" :bgcolor "#F8FAFC" - :flex-flow '(row wrap) - :justify-content 'space-between :align-items 'center - :align-content 'flex-start :row-gap 1 :column-gap '(12) - (item - :order -1 :flex-basis '(270) :align-self 'flex-start - (box :content "item order -1\n:flex-basis 270\nalign-self start" - :width '(270) :padding '(0 (8)) - :border "#BE185D" :bgcolor "#FCE7F3" :color "#831843" - :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))) + (flex :margin '(1 0 0 1) :padding '(1 (8)) :border "#475569" :bgcolor + "#F8FAFC" :flex-flow '(row wrap) :justify-content + 'space-between :align-items 'center :align-content 'flex-start + :row-gap 1 :column-gap '(12) + (box :order -1 :flex-basis '(270) :align-self 'flex-start + :width '(270) :padding '(0 (8)) :border "#BE185D" + :bgcolor "#FCE7F3" :color "#831843" :wrap-mode 'word + "Box order -1\n:flex-basis 270\nalign-self start") + (box :flex '(1 1 (220)) :width '(220) :height 4 :padding + '(0 (8)) :border "#1D4ED8" :bgcolor "#DBEAFE" :color + "#111827" :wrap-mode 'word + "Box :flex (1 1 220)\ngrow shrink basis") + (box :flex-grow 2 :flex-shrink 1 :flex-basis '(240) :align-self + 'center :width '(240) :height 4 :padding '(0 (8)) :border + "#B45309" :bgcolor "#FEF3C7" :color "#78350F" :wrap-mode + 'word "Box grow 2\nshrink 1\nbasis 240") + (box :flex-shrink 3 :flex-basis '(190) :align-self 'flex-end + :width '(190) :height 4 :padding '(0 (8)) :border + "#15803D" :bgcolor "#DCFCE7" :color "#14532D" :wrap-mode + 'word "Box shrink 3\nbasis 190\nalign-self flex-end"))) diff --git a/examples/flex-reference.ebox b/examples/flex-reference.ebox index 485a87c..3b54c0a 100644 --- a/examples/flex-reference.ebox +++ b/examples/flex-reference.ebox @@ -1,464 +1,764 @@ -(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) - - (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") - (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#D97757" :border-top 'none - :bgcolor "#FFF8F2" - (box :layout 'column - (box :content "row" :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 'none - :bgcolor "#FFF8F2" :flex-direction 'row :column-gap '(10) :align-items '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 'none - :bgcolor "#FFF8F2" :flex-direction 'row-reverse :column-gap '(10) :align-items '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 'none - :bgcolor "#FFF8F2" :flex-direction 'column :row-gap 1 :align-items 'stretch - (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 'none - :bgcolor "#FFF8F2" :flex-direction 'column-reverse :row-gap 1 :align-items 'stretch - (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") - - (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") - (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#5E7F6A" :border-top 'none - :bgcolor "#F8FCF8" - (box :layout 'column - (box :content "nowrap" :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 'none - :bgcolor "#F8FCF8" :flex-wrap 'nowrap :column-gap '(8) :align-items '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 'none - :bgcolor "#F8FCF8" :flex-wrap 'wrap :column-gap '(8) :row-gap 1 - (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 'none - :bgcolor "#F8FCF8" :flex-wrap 'wrap-reverse :column-gap '(8) :row-gap 1 - (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") - - (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") - (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#6F6A95" :border-top 'none - :bgcolor "#FBF9FF" - (box :layout 'column - (box :content ":flex-flow (row 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 'none - :bgcolor "#FBF9FF" :flex-flow '(row wrap) :gap '(1 (12)) - (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 'none - :bgcolor "#FBF9FF" :flex-flow '(column wrap) :gap '(1 (12)) - (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") - - (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") - (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#3F6D88" :border-top 'none - :bgcolor "#F6FBFD" - (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 'none :bgcolor "#F6FBFD" :justify-content 'flex-start - (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 'none :bgcolor "#F6FBFD" :justify-content '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 'none :bgcolor "#F6FBFD" :justify-content 'flex-end - (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 'none :bgcolor "#F6FBFD" :justify-content 'space-between - (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 'none :bgcolor "#F6FBFD" :justify-content 'space-around - (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 'none :bgcolor "#F6FBFD" :justify-content 'space-evenly - (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 'none :bgcolor "#F6FBFD" :justify-content 'start - (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 'none :bgcolor "#F6FBFD" :justify-content 'end - (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 'none :bgcolor "#F6FBFD" :justify-content 'left - (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 'none :bgcolor "#F6FBFD" :justify-content 'right - (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 'none :bgcolor "#F6FBFD" :justify-content 'normal - (box :content "normal" :width '(70) :height 1 :bgcolor "#3F6D88" :color "#FFFFFF" :text-align 'center)))) - - (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") - (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#9A6B43" :border-top 'none - :bgcolor "#FFFAF5" - (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 'none :bgcolor "#FFFAF5" :align-items 'flex-start - (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 'none :bgcolor "#FFFAF5" :align-items '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 'none :bgcolor "#FFFAF5" :align-items 'flex-end - (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 'none :bgcolor "#FFFAF5" :align-items 'stretch - (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 'none :bgcolor "#FFFAF5" :align-items 'baseline - (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 'none :bgcolor "#FFFAF5" :align-items 'start - (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 'none :bgcolor "#FFFAF5" :align-items 'end - (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 'none :bgcolor "#FFFAF5" :align-items 'self-start - (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 'none :bgcolor "#FFFAF5" :align-items 'self-end - (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 'none :bgcolor "#FFFAF5" :align-items 'normal - (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) - :height 4 :padding '(0 (8)) :border "#9A6B43" :border-top 'none - :bgcolor "#FFFAF5" :color "#3A2A1D"))) - - (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") - (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#7C6A2F" :border-top 'none - :bgcolor "#FFFDF0" - (box :layout 'column - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'flex-start :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'center :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'flex-end :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'space-between :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'space-around :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'space-evenly :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'stretch :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'start :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'end :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'baseline :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'wrap :align-content 'normal :row-gap 1 :column-gap '(8) - (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 'none :bgcolor "#FFFDF0" - :flex-wrap 'nowrap :align-content 'normal :row-gap 1 :column-gap '(8) - (box :content "single line" :width '(96) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)))) - - (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") - (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#3D7068" :border-top 'none - :bgcolor "#F7FCFB" - (box :layout 'column - (box :content ":gap (1 (14))" :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 'none :bgcolor "#F7FCFB" - :flex-wrap 'wrap :gap '(1 (14)) - (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 'none :bgcolor "#F7FCFB" - :flex-wrap 'wrap :row-gap 2 :column-gap '(8) - (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 'none :bgcolor "#F7FCFB" - :flex-wrap 'wrap :row-gap 1 :column-gap '(32) - (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") - - (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") - (box :layout 'flex :height 5 :padding '(0 (12)) :border "#8E4A63" - :border-top 'none - :bgcolor "#FFF8FA" :column-gap '(12) :align-items '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") - - (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") - (box :layout 'column - (box :content "Grow factors: same basis, different growth weights." - :padding '(0 (12)) :border "#2F5F7C" :border-top 'none - :bgcolor "#FFFDF8" :color "#3D3A35") - (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top 'none - :bgcolor "#F8FCFE" :column-gap '(10) - (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 'none - :bgcolor "#FFFDF8" :color "#3D3A35") - (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top 'none - :bgcolor "#F8FCFE" :column-gap '(10) - (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 'none - :bgcolor "#FFFDF8" :color "#3D3A35") - (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top 'none - :bgcolor "#F8FCFE" :column-gap '(10) - (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 'none - :bgcolor "#FFFDF8" :color "#3D3A35") - (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top 'none - :bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1 :column-gap '(10) - (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") - - (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") - (box :layout 'flex :height 7 :padding '(0 (12)) :border "#52612F" - :border-top 'none - :bgcolor "#FCFDF6" :flex-wrap 'wrap :row-gap 1 :column-gap '(8) :align-items '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") - - (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") - (box :layout 'flex :height 7 :padding '(0 (12)) :border "#7B4D38" - :border-top 'none - :bgcolor "#FFFAF7" :align-items 'flex-start - :flex-wrap 'wrap :row-gap 1 :column-gap '(10) - (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 'none - :bgcolor "#FFFAF7" :align-items 'flex-start - :flex-wrap 'wrap :row-gap 1 :column-gap '(10) - (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") - - (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" - :bgcolor "#FAF7F0" :color "#1F2328" :text-align 'center)) +(column :height '(viewport-height) :width '(viewport) :overflow + 'scroll :bgcolor "#FAF7F0" + (box :padding '(1 (24)) :border "#2F3437" :bgcolor "#FAF7F0" + :color "#1F2328" :text-align 'center + "Ebox CSS Flex Reference\nA modern, self-explaining DSL gallery for CSS flex container and item properties.") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#D97757" :bgcolor "#FFF5ED" + :color "#3D2B1F" + "Container property: :flex-direction\nMain axis selection. Reverse values swap main-start and main-end while keeping source order intact.") + (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) + :padding '(0 (12)) :border "#D97757" :border-top 'none + :bgcolor "#FFF8F2" + (column + (box :width '(220) :padding '(0 (10)) :border "#D97757" + :bgcolor "#FFFDF8" :color "#3D3A35" :text-align + 'center "row") + (flex :width '(220) :height 4 :padding '(0 (8)) :border + "#D97757" :border-top 'none :bgcolor "#FFF8F2" + :flex-direction 'row :column-gap '(10) + :align-items 'center + (box :width '(42) :height 1 :bgcolor "#F7C8B3" + :color "#1F2328" :text-align 'center "A") + (box :width '(42) :height 1 :bgcolor "#F0A88F" + :color "#1F2328" :text-align 'center "B") + (box :width '(42) :height 1 :bgcolor "#D97757" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(220) :padding '(0 (10)) :border "#D97757" + :bgcolor "#FFFDF8" :color "#3D3A35" :text-align + 'center "row-reverse") + (flex :width '(220) :height 4 :padding '(0 (8)) :border + "#D97757" :border-top 'none :bgcolor "#FFF8F2" + :flex-direction 'row-reverse :column-gap '(10) + :align-items 'center + (box :width '(42) :height 1 :bgcolor "#F7C8B3" + :color "#1F2328" :text-align 'center "A") + (box :width '(42) :height 1 :bgcolor "#F0A88F" + :color "#1F2328" :text-align 'center "B") + (box :width '(42) :height 1 :bgcolor "#D97757" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(220) :padding '(0 (10)) :border "#D97757" + :bgcolor "#FFFDF8" :color "#3D3A35" :text-align + 'center "column") + (flex :width '(220) :height 6 :padding '(0 (8)) :border + "#D97757" :border-top 'none :bgcolor "#FFF8F2" + :flex-direction 'column :row-gap 1 :align-items + 'stretch + (box :height 1 :bgcolor "#F7C8B3" :color + "#1F2328" :text-align 'center "A") + (box :height 1 :bgcolor "#F0A88F" :color + "#1F2328" :text-align 'center "B") + (box :height 1 :bgcolor "#D97757" :color + "#1F2328" :text-align 'center "C"))) + (column + (box :width '(220) :padding '(0 (10)) :border "#D97757" + :bgcolor "#FFFDF8" :color "#3D3A35" :text-align + 'center "column-reverse") + (flex :width '(220) :height 6 :padding '(0 (8)) :border + "#D97757" :border-top 'none :bgcolor "#FFF8F2" + :flex-direction 'column-reverse :row-gap 1 + :align-items 'stretch + (box :height 1 :bgcolor "#F7C8B3" :color + "#1F2328" :text-align 'center "A") + (box :height 1 :bgcolor "#F0A88F" :color + "#1F2328" :text-align 'center "B") + (box :height 1 :bgcolor "#D97757" :color + "#1F2328" :text-align 'center "C")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#5E7F6A" :bgcolor "#F3FAF4" + :color "#24352A" + "Container property: :flex-wrap\nLine creation. nowrap keeps one flex line; wrap creates new lines; wrap-reverse stacks lines from the opposite cross side.") + (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) + :padding '(0 (12)) :border "#5E7F6A" :border-top 'none + :bgcolor "#F8FCF8" + (column + (box :max-width '(293) :padding '(0 (10)) :border + "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center "nowrap") + (flex :max-width '(293) :padding '(0 (8)) :border + "#5E7F6A" :border-top 'none :bgcolor "#F8FCF8" + :flex-wrap 'nowrap :column-gap '(8) :align-items + 'center + (box :flex-shrink 1 :width '(92) :height 1 + :bgcolor "#DCEBDD" :color "#1F2328" + :text-align 'center "A") + (box :flex-shrink 1 :width '(92) :height 1 + :bgcolor "#BFD6C2" :color "#1F2328" + :text-align 'center "B") + (box :flex-shrink 1 :width '(92) :height 1 + :bgcolor "#8FAF95" :color "#1F2328" + :text-align 'center "C"))) + (column + (box :max-width '(293) :padding '(0 (10)) :border + "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center "wrap") + (flex :max-width '(293) :padding '(0 (8)) :border + "#5E7F6A" :border-top 'none :bgcolor "#F8FCF8" + :flex-wrap 'wrap :column-gap '(8) :row-gap 1 + (box :flex-shrink 0 :width '(118) :height 1 + :bgcolor "#DCEBDD" :color "#1F2328" + :text-align 'center "A 118") + (box :flex-shrink 0 :width '(118) :height 1 + :bgcolor "#BFD6C2" :color "#1F2328" + :text-align 'center "B 118") + (box :flex-shrink 0 :width '(118) :height 1 + :bgcolor "#8FAF95" :color "#1F2328" + :text-align 'center "C 118"))) + (column + (box :max-width '(293) :padding '(0 (10)) :border + "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center "wrap-reverse") + (flex :max-width '(293) :padding '(0 (8)) :border + "#5E7F6A" :border-top 'none :bgcolor "#F8FCF8" + :flex-wrap 'wrap-reverse :column-gap '(8) + :row-gap 1 + (box :flex-shrink 0 :width '(118) :height 1 + :bgcolor "#DCEBDD" :color "#1F2328" + :text-align 'center "A 118") + (box :flex-shrink 0 :width '(118) :height 1 + :bgcolor "#BFD6C2" :color "#1F2328" + :text-align 'center "B 118") + (box :flex-shrink 0 :width '(118) :height 1 + :bgcolor "#8FAF95" :color "#1F2328" + :text-align 'center "C 118")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#6F6A95" :bgcolor "#F7F4FC" + :color "#2F2B45" + "Container property: :flex-flow\nShorthand for direction and wrapping. These examples use one property to set both behaviors.") + (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) + :padding '(0 (12)) :border "#6F6A95" :border-top 'none + :bgcolor "#FBF9FF" + (column + (box :max-width '(440) :padding '(0 (10)) :border + "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center ":flex-flow (row wrap)") + (flex :max-width '(440) :padding '(0 (8)) :border + "#6F6A95" :border-top 'none :bgcolor "#FBF9FF" + :flex-flow '(row wrap) :gap '(1 (12)) + (box :width '(170) :height 1 :bgcolor "#E4DEF4" + :color "#1F2328" :text-align 'center "A") + (box :width '(170) :height 1 :bgcolor "#CBC2E3" + :color "#1F2328" :text-align 'center "B") + (box :width '(170) :height 1 :bgcolor "#AFA3D1" + :color "#1F2328" :text-align 'center + "C wraps"))) + (column + (box :max-width '(440) :padding '(0 (10)) :border + "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center ":flex-flow (column wrap)") + (flex :max-width '(440) :padding '(0 (8)) :border + "#6F6A95" :border-top 'none :bgcolor "#FBF9FF" + :flex-flow '(column wrap) :gap '(1 (12)) + (box :width '(140) :height 1 :bgcolor "#E4DEF4" + :color "#1F2328" :text-align 'center "A") + (box :width '(140) :height 1 :bgcolor "#CBC2E3" + :color "#1F2328" :text-align 'center "B") + (box :width '(140) :height 1 :bgcolor "#AFA3D1" + :color "#1F2328" :text-align 'center + "C new column")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#3F6D88" :bgcolor "#F1F8FB" + :color "#20313A" + "Container property: :justify-content\nMain-axis packing after sizing. Distributed values change the space before, between, and after items.") + (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) + :padding '(0 (12)) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" + (column + (box :width '(146) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "flex-start") + (flex :width '(146) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'flex-start + (box :width '(28) :height 1 :bgcolor "#CAE6F0" + :color "#1F2328" :text-align 'center "A") + (box :width '(28) :height 1 :bgcolor "#A8D2E2" + :color "#1F2328" :text-align 'center "B"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "center") + (flex :width '(146) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'center + (box :width '(28) :height 1 :bgcolor "#CAE6F0" + :color "#1F2328" :text-align 'center "A") + (box :width '(28) :height 1 :bgcolor "#A8D2E2" + :color "#1F2328" :text-align 'center "B"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "flex-end") + (flex :width '(146) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'flex-end + (box :width '(28) :height 1 :bgcolor "#CAE6F0" + :color "#1F2328" :text-align 'center "A") + (box :width '(28) :height 1 :bgcolor "#A8D2E2" + :color "#1F2328" :text-align 'center "B"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "space-between") + (flex :width '(146) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content + 'space-between + (box :width '(28) :height 1 :bgcolor "#CAE6F0" + :color "#1F2328" :text-align 'center "A") + (box :width '(28) :height 1 :bgcolor "#A8D2E2" + :color "#1F2328" :text-align 'center "B"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "space-around") + (flex :width '(146) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'space-around + (box :width '(28) :height 1 :bgcolor "#CAE6F0" + :color "#1F2328" :text-align 'center "A") + (box :width '(28) :height 1 :bgcolor "#A8D2E2" + :color "#1F2328" :text-align 'center "B"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "space-evenly") + (flex :width '(146) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'space-evenly + (box :width '(28) :height 1 :bgcolor "#CAE6F0" + :color "#1F2328" :text-align 'center "A") + (box :width '(28) :height 1 :bgcolor "#A8D2E2" + :color "#1F2328" :text-align 'center "B"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "start") + (flex :width '(176) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'start + (box :width '(70) :height 1 :bgcolor "#CAE6F0" + :color "#1F2328" :text-align 'center "start"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "end") + (flex :width '(176) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'end + (box :width '(70) :height 1 :bgcolor "#A8D2E2" + :color "#1F2328" :text-align 'center "end"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "left") + (flex :width '(176) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'left + (box :width '(70) :height 1 :bgcolor "#7DB8CE" + :color "#1F2328" :text-align 'center "left"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "right") + (flex :width '(176) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'right + (box :width '(70) :height 1 :bgcolor "#5F9CB5" + :color "#1F2328" :text-align 'center "right"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "normal") + (flex :width '(176) :border "#3F6D88" :border-top 'none + :bgcolor "#F6FBFD" :justify-content 'normal + (box :width '(70) :height 1 :bgcolor "#3F6D88" + :color "#FFFFFF" :text-align 'center + "normal")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#9A6B43" :bgcolor "#FFF7EE" + :color "#3A2A1D" + "Container property: :align-items\nCross-axis alignment inside each flex line. Stretch/normal enlarge auto-sized items; start/end/center move shorter ones.") + (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) + :padding '(0 (12)) :border "#9A6B43" :border-top 'none + :bgcolor "#FFFAF5" + (column + (box :width '(176) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "flex-start") + (flex :width '(176) :height 5 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'flex-start + (box :width '(68) :height 1 :bgcolor "#F1D0AF" + :color "#1F2328" :text-align 'center "short") + (box :width '(78) :height 3 :bgcolor "#D9AD83" + :color "#1F2328" :text-align 'center + "tall\nitem\nsets line"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "center") + (flex :width '(176) :height 5 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'center + (box :width '(68) :height 1 :bgcolor "#F1D0AF" + :color "#1F2328" :text-align 'center "short") + (box :width '(78) :height 3 :bgcolor "#D9AD83" + :color "#1F2328" :text-align 'center + "tall\nitem\nsets line"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "flex-end") + (flex :width '(176) :height 5 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'flex-end + (box :width '(68) :height 1 :bgcolor "#F1D0AF" + :color "#1F2328" :text-align 'center "short") + (box :width '(78) :height 3 :bgcolor "#D9AD83" + :color "#1F2328" :text-align 'center + "tall\nitem\nsets line"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "stretch") + (flex :width '(176) :height 5 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'stretch + (box :width '(72) :bgcolor "#F1D0AF" :color + "#1F2328" :text-align 'center + "auto height stretches") + (box :width '(78) :height 3 :bgcolor "#D9AD83" + :color "#1F2328" :text-align 'center + "line height"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "baseline") + (flex :width '(176) :height 5 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'baseline + (box :width '(90) :height 1 :bgcolor "#BA8456" + :color "#1F2328" :text-align 'center + "baseline"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "start") + (flex :width '(146) :height 4 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'start + (box :width '(62) :height 1 :bgcolor "#F1D0AF" + :color "#1F2328" :text-align 'center "start"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "end") + (flex :width '(146) :height 4 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'end + (box :width '(62) :height 1 :bgcolor "#D9AD83" + :color "#1F2328" :text-align 'center "end"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "self-start") + (flex :width '(146) :height 4 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'self-start + (box :width '(78) :height 1 :bgcolor "#BA8456" + :color "#1F2328" :text-align 'center + "self-start"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "self-end") + (flex :width '(146) :height 4 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'self-end + (box :width '(70) :height 1 :bgcolor "#9A6B43" + :color "#FFFFFF" :text-align 'center + "self-end"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "normal") + (flex :width '(146) :height 4 :border "#9A6B43" + :border-top 'none :bgcolor "#FFFAF5" :align-items + 'normal + (box :width '(62) :bgcolor "#7A5132" :color + "#FFFFFF" :text-align 'center "normal"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "stretch note") + (box :width '(146) :height 4 :padding '(0 (8)) :border + "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" + :color "#3A2A1D" + "normal behaves stretch-like for auto cross size in this DSL."))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#7C6A2F" :bgcolor "#FBF8E8" + :color "#362F16" + "Container property: :align-content\nCross-axis packing between multiple flex lines. It has no visible effect on a nowrap single-line container.") + (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) + :padding '(0 (12)) :border "#7C6A2F" :border-top 'none + :bgcolor "#FFFDF0" + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "flex-start") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'flex-start :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "center") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'center :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "flex-end") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'flex-end :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "space-between") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'space-between :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "space-around") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'space-around :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "space-evenly") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'space-evenly :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "stretch") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'stretch :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "start") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'start :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "end") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'end :row-gap 1 :column-gap + '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "baseline") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'baseline :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "normal") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'wrap :align-content 'normal :row-gap 1 + :column-gap '(8) + (box :width '(78) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center "A") + (box :width '(78) :height 1 :bgcolor "#D9C46D" + :color "#1F2328" :text-align 'center "B") + (box :width '(78) :height 1 :bgcolor "#B89B3D" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#7C6A2F" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "nowrap note") + (flex :width '(176) :height 7 :border "#7C6A2F" + :border-top 'none :bgcolor "#FFFDF0" :flex-wrap + 'nowrap :align-content 'normal :row-gap 1 + :column-gap '(8) + (box :width '(96) :height 1 :bgcolor "#EEE1A8" + :color "#1F2328" :text-align 'center + "single line")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#3D7068" :bgcolor "#F1FAF8" + :color "#1D3935" + "Container properties: :gap, :row-gap, :column-gap\n:gaps define spacing between flex items and flex lines. Explicit row/column values override matching sides.") + (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) + :padding '(0 (12)) :border "#3D7068" :border-top 'none + :bgcolor "#F7FCFB" + (column + (box :max-width '(293) :padding '(0 (10)) :border + "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center ":gap (1 (14))") + (flex :max-width '(293) :border "#3D7068" :border-top + 'none :bgcolor "#F7FCFB" :flex-wrap 'wrap :gap + '(1 (14)) + (box :width '(104) :height 1 :bgcolor "#CDEBE5" + :color "#1F2328" :text-align 'center "A") + (box :width '(104) :height 1 :bgcolor "#9FD5CB" + :color "#1F2328" :text-align 'center "B") + (box :width '(104) :height 1 :bgcolor "#71BDB0" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :max-width '(293) :padding '(0 (10)) :border + "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center ":row-gap 2") + (flex :max-width '(293) :border "#3D7068" :border-top + 'none :bgcolor "#F7FCFB" :flex-wrap 'wrap + :row-gap 2 :column-gap '(8) + (box :width '(104) :height 1 :bgcolor "#CDEBE5" + :color "#1F2328" :text-align 'center "A") + (box :width '(104) :height 1 :bgcolor "#9FD5CB" + :color "#1F2328" :text-align 'center "B") + (box :width '(104) :height 1 :bgcolor "#71BDB0" + :color "#1F2328" :text-align 'center "C"))) + (column + (box :max-width '(293) :padding '(0 (10)) :border + "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" + :text-align 'center ":column-gap (32)") + (flex :max-width '(293) :border "#3D7068" :border-top + 'none :bgcolor "#F7FCFB" :flex-wrap 'wrap + :row-gap 1 :column-gap '(32) + (box :width '(104) :height 1 :bgcolor "#CDEBE5" + :color "#1F2328" :text-align 'center "A") + (box :width '(104) :height 1 :bgcolor "#9FD5CB" + :color "#1F2328" :text-align 'center "B") + (box :width '(104) :height 1 :bgcolor "#71BDB0" + :color "#1F2328" :text-align 'center "C")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#8E4A63" :bgcolor "#FFF4F7" + :color "#3A1F2A" + "Item property: :order\nVisual ordering sorts by :order, then source order. The labels expose both values.") + (flex :height 5 :padding '(0 (12)) :border "#8E4A63" + :border-top 'none :bgcolor "#FFF8FA" :column-gap '(12) + :align-items 'center + (box :order 3 :width '(150) :height 2 :bgcolor "#F2C4D2" + :color "#1F2328" :text-align 'center + "source 1\n:order 3") + (box :order 1 :width '(150) :height 2 :bgcolor "#DEA4B7" + :color "#1F2328" :text-align 'center + "source 2\n:order 1") + (box :order 2 :width '(150) :height 2 :bgcolor "#C87F9A" + :color "#1F2328" :text-align 'center + "source 3\n:order 2") + (box :order 1 :width '(150) :height 2 :bgcolor "#A95F7C" + :color "#FFFFFF" :text-align 'center + "source 4\nsame order")) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#2F5F7C" :bgcolor "#F1F8FC" + :color "#1C303D" + "Item sizing: :flex-grow, :flex-shrink, :flex-basis, and child :width\nFlex starts from basis or width/content, then distributes positive or negative space.") + (column + (box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#FFFDF8" :color "#3D3A35" + "Grow factors: same basis, different growth weights.") + (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#F8FCFE" :column-gap '(10) + (box :flex-grow 1 :flex-basis '(120) :height 2 :bgcolor + "#C7E3F0" :color "#1F2328" :text-align 'center + "grow 1\nbasis 120") + (box :flex-grow 2 :flex-basis '(120) :height 2 :bgcolor + "#96C7DD" :color "#1F2328" :text-align 'center + "grow 2\nbasis 120") + (box :flex-grow 3 :flex-basis '(120) :height 2 :bgcolor + "#5FA4C2" :color "#1F2328" :text-align 'center + "grow 3\nbasis 120"))) + (column + (box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#FFFDF8" :color "#3D3A35" + "Shrink factors: overflowing bases lose space by weighted shrink.") + (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#F8FCFE" :column-gap '(10) + (box :flex-shrink 1 :flex-basis '(320) :height 2 + :bgcolor "#C7E3F0" :color "#1F2328" :text-align + 'center "shrink 1\nbasis 320") + (box :flex-shrink 3 :flex-basis '(320) :height 2 + :bgcolor "#96C7DD" :color "#1F2328" :text-align + 'center "shrink 3\nbasis 320") + (box :flex-shrink 5 :flex-basis '(320) :height 2 + :bgcolor "#5FA4C2" :color "#1F2328" :text-align + 'center "shrink 5\nbasis 320"))) + (column + (box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#FFFDF8" :color "#3D3A35" + "Basis versus width: explicit basis overrides width; auto basis uses width/content.") + (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#F8FCFE" :column-gap '(10) + (box :flex-basis '(120) :width '(240) :height 2 + :bgcolor "#C7E3F0" :color "#1F2328" :text-align + 'center "basis 120\nwidth 240") + (box :flex-basis 'auto :width '(240) :height 2 :bgcolor + "#96C7DD" :color "#1F2328" :text-align 'center + "basis auto\nwidth 240") + (box :flex '(1 1 (160)) :width '(240) :height 2 + :bgcolor "#5FA4C2" :color "#1F2328" :text-align + 'center "flex tuple\nbasis 160"))) + (column + (box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#FFFDF8" :color "#3D3A35" + "Intrinsic basis keywords: content, min-content, and max-content derive size from text.") + (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none + :bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1 + :column-gap '(10) + (box :flex-shrink 0 :flex-basis 'content :width '(180) + :height 2 :bgcolor "#C7E3F0" :color "#1F2328" + :text-align 'center "content\nnatural text") + (box :flex-shrink 0 :flex-basis 'min-content :width + '(180) :height 2 :bgcolor "#96C7DD" :color + "#1F2328" :text-align 'center + "min-content\nwrap choices") + (box :flex-shrink 0 :flex-basis 'max-content :width + '(180) :height 2 :bgcolor "#5FA4C2" :color + "#1F2328" :text-align 'center + "max-content\nkeeps phrase width"))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#52612F" :bgcolor "#F8FAEF" + :color "#293116" + "Item property: :flex shorthand\nSupported forms: number, none, auto, initial, and (grow shrink basis). Longhands can override shorthand parts.") + (flex :height 7 :padding '(0 (12)) :border "#52612F" + :border-top 'none :bgcolor "#FCFDF6" :flex-wrap 'wrap + :row-gap 1 :column-gap '(8) :align-items 'center + (box :flex 1 :bgcolor "#DDE8B2" :color "#1F2328" + :text-align 'center ":flex 1\n= 1 1 0") + (box :flex 'none :width '(140) :bgcolor "#C5D681" :color + "#1F2328" :text-align 'center + ":flex none\n= 0 0 auto") + (box :flex 'auto :width '(140) :bgcolor "#AABE59" :color + "#1F2328" :text-align 'center + ":flex auto\n= 1 1 auto") + (box :flex 'initial :width '(140) :bgcolor "#8D9E3C" + :color "#1F2328" :text-align 'center + ":flex initial\n= 0 1 auto") + (box :flex '(2 1 (120)) :flex-basis '(160) :bgcolor + "#66762D" :color "#FFFFFF" :text-align 'center + ":flex (2 1 120)\nthen basis 160")) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#7B4D38" :bgcolor "#FFF6F0" + :color "#392319" + "Item property: :align-self\nPer-item cross-axis override. auto inherits :align-items; other values replace the container setting.") + (flex :height 7 :padding '(0 (12)) :border "#7B4D38" + :border-top 'none :bgcolor "#FFFAF7" :align-items + 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap + '(10) + (box :align-self 'auto :width '(118) :height 2 :bgcolor + "#EFC7B6" :color "#1F2328" :text-align 'center + "auto\ninherits start") + (box :align-self 'flex-start :width '(118) :height 2 + :bgcolor "#DBA58D" :color "#1F2328" :text-align + 'center "flex-start") + (box :align-self 'center :width '(118) :height 2 + :bgcolor "#BF7F63" :color "#1F2328" :text-align + 'center "center") + (box :align-self 'flex-end :width '(118) :height 2 + :bgcolor "#9D6048" :color "#FFFFFF" :text-align + 'center "flex-end") + (box :align-self 'stretch :width '(118) :bgcolor + "#7B4D38" :color "#FFFFFF" :text-align 'center + "stretch\nauto cross") + (box :align-self 'normal :width '(118) :bgcolor + "#5D3929" :color "#FFFFFF" :text-align 'center + "normal\nstretch-like")) + (flex :height 6 :padding '(0 (12)) :border "#7B4D38" + :border-top 'none :bgcolor "#FFFAF7" :align-items + 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap + '(10) + (box :align-self 'start :width '(118) :height 2 :bgcolor + "#EFC7B6" :color "#1F2328" :text-align 'center + "start") + (box :align-self 'end :width '(118) :height 2 :bgcolor + "#DBA58D" :color "#1F2328" :text-align 'center + "end") + (box :align-self 'self-start :width '(118) :height 2 + :bgcolor "#BF7F63" :color "#1F2328" :text-align + 'center "self-start") + (box :align-self 'self-end :width '(118) :height 2 + :bgcolor "#9D6048" :color "#FFFFFF" :text-align + 'center "self-end") + (box :align-self 'baseline :width '(118) :height 2 + :bgcolor "#7B4D38" :color "#FFFFFF" :text-align + 'center "baseline")) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(1 (24)) :border "#2F3437" :bgcolor "#FAF7F0" + :color "#1F2328" :text-align 'center + "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.")) diff --git a/examples/grid-reference.ebox b/examples/grid-reference.ebox index b25d9ba..076a741 100644 --- a/examples/grid-reference.ebox +++ b/examples/grid-reference.ebox @@ -1,682 +1,1026 @@ -(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." - :padding '(1 (20)) :border "#2E3740" - :color "#20252B" :bgcolor "#FFFDF8" - :face 'bold :text-align 'center) - - (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) - (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 'none - :bgcolor "#FFF9F4" - (box :layout 'column :width '(206) - (box :content "fixed\n:((120) (74))" :padding '(0 (6)) - :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center) - (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))) - (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) - (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))) - (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) - (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))) - (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) - (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))) - (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) - (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))) - (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) - (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" - (box :content "REPEAT A" :bgcolor "#F1D0AF" :color "#3D2B1F" :text-align 'center) - (box :content "REPEAT B" :bgcolor "#D9AD83" :color "#3D2B1F" :text-align 'center) - (box :content "FR" :bgcolor "#BF7F63" :color "#FFFFFF" :text-align 'center)))) - - (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) - (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 'none - :bgcolor "#F7FBF7" - (box :layout 'column :width '(206) - (box :content "fixed rows\n(1 2)" :padding '(0 (6)) - :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "auto rows\nintrinsic line heights" :padding '(0 (6)) - :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "fractional rows\n1fr / 2fr" :padding '(0 (6)) - :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center) - (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))) - (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) - (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))) - (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) - (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))) - (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) - (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" - (box :content "ROW A" :bgcolor "#DCEBDD" :color "#26402F" :text-align 'center) - (box :content "ROW B" :bgcolor "#A6C6AB" :color "#26402F" :text-align 'center) - (box :content "ROW C" :bgcolor "#7EA887" :color "#FFFFFF" :text-align 'center)))) - - (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) - (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 'none - :bgcolor "#F6FBFD" - (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) - (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))) - (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) - (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))) - (box :layout 'column :width '(206) - (box :content "auto-columns · 1fr\nimplicit remainder" :padding '(0 (6)) - :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (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))) - (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) - (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)) - :border "#416E8A" :bgcolor "#F8FCFE" - (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))) - (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) - (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))) - (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) - (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))) - (box :layout 'column :width '(206) - (box :content "auto-rows · 1fr\nimplicit remainder" :padding '(0 (6)) - :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (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))) - (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) - (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" - (box :content "A" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) - (box :content "B" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (box :content "MINMAX ROW" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center)))) - - (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) - (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 'none - :bgcolor "#F6FBFD" - (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) - (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))) - (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) - (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" - (box :content "C1/R1" :bgcolor "#D9EAF2" :color "#203A4A" :text-align 'center) - (box :content "C1/R2" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center) - (box :content "C2/R1" :bgcolor "#A9D0DE" :color "#203A4A" :text-align 'center) - (box :content "C2/R2" :bgcolor "#8DBDCE" :color "#FFFFFF" :text-align 'center)))) - - (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) - (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 'none - :bgcolor "#F7FCFB" - (box :layout 'column :width '(206) - (box :content "gap scalar\n:gap 1" :padding '(0 (6)) - :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (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))) - (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) - (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))) - (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) - (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))) - (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) - (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))) - (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) - (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))) - (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) - (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" - (box :content "SHORTHAND" :bgcolor "#CDEBE5" :color "#1D3935" :text-align 'center) - (box :content "OVERRIDDEN" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center) - (box :content "SIDES" :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center)))) - - (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) - (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 'none - :bgcolor "#FBF9FF" - (box :layout 'column :width '(206) - (box :content "automatic placement\nno item coordinates" :padding '(0 (6)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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))) - (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) - (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 :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)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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-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)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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 '(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)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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-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)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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 '(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)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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" - (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)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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-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)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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-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\nitem is a parent-child role" :padding '(0 (6)) - :border "#6A5C8B" :bgcolor "#D8D0E8" :color "#332B4B" :text-align 'center) - (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)))) - - (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) - (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 'none - :bgcolor "#FFF9ED" - (box :layout 'column :width '(206) - (box :content "start" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "center" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "end" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "stretch" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "normal" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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)))) - - (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) - (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 'none - :bgcolor "#FFF9ED" - (box :layout 'column :width '(206) - (box :content "start" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "center" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "end" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "stretch" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "normal" :padding '(0 (6)) - :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" :text-align 'center) - (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)))) - - (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) - (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 'none - :bgcolor "#F6FCFC" - (box :layout 'column :width '(206) - (box :content "start" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "center" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "end" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "space-between" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "space-around" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "space-evenly" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "stretch" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "normal" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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)))) - - (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) - (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 'none - :bgcolor "#F6FCFC" - (box :layout 'column :width '(206) - (box :content "start" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "center" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "end" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "space-between" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "space-around" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "space-evenly" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "stretch" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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))) - (box :layout 'column :width '(206) - (box :content "normal" :padding '(0 (6)) - :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" :text-align 'center) - (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" - (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)))) - - (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" - :color "#FFFFFF" :bgcolor "#3D4B55" - :wrap-mode 'word :text-align 'center)) +(column :height '(viewport-height) :width '(viewport) + (box :padding '(1 (20)) :border "#2E3740" :color "#20252B" + :bgcolor "#FFFDF8" :font-weight 'bold :text-align 'center + "Ebox CSS Grid Reference\nA complete, self-explaining gallery of the public Ebox Grid properties and value forms.") + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#B85C3C" :bgcolor "#F1D4C9" + :color "#4C271D" :wrap-mode 'word + "Container property: :grid-template-columns\nTrack sizing accepts fixed sizes, auto, fractional tracks, minmax, and repeat.") + (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 'none :bgcolor "#FFF9F4" + (column :width '(206) + (box :padding '(0 (6)) :border "#B85C3C" + :bgcolor "#F7C8B3" :color "#3D2B1F" + :text-align 'center "fixed\n:((120) (74))") + (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 :bgcolor "#F1D0AF" :color "#3D2B1F" + :text-align 'center "120 PX") + (box :bgcolor "#D9AD83" :color "#3D2B1F" + :text-align 'center "74 PX"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B85C3C" + :bgcolor "#F7C8B3" :color "#3D2B1F" + :text-align 'center + "auto\nauto tracks use intrinsic content") + (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 :bgcolor "#F1D0AF" :color "#3D2B1F" + :text-align 'center "intrinsic") + (box :bgcolor "#D9AD83" :color "#3D2B1F" + :text-align 'center "content"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B85C3C" + :bgcolor "#F7C8B3" :color "#3D2B1F" + :text-align 'center + "fractional symbols\n1fr distributes by weight") + (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 :bgcolor "#F1D0AF" :color "#3D2B1F" + :text-align 'center "1FR") + (box :bgcolor "#D9AD83" :color "#3D2B1F" + :text-align 'center "2FR"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B85C3C" + :bgcolor "#F7C8B3" :color "#3D2B1F" + :text-align 'center + "fractional forms\n(fr FACTOR) is equivalent to NFR") + (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 :bgcolor "#F1D0AF" :color "#3D2B1F" + :text-align 'center "(fr 1)") + (box :bgcolor "#D9AD83" :color "#3D2B1F" + :text-align 'center "(fr 2)"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B85C3C" + :bgcolor "#F7C8B3" :color "#3D2B1F" + :text-align 'center + "minmax\nminimum protects a readable track") + (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 :bgcolor "#F1D0AF" :color "#3D2B1F" + :text-align 'center "74 → 120") + (box :bgcolor "#D9AD83" :color "#3D2B1F" + :text-align 'center "fixed"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B85C3C" + :bgcolor "#F7C8B3" :color "#3D2B1F" + :text-align 'center + "repeat\nrepeat 2 visibly expands the template") + (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" + (box :bgcolor "#F1D0AF" :color "#3D2B1F" + :text-align 'center "REPEAT A") + (box :bgcolor "#D9AD83" :color "#3D2B1F" + :text-align 'center "REPEAT B") + (box :bgcolor "#BF7F63" :color "#FFFFFF" + :text-align 'center "FR")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#537A63" :bgcolor "#DCEBDD" + :color "#26402F" :wrap-mode 'word + "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.") + (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 'none :bgcolor "#F7FBF7" + (column :width '(206) + (box :padding '(0 (6)) :border "#537A63" + :bgcolor "#C8DDCB" :color "#26402F" + :text-align 'center "fixed rows\n(1 2)") + (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 :bgcolor "#DCEBDD" :color "#26402F" + :text-align 'center "ROW 1") + (box :bgcolor "#A6C6AB" :color "#26402F" + :text-align 'center "ROW 2"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#537A63" + :bgcolor "#C8DDCB" :color "#26402F" + :text-align 'center + "auto rows\nintrinsic line heights") + (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 :height 1 :bgcolor "#DCEBDD" :color + "#26402F" :text-align 'center "short") + (box :height 2 :bgcolor "#A6C6AB" :color + "#26402F" :text-align 'center + "tall\ncontent"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#537A63" + :bgcolor "#C8DDCB" :color "#26402F" + :text-align 'center + "fractional rows\n1fr / 2fr") + (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 :bgcolor "#DCEBDD" :color "#26402F" + :text-align 'center "1FR") + (box :bgcolor "#A6C6AB" :color "#26402F" + :text-align 'center "2FR"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#537A63" + :bgcolor "#C8DDCB" :color "#26402F" + :text-align 'center + "fractional row forms\n(fr 1) / (fr 2)") + (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 :bgcolor "#DCEBDD" :color "#26402F" + :text-align 'center "(fr 1)") + (box :bgcolor "#A6C6AB" :color "#26402F" + :text-align 'center "(fr 2)"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#537A63" + :bgcolor "#C8DDCB" :color "#26402F" + :text-align 'center + "minmax rows\n(min 1 / max 3)") + (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 :bgcolor "#DCEBDD" :color "#26402F" + :text-align 'center "MINMAX") + (box :bgcolor "#A6C6AB" :color "#26402F" + :text-align 'center "FIXED"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#537A63" + :bgcolor "#C8DDCB" :color "#26402F" + :text-align 'center + "repeat rows\nrepeat 3 expands lines") + (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" + (box :bgcolor "#DCEBDD" :color "#26402F" + :text-align 'center "ROW A") + (box :bgcolor "#A6C6AB" :color "#26402F" + :text-align 'center "ROW B") + (box :bgcolor "#7EA887" :color "#FFFFFF" + :text-align 'center "ROW C")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#416E8A" :bgcolor "#D9EAF2" + :color "#203A4A" :wrap-mode 'word + "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.") + (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 'none :bgcolor "#F6FBFD" + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-columns · fixed\n:grid-auto-columns ((64))") + (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 :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "B") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-columns · auto\nintrinsic implicit width") + (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 :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "LONG C") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-columns · 1fr\nimplicit remainder") + (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 :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "1FR") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-columns · minmax\nminimum implicit width") + (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)) + :border "#416E8A" :bgcolor "#F8FCFE" + (box :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "MINMAX") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-rows · fixed\n:grid-auto-rows 2") + (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 :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "B") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "AUTO ROW"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-rows · auto\nintrinsic implicit height") + (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 :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "B") + (box :height 2 :bgcolor "#A9D0DE" :color + "#203A4A" :text-align 'center + "TALL\nAUTO ROW"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-rows · 1fr\nimplicit remainder") + (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 :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "B") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "1FR ROW"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "auto-rows · minmax\nbounded implicit height") + (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" + (box :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "A") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "B") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "MINMAX ROW")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#416E8A" :bgcolor "#D9EAF2" + :color "#203A4A" :wrap-mode 'word + "Container property: :grid-auto-flow\nAutomatic placement is row-major or column-major. Ebox intentionally supports row and column, not the browser dense variants.") + (grid :grid-template-columns '((206) (206)) :grid-auto-rows + 'auto :gap '(1 (10)) :justify-content 'space-between + :padding '(0 (12)) :border "#416E8A" :border-top 'none + :bgcolor "#F6FBFD" + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "row\nfills each row before creating the next") + (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 :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "1A") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "1B") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "2A") + (box :bgcolor "#8DBDCE" :color "#203A4A" + :text-align 'center "2B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#416E8A" + :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center + "column\nfills each column before creating the next") + (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" + (box :bgcolor "#D9EAF2" :color "#203A4A" + :text-align 'center "C1/R1") + (box :bgcolor "#C3DFEA" :color "#203A4A" + :text-align 'center "C1/R2") + (box :bgcolor "#A9D0DE" :color "#203A4A" + :text-align 'center "C2/R1") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C2/R2")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#3D7068" :bgcolor "#CDEBE5" + :color "#1D3935" :wrap-mode 'word + "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.") + (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 'none :bgcolor "#F7FCFB" + (column :width '(206) + (box :padding '(0 (6)) :border "#3D7068" + :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "gap scalar\n:gap 1") + (grid :width '(206) :height 5 + :grid-template-columns '((94) (94)) + :grid-template-rows '(1 1) :gap 1 :border + "#3D7068" :bgcolor "#F7FCFB" + (box :bgcolor "#CDEBE5" :color "#1D3935" + :text-align 'center "A") + (box :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "B") + (box :bgcolor "#71BDB0" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#3D7068" + :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center + "gap pair\n:gap (1 (14))") + (grid :width '(206) :height 5 + :grid-template-columns '((94) (94)) + :grid-template-rows '(1 1) :gap '(1 (14)) + :border "#3D7068" :bgcolor "#F7FCFB" + (box :bgcolor "#CDEBE5" :color "#1D3935" + :text-align 'center "ROW GAP") + (box :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "COLUMN GAP") + (box :bgcolor "#71BDB0" :color "#FFFFFF" + :text-align 'center "PAIR"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#3D7068" + :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "row-gap\n:row-gap 2") + (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 :bgcolor "#CDEBE5" :color "#1D3935" + :text-align 'center "A") + (box :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "B") + (box :bgcolor "#71BDB0" :color "#FFFFFF" + :text-align 'center "ROW 2"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#3D7068" + :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center + "column-gap\n:column-gap (28)") + (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 :bgcolor "#CDEBE5" :color "#1D3935" + :text-align 'center "LEFT") + (box :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "RIGHT") + (box :bgcolor "#71BDB0" :color "#FFFFFF" + :text-align 'center "LONG GAP"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#3D7068" + :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center + "aliases\n:grid-row-gap / :grid-column-gap") + (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 :bgcolor "#CDEBE5" :color "#1D3935" + :text-align 'center "ROW ALIAS") + (box :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "COLUMN ALIAS") + (box :bgcolor "#71BDB0" :color "#FFFFFF" + :text-align 'center "OVERRIDE"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#3D7068" + :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center + "override\nexplicit sides win over :gap") + (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" + (box :bgcolor "#CDEBE5" :color "#1D3935" + :text-align 'center "SHORTHAND") + (box :bgcolor "#9FD5CB" :color "#1D3935" + :text-align 'center "OVERRIDDEN") + (box :bgcolor "#71BDB0" :color "#FFFFFF" + :text-align 'center "SIDES")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#6A5C8B" :bgcolor "#E7E2F1" + :color "#332B4B" :wrap-mode 'word + "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.") + (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 'none :bgcolor "#FBF9FF" + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + "automatic placement\nno item coordinates") + (grid :width '(206) :height 4 + :grid-template-columns '((58) (58) (58)) + :grid-template-rows '(1 1) :gap '(0 (4)) + :border "#6A5C8B" :bgcolor "#FBF9FF" + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "A") + (box :bgcolor "#CBC2E3" :color "#332B4B" + :text-align 'center "B") + (box :bgcolor "#AFA3D1" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-column 2\none column start") + (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 :bgcolor "#CBC2E3" + :color "#332B4B" :text-align 'center + "C2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "AUTO"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-row 2\none row start") + (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-row 2 :bgcolor "#CBC2E3" :color + "#332B4B" :text-align 'center "R2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "AUTO"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-column (1 :span 2)\nspan in the column value") + (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 '(1 :span 2) :bgcolor + "#CBC2E3" :color "#332B4B" + :text-align 'center "C1–C2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "C3"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-row (1 :span 2)\nspan in the row value") + (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-row '(1 :span 2) :bgcolor + "#CBC2E3" :color "#332B4B" + :text-align 'center "R1–R2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "OTHER"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-column (1 3)\nexplicit end line") + (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 '(1 3) :bgcolor + "#CBC2E3" :color "#332B4B" + :text-align 'center "C1→C2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "C3"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-row (1 3)\nexplicit end line") + (grid :width '(206) :height 4 + :grid-template-columns '((58) (58) (58)) + :grid-template-rows '(1 1 1) :gap '(0 (4)) + :border "#6A5C8B" :bgcolor "#FBF9FF" + (box :grid-row '(1 3) :bgcolor "#CBC2E3" + :color "#332B4B" :text-align 'center + "R1→R2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "OTHER"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-column-span 2\nlonghand span") + (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-span 2 :bgcolor + "#CBC2E3" :color "#332B4B" + :text-align 'center "C1–C2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "C3"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + ":grid-row-span 2\nlonghand span") + (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-row-span 2 :bgcolor "#CBC2E3" + :color "#332B4B" :text-align 'center + "R1–R2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "OTHER"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#6A5C8B" + :bgcolor "#D8D0E8" :color "#332B4B" + :text-align 'center + "direct child placement\nitem is a parent-child role") + (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 :bgcolor + "#CBC2E3" :color "#332B4B" + :text-align 'center "DIRECT\nC2/R2") + (box :bgcolor "#E7E2F1" :color "#332B4B" + :text-align 'center "AUTO")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#B07836" :bgcolor "#F3E4C7" + :color "#513718" :wrap-mode 'word + "Container property: :justify-items\nInline-axis item alignment supports start, center, end, stretch, and normal. Fixed-size items make the first three positions visible.") + (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 'none :bgcolor "#FFF9ED" + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "start") + (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) :bgcolor "#F3E4C7" + :color "#513718" :text-align 'center + "START"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "center") + (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) :bgcolor "#F3E4C7" + :color "#513718" :text-align 'center + "CENTER"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "end") + (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) :bgcolor "#F3E4C7" + :color "#513718" :text-align 'center + "END"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "stretch") + (grid :width '(206) :height 3 + :grid-template-columns '((194)) + :grid-template-rows '(3) :justify-items + 'stretch :align-items 'center :border + "#B07836" :bgcolor "#FFF9ED" + (box :bgcolor "#F3E4C7" :color "#513718" + :text-align 'center + "AUTO WIDTH\nSTRETCH"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "normal") + (grid :width '(206) :height 3 + :grid-template-columns '((194)) + :grid-template-rows '(3) :justify-items + 'normal :align-items 'center :border + "#B07836" :bgcolor "#FFF9ED" + (box :bgcolor "#F3E4C7" :color "#513718" + :text-align 'center + "AUTO WIDTH\nNORMAL")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#B07836" :bgcolor "#F3E4C7" + :color "#513718" :wrap-mode 'word + "Container property: :align-items\nBlock-axis item alignment supports start, center, end, stretch, and normal. The fixed row height exposes the vertical offset.") + (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 'none :bgcolor "#FFF9ED" + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "start") + (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 :bgcolor + "#F3E4C7" :color "#513718" + :text-align 'center "START"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "center") + (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 :bgcolor + "#F3E4C7" :color "#513718" + :text-align 'center "CENTER"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "end") + (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 :bgcolor + "#F3E4C7" :color "#513718" + :text-align 'center "END"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "stretch") + (grid :width '(206) :height 5 + :grid-template-columns '((194)) + :grid-template-rows '(5) :justify-items + 'center :align-items 'stretch :border + "#B07836" :bgcolor "#FFF9ED" + (box :bgcolor "#F3E4C7" :color "#513718" + :text-align 'center + "AUTO HEIGHT\nSTRETCH"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#B07836" + :bgcolor "#EAD2A6" :color "#513718" + :text-align 'center "normal") + (grid :width '(206) :height 5 + :grid-template-columns '((194)) + :grid-template-rows '(5) :justify-items + 'center :align-items 'normal :border + "#B07836" :bgcolor "#FFF9ED" + (box :bgcolor "#F3E4C7" :color "#513718" + :text-align 'center "NORMAL")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#2F7180" :bgcolor "#CFE8EA" + :color "#1E4148" :wrap-mode 'word + "Container property: :justify-content\nInline-axis track packing supports start, center, end, space-between, space-around, space-evenly, stretch, and normal.") + (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 'none :bgcolor "#F6FCFC" + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "start") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "center") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "end") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "space-between") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "space-around") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "space-evenly") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "stretch") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "normal") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(0 (18)) :border "#2F7180" :bgcolor "#CFE8EA" + :color "#1E4148" :wrap-mode 'word + "Container property: :align-content\nBlock-axis track packing mirrors justify-content: start, center, end, space-between, space-around, space-evenly, stretch, and normal.") + (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 'none :bgcolor "#F6FCFC" + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "start") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "center") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "end") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "space-between") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "space-around") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "space-evenly") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "stretch") + (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 :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C"))) + (column :width '(206) + (box :padding '(0 (6)) :border "#2F7180" + :bgcolor "#B5DDE0" :color "#1E4148" + :text-align 'center "normal") + (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" + (box :bgcolor "#CFE8EA" :color "#1E4148" + :text-align 'center "A") + (box :bgcolor "#9ACED2" :color "#1E4148" + :text-align 'center "B") + (box :bgcolor "#8DBDCE" :color "#FFFFFF" + :text-align 'center "C")))) + (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") + (box :padding '(1 (16)) :border "#2E3740" :color "#FFFFFF" + :bgcolor "#3D4B55" :wrap-mode 'word :text-align 'center + "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).")) diff --git a/examples/public-layout-gallery.ebox b/examples/public-layout-gallery.ebox index 9158e86..c1e17e1 100644 --- a/examples/public-layout-gallery.ebox +++ b/examples/public-layout-gallery.ebox @@ -1,98 +1,61 @@ -(box :layout 'column - (box :content "Ebox Playground\nPixel-precise layout, composed only from public nodes." - :width '(720) - :padding '(1 (18)) - :border "#8F432F" - :color "#252A2E" - :bgcolor "#FFFDF8" - :face 'bold - :text-align 'center) +(column + (box :width '(720) :padding '(1 (18)) :border "#8F432F" :color + "#252A2E" :bgcolor "#FFFDF8" :font-weight 'bold :text-align 'center + "Ebox Playground\nPixel-precise layout, composed only from public nodes.") (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)) - :border "#C97252" - :border-bottom 'none - :color "#252A2E" - :bgcolor "#F1D4C9" - :wrap-mode 'word) - (box :layout 'grid - :width '(720) - :grid-template-columns '((220) 1fr) - :gap '(1 (12)) - :border "#C97252" - :bgcolor "#FFF9F5" - (box :content "FIXED TRACK\n220 px stays exact" - :width '(220) :padding '(1 0) :text-align 'center - :color "#252A2E" :bgcolor "#F1D4C9") - (box :content "FRACTIONAL TRACK\n1fr receives the remaining width" - :width '(486) :padding '(1 0) :text-align 'center - :color "#252A2E" :bgcolor "#F9E8E0") - (box :content "The Grid owns one definite width; its tracks divide that space without competing viewport calculations." - :grid-column '(1 :span 2) :width '(718) :padding '(1 0) - :color "#663322" :bgcolor "#FFFDF8" - :text-align 'center :wrap-mode 'word)) + (box :width '(720) :padding '(0 (16)) :border "#C97252" + :border-bottom 'none :color "#252A2E" :bgcolor "#F1D4C9" + :wrap-mode 'word + "01 FIXED + FRACTIONAL\nA definite Grid width divides into one exact track and one flexible track.") + (grid :width '(720) :grid-template-columns '((220) 1fr) :gap + '(1 (12)) :border "#C97252" :bgcolor "#FFF9F5" + (box :width '(220) :padding '(1 0) :text-align 'center :color + "#252A2E" :bgcolor "#F1D4C9" + "FIXED TRACK\n220 px stays exact") + (box :width '(486) :padding '(1 0) :text-align 'center :color + "#252A2E" :bgcolor "#F9E8E0" + "FRACTIONAL TRACK\n1fr receives the remaining width") + (box :grid-column '(1 :span 2) :width '(718) :padding '(1 0) + :color "#663322" :bgcolor "#FFFDF8" :text-align 'center + :wrap-mode 'word + "The Grid owns one definite width; its tracks divide that space without competing viewport calculations.")) (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)) - :border "#6D8A73" - :border-bottom 'none - :color "#252A2E" - :bgcolor "#DCEBDD" - :wrap-mode 'word) - (box :layout 'grid - :width '(720) - :grid-template-columns '((210) (210) 1fr) - :gap '(1 (10)) - :border "#6D8A73" - :bgcolor "#F7FBF7" - (box :content "SPAN 1 → 3" :grid-column '(1 :span 2) - :width '(430) :padding '(1 0) :text-align 'center - :color "#24422D" :bgcolor "#DCEBDD") - (box :content "COLUMN 3" :grid-column 3 :grid-row 1 - :width '(278) :padding '(1 0) :text-align 'center - :color "#24422D" :bgcolor "#C8DDCB") - (box :content "ROW 2 / COL 1" :grid-column 1 :grid-row 2 - :width '(210) :padding '(1 0) :text-align 'center - :color "#24422D" :bgcolor "#EDF5EE") - (box :content "AUTO PLACED" :width '(210) :padding '(1 0) - :text-align 'center :color "#24422D" :bgcolor "#E3F0E5") - (box :content "STABLE CELLS" :width '(278) :padding '(1 0) - :text-align 'center :color "#24422D" :bgcolor "#D4E6D7")) + (box :width '(720) :padding '(0 (16)) :border "#6D8A73" + :border-bottom 'none :color "#252A2E" :bgcolor "#DCEBDD" + :wrap-mode 'word + "02 EXPLICIT PLACEMENT\nSpan columns, target cells, and leave the remaining nodes to auto placement.") + (grid :width '(720) :grid-template-columns '((210) (210) 1fr) :gap + '(1 (10)) :border "#6D8A73" :bgcolor "#F7FBF7" + (box :grid-column '(1 :span 2) :width '(430) :padding '(1 0) + :text-align 'center :color "#24422D" :bgcolor "#DCEBDD" + "SPAN 1 → 3") + (box :grid-column 3 :grid-row 1 :width '(278) :padding '(1 0) + :text-align 'center :color "#24422D" :bgcolor "#C8DDCB" + "COLUMN 3") + (box :grid-column 1 :grid-row 2 :width '(210) :padding '(1 0) + :text-align 'center :color "#24422D" :bgcolor "#EDF5EE" + "ROW 2 / COL 1") + (box :width '(210) :padding '(1 0) :text-align 'center :color + "#24422D" :bgcolor "#E3F0E5" "AUTO PLACED") + (box :width '(278) :padding '(1 0) :text-align 'center :color + "#24422D" :bgcolor "#D4E6D7" "STABLE CELLS")) (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)) - :border "#4E7890" - :border-bottom 'none - :color "#252A2E" - :bgcolor "#D9EAF2" - :wrap-mode 'word) - (box :layout 'flex - :width '(720) - :flex-flow '(row wrap) - :gap '(1 (12)) - :padding '(1 (12)) - :border "#4E7890" - :bgcolor "#F7FAFC" - (box :content "COLUMN\nvertical composition" - :flex-grow 1 :flex-shrink 1 :flex-basis '(200) - :min-width '(180) :padding '(1 (12)) - :color "#193846" :bgcolor "#D9EAF2") - (box :content "FLEX\nwrap and distribute" - :flex-grow 1 :flex-shrink 1 :flex-basis '(200) - :min-width '(180) :padding '(1 (12)) - :color "#3F3655" :bgcolor "#E7E2F1") - (box :content "GRID\nplace in two dimensions" - :flex-grow 1 :flex-shrink 1 :flex-basis '(200) - :min-width '(180) :padding '(1 (12)) - :color "#6B3020" :bgcolor "#F1D4C9")) + (box :width '(720) :padding '(0 (16)) :border "#4E7890" + :border-bottom 'none :color "#252A2E" :bgcolor "#D9EAF2" + :wrap-mode 'word + "03 PUBLIC COMPOSITION\nColumn, Flex, and Grid share the same public node contract.") + (flex :width '(720) :flex-flow '(row wrap) :gap '(1 (12)) :padding + '(1 (12)) :border "#4E7890" :bgcolor "#F7FAFC" + (box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width + '(180) :padding '(1 (12)) :color "#193846" :bgcolor + "#D9EAF2" "COLUMN\nvertical composition") + (box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width + '(180) :padding '(1 (12)) :color "#3F3655" :bgcolor + "#E7E2F1" "FLEX\nwrap and distribute") + (box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width + '(180) :padding '(1 (12)) :color "#6B3020" :bgcolor + "#F1D4C9" "GRID\nplace in two dimensions")) (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)) - :border "#8D887F" - :color "#4D5651" - :bgcolor "#EEEAE2" - :wrap-mode 'word)) + (box :width '(720) :padding '(0 (16)) :border "#8D887F" :color + "#4D5651" :bgcolor "#EEEAE2" :wrap-mode 'word + "AUTHOR FORMS String · text · box · row · column · flex · grid")) diff --git a/examples/responsive-reference.ebox b/examples/responsive-reference.ebox index 6cd0c85..7b54a53 100644 --- a/examples/responsive-reference.ebox +++ b/examples/responsive-reference.ebox @@ -1,65 +1,57 @@ -(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") - (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) - (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 'none - :bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word) - (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" - :text-align 'center) - (box :content "Save" :width '(88) :padding '(0 (8)) - :border "#D97706" :bgcolor "#FEF3C7" :color "#111827" - :text-align 'center) - (box :content "Format" :width '(96) :padding '(0 (8)) - :border "#16A34A" :bgcolor "#DCFCE7" :color "#14532D" - :text-align 'center) - (box :content "Sample" :width '(104) :padding '(0 (8)) - :border "#0284C7" :bgcolor "#E0F2FE" :color "#0C4A6E" - :text-align 'center) - (box :content "Write" :width '(88) :padding '(0 (8)) - :border "#9333EA" :bgcolor "#F3E8FF" :color "#3B0764" - :text-align 'center)) - (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 'none - :bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word) - (box :layout 'flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1 - :padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF" - :justify-content 'center - (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." - :padding '(0 (16)) :border "#475569" - :bgcolor "#F8FAFC" :color "#0F172A" :wrap-mode 'word)) +(column :margin-left 1 :margin-top 1 :padding '(1 2 1 2) :bgcolor + "linen" + (box :padding '(1 (18)) :border "#334155" :text-align 'center + :color "#000" :bgcolor "ghost white" + "Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout.") + (box :height 1) + (box :padding '(0 (16)) :border "#0F766E" :bgcolor "#F0FDFA" + :color "#134E4A" :wrap-mode 'word + "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.") + (box :height 1) + (box :padding '(0 (16)) :border "#EA580C" :border-bottom 'none + :bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word + "Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps.") + (flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1 + :padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5" + (box :width '(96) :padding '(0 (8)) :border "#EA580C" + :bgcolor "#FED7AA" :color "#111827" :text-align + 'center "Render") + (box :width '(88) :padding '(0 (8)) :border "#D97706" + :bgcolor "#FEF3C7" :color "#111827" :text-align + 'center "Save") + (box :width '(96) :padding '(0 (8)) :border "#16A34A" + :bgcolor "#DCFCE7" :color "#14532D" :text-align + 'center "Format") + (box :width '(104) :padding '(0 (8)) :border "#0284C7" + :bgcolor "#E0F2FE" :color "#0C4A6E" :text-align + 'center "Sample") + (box :width '(88) :padding '(0 (8)) :border "#9333EA" + :bgcolor "#F3E8FF" :color "#3B0764" :text-align + 'center "Write")) + (box :height 1) + (box :padding '(0 (16)) :border "#2563EB" :border-bottom 'none + :bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word + "Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow.") + (flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1 + :padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF" + :justify-content 'center + (box :flex '(1 1 (210)) :min-width '(180) :max-width + '(280) :padding '(0 (10)) :bgcolor "#DBEAFE" :color + "#111827" :wrap-mode 'word + "Overview\nThe row uses the current preview width automatically.") + (box :flex '(1 1 (210)) :min-width '(180) :max-width + '(300) :padding '(0 (10)) :bgcolor "#E0E7FF" :color + "#111827" :wrap-mode 'word + "Editor\nDrag slowly or quickly; resize rendering follows the viewport.") + (box :flex '(1 1 (210)) :min-width '(180) :max-width + '(320) :padding '(0 (10)) :bgcolor "#EDE9FE" :color + "#111827" :wrap-mode 'word + "Preview\nThe preview updates from the current viewport width.") + (box :flex '(1 1 (210)) :min-width '(180) :max-width + '(280) :padding '(0 (10)) :bgcolor "#CFFAFE" :color + "#164E63" :wrap-mode 'word + "Flow\nCards keep readable widths instead of overflowing.")) + (box :height 1) + (box :padding '(0 (16)) :border "#475569" :bgcolor "#F8FAFC" + :color "#0F172A" :wrap-mode 'word + "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.")) diff --git a/scripts/ebox-playground-flex-resize-evaluator.el b/scripts/ebox-playground-flex-resize-evaluator.el index d2c967b..0b69d9a 100644 --- a/scripts/ebox-playground-flex-resize-evaluator.el +++ b/scripts/ebox-playground-flex-resize-evaluator.el @@ -120,7 +120,7 @@ concurrent cache warming CPU work." (completed-without-error nil) (ebox-playground-flex-resize-evaluator--output-lines nil) (checks nil)) - (condition-case error-data + (condition-case-unless-debug error-data (progn (delete-other-windows) (setq source diff --git a/tests/ebox-playground-tests.el b/tests/ebox-playground-tests.el index ec1a38a..79d6256 100644 --- a/tests/ebox-playground-tests.el +++ b/tests/ebox-playground-tests.el @@ -33,6 +33,13 @@ (ebox-playground-test--forms-named name child)) form)))) +(defun ebox-playground-test--form-children (form) + "Return canonical author children from DSL FORM." + (let ((items (cdr form))) + (while (keywordp (car items)) + (setq items (cddr items))) + items)) + (defun ebox-playground-test--line-widths (text) "Return rendered pixel widths for every line in TEXT." (mapcar #'ebox-string-pixel-width @@ -115,15 +122,17 @@ ebox-playground-directory)))) (dolist (box (ebox-playground-test--boxes form)) (let ((properties (cdr box))) - (when (and (memq :content properties) + (when (and (cl-some #'stringp + (ebox-playground-test--form-children box)) (memq :bgcolor properties)) (should (memq :color properties)))))))) (ert-deftest ebox-playground-uses-only-public-layout-apis () "The example should build and render through the public Ebox entry point." - (let* ((node (ebox-playground-view)) + (let* ((source (ebox-playground--read-file ebox-playground-default-file)) + (node (ebox-playground-view)) (rendered (substring-no-properties (ebox-render node)))) - (should (eq (plist-get node :ebox-type) 'stack)) + (should (eq (car source) 'column)) (dolist (label '("Ebox Playground" "FIXED + FRACTIONAL" "EXPLICIT PLACEMENT" "PUBLIC COMPOSITION")) (should (string-match-p (regexp-quote label) rendered))))) @@ -234,7 +243,7 @@ (lambda (&optional _frame) 8))) (with-temp-buffer (setq buffer-file-name "/tmp/ebox-playground-viewport-render.ebox") - (insert "(box :content \"viewport\" :width '(viewport) :height 1)") + (insert "(box :width '(viewport) :height 1 \"viewport\")") (ebox-dsl-mode) (ebox-dsl-render) (with-current-buffer preview @@ -281,7 +290,7 @@ (with-temp-buffer (setq source (current-buffer) buffer-file-name "/tmp/ebox-playground-two-window.ebox") - (insert "(box :content \"two windows\" :width '(viewport) :height 1)") + (insert "(box :width '(viewport) :height 1 \"two windows\")") (ebox-dsl-mode) (cl-letf (((symbol-function 'window-body-width) (lambda (&optional _window _pixelwise) 987)) @@ -313,7 +322,7 @@ (lambda (&optional _frame) 8))) (with-temp-buffer (setq buffer-file-name "/tmp/ebox-playground-viewport-resize.ebox") - (insert "(box :content \"viewport\" :width '(viewport) :height 1)") + (insert "(box :width '(viewport) :height 1 \"viewport\")") (ebox-dsl-mode) (ebox-dsl-render) (setq window-width 1234) @@ -417,7 +426,7 @@ (error "Injected preview render failure")))) (should-error (ebox-playground--render-to-preview-buffer - preview (ebox-create :content "rollback")))) + preview (ebox-build '(box "rollback"))))) (with-current-buffer preview (should-not truncate-lines) (should (equal face-remapping-alist @@ -481,21 +490,21 @@ (let* ((ebox-viewport-width viewport) (lines (ebox-string-lines (ebox-render (ebox-playground-view path viewport)))) - (spacer-lines + (separator-lines (cl-remove-if-not (lambda (line) (equal (get-text-property 0 'display line) `(space :width (,viewport)))) lines))) - (should (= (length spacer-lines) 11)) - (dolist (line spacer-lines) + (should (= (length separator-lines) 11)) + (dolist (line separator-lines) (should (equal (get-text-property 0 'display line) `(space :width (,viewport)))) (should (= (ebox-string-pixel-width line) viewport)) (should (equal (get-text-property 0 'face line) '(:background "#FAF7F0")))))))) -(ert-deftest ebox-playground-public-layout-gallery-fixed-spacers-paint-the-canvas () +(ert-deftest ebox-playground-public-layout-gallery-fixed-separators-paint-the-canvas () "The default public gallery fixed separators should keep canvas coverage." (let* ((path (expand-file-name "examples/public-layout-gallery.ebox" ebox-playground-directory)) @@ -512,11 +521,11 @@ (ert-deftest ebox-playground-grid-reference-covers-public-properties () "The Grid reference should cover every public property and supported value form." - (let ((source (with-temp-buffer - (insert-file-contents - (expand-file-name "examples/grid-reference.ebox" - ebox-playground-directory)) - (buffer-string)))) + (let ((source + (prin1-to-string + (ebox-playground--read-file + (expand-file-name "examples/grid-reference.ebox" + ebox-playground-directory))))) (dolist (property '(:grid-template-columns :grid-template-rows :grid-auto-columns :grid-auto-rows :grid-auto-flow :grid-row-gap :grid-column-gap :gap :row-gap @@ -565,7 +574,7 @@ (unwind-protect (with-temp-buffer (setq buffer-file-name "/tmp/ebox-playground-render-test.ebox") - (insert "(box :content \"Rendered from .ebox\" :width '(240))") + (insert "(box :width '(240) \"Rendered from .ebox\")") (ebox-dsl-mode) (ebox-dsl-render) (should (eq (window-buffer (selected-window)) (current-buffer))) @@ -578,16 +587,19 @@ (ert-deftest ebox-playground-evaluates-property-expressions () "Evaluate executable property values while preserving quoted constants." (let* ((form (ebox-playground--evaluate-form - '(box :content "Dynamic property values" - :width (ebox-playground-test--dynamic-width) + '(box :width (ebox-playground-test--dynamic-width) :color (ebox-playground-test--dynamic-color) :padding '(0 (4)) - :text-align 'center))) + :text-align 'center + "Dynamic property values"))) (node (ebox-build form))) - (should (equal (plist-get node :width) 240)) - (should (equal (plist-get node :color) "#123456")) - (should (equal (plist-get node :padding-left-pixel) 4)) - (should (eq (plist-get node :text-align) 'center)))) + (should (equal (ebox-style-node-specified-value node :width) '(240))) + (should (equal (ebox-style-node-specified-value node :color) "#123456")) + (should (equal + (ebox-style-node-specified-value node :padding-left) + '(4))) + (should (eq (ebox-style-node-specified-value node :text-align) + 'center)))) (provide 'ebox-playground-tests)