geekinney/ebox-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

examples: adopt canonical Ebox property grammar

Browse Source
This commit is contained in:
Kinneyzhang 2026-08-28 22:07:18 +08:00
parent 2e9a303424
commit 68996998af
5 changed files with 88 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/basic.ebox
View File

@ -1,3 +1,3 @@
(box :box-sizing 'border-box :padding '(1 (12)) :border t (box :box-sizing 'border-box :padding '(1 (12)) :border "#2563EB"
:border-color "#2563EB" :bgcolor "#EFF6FF" :color "#1E3A8A" :bgcolor "#EFF6FF" :color "#1E3A8A"
"Playground file") "Playground file")

105
examples/grid-reference.ebox
View File

@ -8,8 +8,9 @@
"Container property: :grid-template-columns\nTrack sizing accepts fixed sizes, auto, fractional tracks, minmax, and repeat.") "Container property: :grid-template-columns\nTrack sizing accepts fixed sizes, auto, fractional tracks, minmax, and repeat.")
(grid :grid-template-columns '((206) (206) (206)) (grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#B85C3C" 'space-between :padding '(0 (12)) :border-right "#B85C3C"
:border-top 'none :bgcolor "#FFF9F4" :border-bottom "#B85C3C" :border-left "#B85C3C"
:bgcolor "#FFF9F4"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#B85C3C" (box :padding '(0 (6)) :border "#B85C3C"
:bgcolor "#F7C8B3" :color "#3D2B1F" :bgcolor "#F7C8B3" :color "#3D2B1F"
@ -39,9 +40,22 @@
(box :padding '(0 (6)) :border "#B85C3C" (box :padding '(0 (6)) :border "#B85C3C"
:bgcolor "#F7C8B3" :color "#3D2B1F" :bgcolor "#F7C8B3" :color "#3D2B1F"
:text-align 'center :text-align 'center
"fractional symbols\n1fr distributes by weight") "intrinsic keywords\nmin-content / max-content")
(grid :width '(206) :height 3 :padding '(0 (6)) (grid :width '(206) :height 3 :padding '(0 (6))
:grid-template-columns '(1fr 2fr) :grid-template-columns '(min-content max-content)
:grid-template-rows '(2) :gap '(0 (6))
:border "#B85C3C" :bgcolor "#FFF8F2"
(box :bgcolor "#F1D0AF" :color "#3D2B1F"
:text-align 'center "alpha beta")
(box :bgcolor "#D9AD83" :color "#3D2B1F"
:text-align 'center "gamma delta")))
(column :width '(206)
(box :padding '(0 (6)) :border "#B85C3C"
:bgcolor "#F7C8B3" :color "#3D2B1F"
:text-align 'center
"fractional tracks\n(fr N) distributes by weight")
(grid :width '(206) :height 3 :padding '(0 (6))
:grid-template-columns '((fr 1) (fr 2))
:grid-template-rows '(2) :gap '(0 (6)) :grid-template-rows '(2) :gap '(0 (6))
:border "#B85C3C" :bgcolor "#FFF8F2" :border "#B85C3C" :bgcolor "#FFF8F2"
(box :bgcolor "#F1D0AF" :color "#3D2B1F" (box :bgcolor "#F1D0AF" :color "#3D2B1F"
@ -97,8 +111,9 @@
"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.") "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 :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#537A63" 'space-between :padding '(0 (12)) :border-right "#537A63"
:border-top 'none :bgcolor "#F7FBF7" :border-bottom "#537A63" :border-left "#537A63"
:bgcolor "#F7FBF7"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#537A63" (box :padding '(0 (6)) :border "#537A63"
:bgcolor "#C8DDCB" :color "#26402F" :bgcolor "#C8DDCB" :color "#26402F"
@ -130,10 +145,10 @@
(box :padding '(0 (6)) :border "#537A63" (box :padding '(0 (6)) :border "#537A63"
:bgcolor "#C8DDCB" :color "#26402F" :bgcolor "#C8DDCB" :color "#26402F"
:text-align 'center :text-align 'center
"fractional rows\n1fr / 2fr") "fractional rows\n(fr 1) / (fr 2)")
(grid :width '(206) :height 6 :padding '(0 (6)) (grid :width '(206) :height 6 :padding '(0 (6))
:grid-template-columns '((192)) :grid-template-columns '((192))
:grid-template-rows '(1fr 2fr) :gap :grid-template-rows '((fr 1) (fr 2)) :gap
'(0 (6)) :border "#537A63" :bgcolor '(0 (6)) :border "#537A63" :bgcolor
"#F8FCF8" "#F8FCF8"
(box :bgcolor "#DCEBDD" :color "#26402F" (box :bgcolor "#DCEBDD" :color "#26402F"
@ -190,8 +205,9 @@
"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.") "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 :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#416E8A" 'space-between :padding '(0 (12)) :border-right "#416E8A"
:border-top 'none :bgcolor "#F6FBFD" :border-bottom "#416E8A" :border-left "#416E8A"
:bgcolor "#F6FBFD"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#416E8A" (box :padding '(0 (6)) :border "#416E8A"
:bgcolor "#C3DFEA" :color "#203A4A" :bgcolor "#C3DFEA" :color "#203A4A"
@ -230,11 +246,11 @@
(box :padding '(0 (6)) :border "#416E8A" (box :padding '(0 (6)) :border "#416E8A"
:bgcolor "#C3DFEA" :color "#203A4A" :bgcolor "#C3DFEA" :color "#203A4A"
:text-align 'center :text-align 'center
"auto-columns · 1fr\nimplicit remainder") "auto-columns · (fr 1)\nimplicit remainder")
(grid :width '(206) :height 4 (grid :width '(206) :height 4
:grid-template-columns '((64)) :grid-template-columns '((64))
:grid-template-rows '(1 1) :grid-template-rows '(1 1)
:grid-auto-columns '1fr :grid-auto-flow :grid-auto-columns '(fr 1) :grid-auto-flow
'column :gap '(0 (6)) :border "#416E8A" 'column :gap '(0 (6)) :border "#416E8A"
:bgcolor "#F8FCFE" :bgcolor "#F8FCFE"
(box :bgcolor "#D9EAF2" :color "#203A4A" (box :bgcolor "#D9EAF2" :color "#203A4A"
@ -297,11 +313,11 @@
(box :padding '(0 (6)) :border "#416E8A" (box :padding '(0 (6)) :border "#416E8A"
:bgcolor "#C3DFEA" :color "#203A4A" :bgcolor "#C3DFEA" :color "#203A4A"
:text-align 'center :text-align 'center
"auto-rows · 1fr\nimplicit remainder") "auto-rows · (fr 1)\nimplicit remainder")
(grid :width '(206) :height 6 (grid :width '(206) :height 6
:grid-template-columns '((94) (94)) :grid-template-columns '((94) (94))
:grid-template-rows '(1) :grid-auto-rows :grid-template-rows '(1) :grid-auto-rows
'1fr :gap '(0 (6)) :border "#416E8A" '(fr 1) :gap '(0 (6)) :border "#416E8A"
:bgcolor "#F8FCFE" :bgcolor "#F8FCFE"
(box :bgcolor "#D9EAF2" :color "#203A4A" (box :bgcolor "#D9EAF2" :color "#203A4A"
:text-align 'center "A") :text-align 'center "A")
@ -331,7 +347,8 @@
"Container property: :grid-auto-flow\nAutomatic placement is row-major or column-major. Ebox intentionally supports row and column, not the browser dense variants.") "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 (grid :grid-template-columns '((206) (206)) :grid-auto-rows
'auto :gap '(1 (10)) :justify-content 'space-between 'auto :gap '(1 (10)) :justify-content 'space-between
:padding '(0 (12)) :border "#416E8A" :border-top 'none :padding '(0 (12)) :border-right "#416E8A"
:border-bottom "#416E8A" :border-left "#416E8A"
:bgcolor "#F6FBFD" :bgcolor "#F6FBFD"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#416E8A" (box :padding '(0 (6)) :border "#416E8A"
@ -373,11 +390,12 @@
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :padding '(0 (18)) :border "#3D7068" :bgcolor "#CDEBE5" (box :padding '(0 (18)) :border "#3D7068" :bgcolor "#CDEBE5"
:color "#1D3935" :wrap-mode 'word :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.") "Container properties: :gap, :row-gap, :column-gap\nThe shorthand accepts one shared value or a row/column pair. The two longhands independently control row and column spacing.")
(grid :grid-template-columns '((206) (206) (206)) (grid :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#3D7068" 'space-between :padding '(0 (12)) :border-right "#3D7068"
:border-top 'none :bgcolor "#F7FCFB" :border-bottom "#3D7068" :border-left "#3D7068"
:bgcolor "#F7FCFB"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#3D7068" (box :padding '(0 (6)) :border "#3D7068"
:bgcolor "#9FD5CB" :color "#1D3935" :bgcolor "#9FD5CB" :color "#1D3935"
@ -442,32 +460,32 @@
(box :padding '(0 (6)) :border "#3D7068" (box :padding '(0 (6)) :border "#3D7068"
:bgcolor "#9FD5CB" :color "#1D3935" :bgcolor "#9FD5CB" :color "#1D3935"
:text-align 'center :text-align 'center
"aliases\n:grid-row-gap / :grid-column-gap") "longhands\n:row-gap / :column-gap")
(grid :width '(206) :height 5 (grid :width '(206) :height 5
:grid-template-columns '((88) (88)) :grid-template-columns '((88) (88))
:grid-template-rows '(1 1) :grid-row-gap 2 :grid-template-rows '(1 1) :row-gap 2
:grid-column-gap '(28) :border "#3D7068" :column-gap '(28) :border "#3D7068"
:bgcolor "#F7FCFB" :bgcolor "#F7FCFB"
(box :bgcolor "#CDEBE5" :color "#1D3935" (box :bgcolor "#CDEBE5" :color "#1D3935"
:text-align 'center "ROW ALIAS") :text-align 'center "ROW GAP")
(box :bgcolor "#9FD5CB" :color "#1D3935" (box :bgcolor "#9FD5CB" :color "#1D3935"
:text-align 'center "COLUMN ALIAS") :text-align 'center "COLUMN GAP")
(box :bgcolor "#71BDB0" :color "#FFFFFF" (box :bgcolor "#71BDB0" :color "#FFFFFF"
:text-align 'center "OVERRIDE"))) :text-align 'center "OVERRIDE")))
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#3D7068" (box :padding '(0 (6)) :border "#3D7068"
:bgcolor "#9FD5CB" :color "#1D3935" :bgcolor "#9FD5CB" :color "#1D3935"
:text-align 'center :text-align 'center
"override\nexplicit sides win over :gap") "independent longhands\nrow and column are explicit")
(grid :width '(206) :height 5 (grid :width '(206) :height 5
:grid-template-columns '((88) (88)) :grid-template-columns '((88) (88))
:grid-template-rows '(1 1) :gap '(1 (8)) :grid-template-rows '(1 1)
:row-gap 2 :column-gap '(28) :border :row-gap 0 :column-gap '(28) :border
"#3D7068" :bgcolor "#F7FCFB" "#3D7068" :bgcolor "#F7FCFB"
(box :bgcolor "#CDEBE5" :color "#1D3935" (box :bgcolor "#CDEBE5" :color "#1D3935"
:text-align 'center "SHORTHAND") :text-align 'center "ROW 0")
(box :bgcolor "#9FD5CB" :color "#1D3935" (box :bgcolor "#9FD5CB" :color "#1D3935"
:text-align 'center "OVERRIDDEN") :text-align 'center "COLUMN 28")
(box :bgcolor "#71BDB0" :color "#FFFFFF" (box :bgcolor "#71BDB0" :color "#FFFFFF"
:text-align 'center "SIDES")))) :text-align 'center "SIDES"))))
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
@ -476,8 +494,9 @@
"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.") "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 :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#6A5C8B" 'space-between :padding '(0 (12)) :border-right "#6A5C8B"
:border-top 'none :bgcolor "#FBF9FF" :border-bottom "#6A5C8B" :border-left "#6A5C8B"
:bgcolor "#FBF9FF"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#6A5C8B" (box :padding '(0 (6)) :border "#6A5C8B"
:bgcolor "#D8D0E8" :color "#332B4B" :bgcolor "#D8D0E8" :color "#332B4B"
@ -624,8 +643,9 @@
"Container property: :justify-items\nInline-axis item alignment supports start, center, end, stretch, and normal. Fixed-size items make the first three positions visible.") "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 :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#B07836" 'space-between :padding '(0 (12)) :border-right "#B07836"
:border-top 'none :bgcolor "#FFF9ED" :border-bottom "#B07836" :border-left "#B07836"
:bgcolor "#FFF9ED"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#B07836" (box :padding '(0 (6)) :border "#B07836"
:bgcolor "#EAD2A6" :color "#513718" :bgcolor "#EAD2A6" :color "#513718"
@ -677,11 +697,11 @@
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#B07836" (box :padding '(0 (6)) :border "#B07836"
:bgcolor "#EAD2A6" :color "#513718" :bgcolor "#EAD2A6" :color "#513718"
:text-align 'center "normal") :text-align 'center "stretch default")
(grid :width '(206) :height 3 (grid :width '(206) :height 3
:grid-template-columns '((194)) :grid-template-columns '((194))
:grid-template-rows '(3) :justify-items :grid-template-rows '(3) :justify-items
'normal :align-items 'center :border 'stretch :align-items 'center :border
"#B07836" :bgcolor "#FFF9ED" "#B07836" :bgcolor "#FFF9ED"
(box :bgcolor "#F3E4C7" :color "#513718" (box :bgcolor "#F3E4C7" :color "#513718"
:text-align 'center :text-align 'center
@ -692,8 +712,9 @@
"Container property: :align-items\nBlock-axis item alignment supports start, center, end, stretch, and normal. The fixed row height exposes the vertical offset.") "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 :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#B07836" 'space-between :padding '(0 (12)) :border-right "#B07836"
:border-top 'none :bgcolor "#FFF9ED" :border-bottom "#B07836" :border-left "#B07836"
:bgcolor "#FFF9ED"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#B07836" (box :padding '(0 (6)) :border "#B07836"
:bgcolor "#EAD2A6" :color "#513718" :bgcolor "#EAD2A6" :color "#513718"
@ -759,8 +780,9 @@
"Container property: :justify-content\nInline-axis track packing supports start, center, end, space-between, space-around, space-evenly, stretch, and normal.") "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 :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#2F7180" 'space-between :padding '(0 (12)) :border-right "#2F7180"
:border-top 'none :bgcolor "#F6FCFC" :border-bottom "#2F7180" :border-left "#2F7180"
:bgcolor "#F6FCFC"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#2F7180" (box :padding '(0 (6)) :border "#2F7180"
:bgcolor "#B5DDE0" :color "#1E4148" :bgcolor "#B5DDE0" :color "#1E4148"
@ -882,8 +904,9 @@
"Container property: :align-content\nBlock-axis track packing mirrors justify-content: start, center, end, space-between, space-around, space-evenly, stretch, and normal.") "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 :grid-template-columns '((206) (206) (206))
:grid-auto-rows 'auto :gap '(1 (10)) :justify-content :grid-auto-rows 'auto :gap '(1 (10)) :justify-content
'space-between :padding '(0 (12)) :border "#2F7180" 'space-between :padding '(0 (12)) :border-right "#2F7180"
:border-top 'none :bgcolor "#F6FCFC" :border-bottom "#2F7180" :border-left "#2F7180"
:bgcolor "#F6FCFC"
(column :width '(206) (column :width '(206)
(box :padding '(0 (6)) :border "#2F7180" (box :padding '(0 (6)) :border "#2F7180"
:bgcolor "#B5DDE0" :color "#1E4148" :bgcolor "#B5DDE0" :color "#1E4148"
@ -1023,4 +1046,4 @@
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :padding '(1 (16)) :border "#2E3740" :color "#FFFFFF" (box :padding '(1 (16)) :border "#2E3740" :color "#FFFFFF"
:bgcolor "#3D4B55" :wrap-mode 'word :text-align 'center :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).")) "GRID TOOLKIT\n:grid-template-columns · :grid-template-rows · :grid-auto-columns · :grid-auto-rows · :grid-auto-flow · :gap · :row-gap · :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)."))

19
examples/public-layout-gallery.ebox
View File

@ -3,11 +3,12 @@
"#252A2E" :bgcolor "#FFFDF8" :font-weight 'bold :text-align 'center "#252A2E" :bgcolor "#FFFDF8" :font-weight 'bold :text-align 'center
"Ebox Playground\nPixel-precise layout, composed only from public nodes.") "Ebox Playground\nPixel-precise layout, composed only from public nodes.")
(box :width '(720) :height 1 :bgcolor "#FAF7F0") (box :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :width '(720) :padding '(0 (16)) :border "#C97252" (box :width '(720) :padding '(0 (16)) :border-top "#C97252"
:border-bottom 'none :color "#252A2E" :bgcolor "#F1D4C9" :border-right "#C97252" :border-left "#C97252"
:color "#252A2E" :bgcolor "#F1D4C9"
:wrap-mode 'word :wrap-mode 'word
"01 FIXED + FRACTIONAL\nA definite Grid width divides into one exact track and one flexible track.") "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 (grid :width '(720) :grid-template-columns '((220) (fr 1)) :gap
'(1 (12)) :border "#C97252" :bgcolor "#FFF9F5" '(1 (12)) :border "#C97252" :bgcolor "#FFF9F5"
(box :width '(220) :padding '(1 0) :text-align 'center :color (box :width '(220) :padding '(1 0) :text-align 'center :color
"#252A2E" :bgcolor "#F1D4C9" "#252A2E" :bgcolor "#F1D4C9"
@ -20,11 +21,12 @@
:wrap-mode 'word :wrap-mode 'word
"The Grid owns one definite width; its tracks divide that space without competing viewport calculations.")) "The Grid owns one definite width; its tracks divide that space without competing viewport calculations."))
(box :width '(720) :height 1 :bgcolor "#FAF7F0") (box :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :width '(720) :padding '(0 (16)) :border "#6D8A73" (box :width '(720) :padding '(0 (16)) :border-top "#6D8A73"
:border-bottom 'none :color "#252A2E" :bgcolor "#DCEBDD" :border-right "#6D8A73" :border-left "#6D8A73"
:color "#252A2E" :bgcolor "#DCEBDD"
:wrap-mode 'word :wrap-mode 'word
"02 EXPLICIT PLACEMENT\nSpan columns, target cells, and leave the remaining nodes to auto placement.") "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 (grid :width '(720) :grid-template-columns '((210) (210) (fr 1)) :gap
'(1 (10)) :border "#6D8A73" :bgcolor "#F7FBF7" '(1 (10)) :border "#6D8A73" :bgcolor "#F7FBF7"
(box :grid-column '(1 :span 2) :width '(430) :padding '(1 0) (box :grid-column '(1 :span 2) :width '(430) :padding '(1 0)
:text-align 'center :color "#24422D" :bgcolor "#DCEBDD" :text-align 'center :color "#24422D" :bgcolor "#DCEBDD"
@ -40,8 +42,9 @@
(box :width '(278) :padding '(1 0) :text-align 'center :color (box :width '(278) :padding '(1 0) :text-align 'center :color
"#24422D" :bgcolor "#D4E6D7" "STABLE CELLS")) "#24422D" :bgcolor "#D4E6D7" "STABLE CELLS"))
(box :width '(720) :height 1 :bgcolor "#FAF7F0") (box :width '(720) :height 1 :bgcolor "#FAF7F0")
(box :width '(720) :padding '(0 (16)) :border "#4E7890" (box :width '(720) :padding '(0 (16)) :border-top "#4E7890"
:border-bottom 'none :color "#252A2E" :bgcolor "#D9EAF2" :border-right "#4E7890" :border-left "#4E7890"
:color "#252A2E" :bgcolor "#D9EAF2"
:wrap-mode 'word :wrap-mode 'word
"03 PUBLIC COMPOSITION\nColumn, Flex, and Grid share the same public node contract.") "03 PUBLIC COMPOSITION\nColumn, Flex, and Grid share the same public node contract.")
(flex :width '(720) :flex-flow '(row wrap) :gap '(1 (12)) :padding (flex :width '(720) :flex-flow '(row wrap) :gap '(1 (12)) :padding

6
examples/responsive-reference.ebox
View File

@ -8,7 +8,8 @@
:color "#134E4A" :wrap-mode 'word :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.") "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 :height 1)
(box :padding '(0 (16)) :border "#EA580C" :border-bottom 'none (box :padding '(0 (16)) :border-top "#EA580C"
:border-right "#EA580C" :border-left "#EA580C"
:bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word :bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word
"Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps.") "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 (flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1
@ -29,7 +30,8 @@
:bgcolor "#F3E8FF" :color "#3B0764" :text-align :bgcolor "#F3E8FF" :color "#3B0764" :text-align
'center "Write")) 'center "Write"))
(box :height 1) (box :height 1)
(box :padding '(0 (16)) :border "#2563EB" :border-bottom 'none (box :padding '(0 (16)) :border-top "#2563EB"
:border-right "#2563EB" :border-left "#2563EB"
:bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word :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.") "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 (flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1

16
tests/ebox-playground-tests.el
View File

@ -51,23 +51,23 @@
(defconst ebox-playground-test--grid-value-forms (defconst ebox-playground-test--grid-value-forms
'(":grid-template-columns '(auto auto)" '(":grid-template-columns '(auto auto)"
":grid-template-columns '(min-content max-content)"
":grid-template-columns '((120) (74))" ":grid-template-columns '((120) (74))"
":padding '(0 (2))" ":padding '(0 (2))"
":grid-template-columns '((192))" ":grid-template-columns '((192))"
":grid-template-columns '((88) (88))" ":grid-template-columns '((88) (88))"
":grid-template-columns '(1fr 2fr)"
":grid-template-columns '((fr 1) (fr 2))" ":grid-template-columns '((fr 1) (fr 2))"
":grid-template-columns '((minmax" ":grid-template-columns '((minmax"
":grid-template-columns '((repeat" ":grid-template-columns '((repeat"
":grid-template-rows '(auto auto)" ":grid-template-rows '(auto auto)"
":grid-template-rows '(1fr 2fr)" ":grid-template-rows '((fr 1) (fr 2))"
":grid-auto-columns '((64))" ":grid-auto-columns '((64))"
":grid-auto-columns 'auto" ":grid-auto-columns 'auto"
":grid-auto-columns '1fr" ":grid-auto-columns '(fr 1)"
":grid-auto-columns '((minmax" ":grid-auto-columns '((minmax"
":grid-auto-rows 2" ":grid-auto-rows 2"
":grid-auto-rows 'auto" ":grid-auto-rows 'auto"
":grid-auto-rows '1fr" ":grid-auto-rows '(fr 1)"
":grid-auto-rows '((minmax" ":grid-auto-rows '((minmax"
":grid-auto-flow 'row" ":grid-auto-flow 'row"
":grid-auto-flow 'column" ":grid-auto-flow 'column"
@ -75,8 +75,6 @@
":gap '(1 (14))" ":gap '(1 (14))"
":row-gap 2" ":row-gap 2"
":column-gap '(28)" ":column-gap '(28)"
":grid-row-gap 2"
":grid-column-gap '(28)"
":grid-column 2" ":grid-column 2"
":grid-row 2" ":grid-row 2"
":grid-column '(1 :span 2)" ":grid-column '(1 :span 2)"
@ -89,7 +87,6 @@
":justify-items 'center" ":justify-items 'center"
":justify-items 'end" ":justify-items 'end"
":justify-items 'stretch" ":justify-items 'stretch"
":justify-items 'normal"
":align-items 'start" ":align-items 'start"
":align-items 'center" ":align-items 'center"
":align-items 'end" ":align-items 'end"
@ -559,8 +556,7 @@
ebox-playground-directory))))) ebox-playground-directory)))))
(dolist (property '(:grid-template-columns :grid-template-rows (dolist (property '(:grid-template-columns :grid-template-rows
:grid-auto-columns :grid-auto-rows :grid-auto-flow :grid-auto-columns :grid-auto-rows :grid-auto-flow
:grid-row-gap :grid-column-gap :gap :row-gap :gap :row-gap :column-gap
:column-gap
:justify-items :align-items :justify-content :justify-items :align-items :justify-content
:align-content :grid-column :grid-row :align-content :grid-column :grid-row
:grid-column-span :grid-row-span)) :grid-column-span :grid-row-span))
@ -629,7 +625,7 @@
(should (equal (ebox-style-node-specified-value node :width) '(240))) (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 :color) "#123456"))
(should (equal (should (equal
(ebox-style-node-specified-value node :padding-left) (ebox-style-node-specified-value node :padding-inline-start)
'(4))) '(4)))
(should (eq (ebox-style-node-specified-value node :text-align) (should (eq (ebox-style-node-specified-value node :text-align)
'center)))) 'center))))