diff --git a/examples/basic.ebox b/examples/basic.ebox index 70f695d..11ebc82 100644 --- a/examples/basic.ebox +++ b/examples/basic.ebox @@ -1,3 +1,3 @@ -(box :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 "#2563EB" + :bgcolor "#EFF6FF" :color "#1E3A8A" "Playground file") diff --git a/examples/grid-reference.ebox b/examples/grid-reference.ebox index 076a741..a49f55f 100644 --- a/examples/grid-reference.ebox +++ b/examples/grid-reference.ebox @@ -8,8 +8,9 @@ "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" + 'space-between :padding '(0 (12)) :border-right "#B85C3C" + :border-bottom "#B85C3C" :border-left "#B85C3C" + :bgcolor "#FFF9F4" (column :width '(206) (box :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" @@ -39,9 +40,22 @@ (box :padding '(0 (6)) :border "#B85C3C" :bgcolor "#F7C8B3" :color "#3D2B1F" :text-align 'center - "fractional symbols\n1fr distributes by weight") + "intrinsic keywords\nmin-content / max-content") (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)) :border "#B85C3C" :bgcolor "#FFF8F2" (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.") (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" + 'space-between :padding '(0 (12)) :border-right "#537A63" + :border-bottom "#537A63" :border-left "#537A63" + :bgcolor "#F7FBF7" (column :width '(206) (box :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" @@ -130,10 +145,10 @@ (box :padding '(0 (6)) :border "#537A63" :bgcolor "#C8DDCB" :color "#26402F" :text-align 'center - "fractional rows\n1fr / 2fr") + "fractional rows\n(fr 1) / (fr 2)") (grid :width '(206) :height 6 :padding '(0 (6)) :grid-template-columns '((192)) - :grid-template-rows '(1fr 2fr) :gap + :grid-template-rows '((fr 1) (fr 2)) :gap '(0 (6)) :border "#537A63" :bgcolor "#F8FCF8" (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.") (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" + 'space-between :padding '(0 (12)) :border-right "#416E8A" + :border-bottom "#416E8A" :border-left "#416E8A" + :bgcolor "#F6FBFD" (column :width '(206) (box :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" @@ -230,11 +246,11 @@ (box :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center - "auto-columns · 1fr\nimplicit remainder") + "auto-columns · (fr 1)\nimplicit remainder") (grid :width '(206) :height 4 :grid-template-columns '((64)) :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" :bgcolor "#F8FCFE" (box :bgcolor "#D9EAF2" :color "#203A4A" @@ -297,11 +313,11 @@ (box :padding '(0 (6)) :border "#416E8A" :bgcolor "#C3DFEA" :color "#203A4A" :text-align 'center - "auto-rows · 1fr\nimplicit remainder") + "auto-rows · (fr 1)\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" + '(fr 1) :gap '(0 (6)) :border "#416E8A" :bgcolor "#F8FCFE" (box :bgcolor "#D9EAF2" :color "#203A4A" :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.") (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 + :padding '(0 (12)) :border-right "#416E8A" + :border-bottom "#416E8A" :border-left "#416E8A" :bgcolor "#F6FBFD" (column :width '(206) (box :padding '(0 (6)) :border "#416E8A" @@ -373,11 +390,12 @@ (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.") + "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-auto-rows 'auto :gap '(1 (10)) :justify-content - 'space-between :padding '(0 (12)) :border "#3D7068" - :border-top 'none :bgcolor "#F7FCFB" + 'space-between :padding '(0 (12)) :border-right "#3D7068" + :border-bottom "#3D7068" :border-left "#3D7068" + :bgcolor "#F7FCFB" (column :width '(206) (box :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" @@ -442,32 +460,32 @@ (box :padding '(0 (6)) :border "#3D7068" :bgcolor "#9FD5CB" :color "#1D3935" :text-align 'center - "aliases\n:grid-row-gap / :grid-column-gap") + "longhands\n:row-gap / :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" + :grid-template-rows '(1 1) :row-gap 2 + :column-gap '(28) :border "#3D7068" :bgcolor "#F7FCFB" (box :bgcolor "#CDEBE5" :color "#1D3935" - :text-align 'center "ROW ALIAS") + :text-align 'center "ROW GAP") (box :bgcolor "#9FD5CB" :color "#1D3935" - :text-align 'center "COLUMN ALIAS") + :text-align 'center "COLUMN GAP") (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") + "independent longhands\nrow and column are explicit") (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 + :grid-template-rows '(1 1) + :row-gap 0 :column-gap '(28) :border "#3D7068" :bgcolor "#F7FCFB" (box :bgcolor "#CDEBE5" :color "#1D3935" - :text-align 'center "SHORTHAND") + :text-align 'center "ROW 0") (box :bgcolor "#9FD5CB" :color "#1D3935" - :text-align 'center "OVERRIDDEN") + :text-align 'center "COLUMN 28") (box :bgcolor "#71BDB0" :color "#FFFFFF" :text-align 'center "SIDES")))) (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.") (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" + 'space-between :padding '(0 (12)) :border-right "#6A5C8B" + :border-bottom "#6A5C8B" :border-left "#6A5C8B" + :bgcolor "#FBF9FF" (column :width '(206) (box :padding '(0 (6)) :border "#6A5C8B" :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.") (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" + 'space-between :padding '(0 (12)) :border-right "#B07836" + :border-bottom "#B07836" :border-left "#B07836" + :bgcolor "#FFF9ED" (column :width '(206) (box :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" @@ -677,11 +697,11 @@ (column :width '(206) (box :padding '(0 (6)) :border "#B07836" :bgcolor "#EAD2A6" :color "#513718" - :text-align 'center "normal") + :text-align 'center "stretch default") (grid :width '(206) :height 3 :grid-template-columns '((194)) :grid-template-rows '(3) :justify-items - 'normal :align-items 'center :border + 'stretch :align-items 'center :border "#B07836" :bgcolor "#FFF9ED" (box :bgcolor "#F3E4C7" :color "#513718" :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.") (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" + 'space-between :padding '(0 (12)) :border-right "#B07836" + :border-bottom "#B07836" :border-left "#B07836" + :bgcolor "#FFF9ED" (column :width '(206) (box :padding '(0 (6)) :border "#B07836" :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.") (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" + 'space-between :padding '(0 (12)) :border-right "#2F7180" + :border-bottom "#2F7180" :border-left "#2F7180" + :bgcolor "#F6FCFC" (column :width '(206) (box :padding '(0 (6)) :border "#2F7180" :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.") (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" + 'space-between :padding '(0 (12)) :border-right "#2F7180" + :border-bottom "#2F7180" :border-left "#2F7180" + :bgcolor "#F6FCFC" (column :width '(206) (box :padding '(0 (6)) :border "#2F7180" :bgcolor "#B5DDE0" :color "#1E4148" @@ -1023,4 +1046,4 @@ (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).")) + "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).")) diff --git a/examples/public-layout-gallery.ebox b/examples/public-layout-gallery.ebox index c1e17e1..d98598d 100644 --- a/examples/public-layout-gallery.ebox +++ b/examples/public-layout-gallery.ebox @@ -3,11 +3,12 @@ "#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 :width '(720) :padding '(0 (16)) :border "#C97252" - :border-bottom 'none :color "#252A2E" :bgcolor "#F1D4C9" + (box :width '(720) :padding '(0 (16)) :border-top "#C97252" + :border-right "#C97252" :border-left "#C97252" + :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 + (grid :width '(720) :grid-template-columns '((220) (fr 1)) :gap '(1 (12)) :border "#C97252" :bgcolor "#FFF9F5" (box :width '(220) :padding '(1 0) :text-align 'center :color "#252A2E" :bgcolor "#F1D4C9" @@ -20,11 +21,12 @@ :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 :width '(720) :padding '(0 (16)) :border "#6D8A73" - :border-bottom 'none :color "#252A2E" :bgcolor "#DCEBDD" + (box :width '(720) :padding '(0 (16)) :border-top "#6D8A73" + :border-right "#6D8A73" :border-left "#6D8A73" + :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 + (grid :width '(720) :grid-template-columns '((210) (210) (fr 1)) :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" @@ -40,8 +42,9 @@ (box :width '(278) :padding '(1 0) :text-align 'center :color "#24422D" :bgcolor "#D4E6D7" "STABLE CELLS")) (box :width '(720) :height 1 :bgcolor "#FAF7F0") - (box :width '(720) :padding '(0 (16)) :border "#4E7890" - :border-bottom 'none :color "#252A2E" :bgcolor "#D9EAF2" + (box :width '(720) :padding '(0 (16)) :border-top "#4E7890" + :border-right "#4E7890" :border-left "#4E7890" + :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 diff --git a/examples/responsive-reference.ebox b/examples/responsive-reference.ebox index 7b54a53..dda7086 100644 --- a/examples/responsive-reference.ebox +++ b/examples/responsive-reference.ebox @@ -8,7 +8,8 @@ :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 + (box :padding '(0 (16)) :border-top "#EA580C" + :border-right "#EA580C" :border-left "#EA580C" :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 @@ -29,7 +30,8 @@ :bgcolor "#F3E8FF" :color "#3B0764" :text-align 'center "Write")) (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 "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 diff --git a/tests/ebox-playground-tests.el b/tests/ebox-playground-tests.el index e825ce9..263c237 100644 --- a/tests/ebox-playground-tests.el +++ b/tests/ebox-playground-tests.el @@ -51,23 +51,23 @@ (defconst ebox-playground-test--grid-value-forms '(":grid-template-columns '(auto auto)" + ":grid-template-columns '(min-content max-content)" ":grid-template-columns '((120) (74))" ":padding '(0 (2))" ":grid-template-columns '((192))" ":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 '((repeat" ":grid-template-rows '(auto auto)" - ":grid-template-rows '(1fr 2fr)" + ":grid-template-rows '((fr 1) (fr 2))" ":grid-auto-columns '((64))" ":grid-auto-columns 'auto" - ":grid-auto-columns '1fr" + ":grid-auto-columns '(fr 1)" ":grid-auto-columns '((minmax" ":grid-auto-rows 2" ":grid-auto-rows 'auto" - ":grid-auto-rows '1fr" + ":grid-auto-rows '(fr 1)" ":grid-auto-rows '((minmax" ":grid-auto-flow 'row" ":grid-auto-flow 'column" @@ -75,8 +75,6 @@ ":gap '(1 (14))" ":row-gap 2" ":column-gap '(28)" - ":grid-row-gap 2" - ":grid-column-gap '(28)" ":grid-column 2" ":grid-row 2" ":grid-column '(1 :span 2)" @@ -89,7 +87,6 @@ ":justify-items 'center" ":justify-items 'end" ":justify-items 'stretch" - ":justify-items 'normal" ":align-items 'start" ":align-items 'center" ":align-items 'end" @@ -559,8 +556,7 @@ 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 - :column-gap + :gap :row-gap :column-gap :justify-items :align-items :justify-content :align-content :grid-column :grid-row :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 :color) "#123456")) (should (equal - (ebox-style-node-specified-value node :padding-left) + (ebox-style-node-specified-value node :padding-inline-start) '(4))) (should (eq (ebox-style-node-specified-value node :text-align) 'center))))