65 lines
3.5 KiB
Plaintext
65 lines
3.5 KiB
Plaintext
(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 :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) (fr 1)) :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 :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) (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"
|
|
"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 :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
|
|
'(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 :width '(720) :padding '(0 (16)) :border "#8D887F" :color
|
|
"#4D5651" :bgcolor "#EEEAE2" :wrap-mode 'word
|
|
"AUTHOR FORMS String · text · box · row · column · flex · grid"))
|