DARMASTER Platform · Layout Standard

3-Column Multi-Device Layout

The single, controlling layout structure every DARMASTER platform page follows (skin manager, document registry, and any page with side panels). Reference implementation: __darmaster/08/skin2.php.

GOLD RULE — never break: the header nav and the PageContentArea are LINED UP at every window width. The header occupies the column w1; the PageContentArea is centered inside it at w1 − 40px, so the content band's visible edges sit just inside the nav's tab row. The PageContentArea is derived from w1 and is never wider than the header — in CSS it uses width:100%; max-width:calc(var(--w1) - 40px), never a hard width.

This standard reflects an audit of the live page (__darmaster/08/skin2.php, 2026-06-19). The values below are measured, not aspirational.

1. The three zones

Every page is a header band (width w1) above three side-by-side zones:

Left Panel (Lp) — fixed width Lw. On skin2 it holds the skin/scope selectors.
Center — PageContentArea — width w1 − 40px, centered inside the header column so it lines up within the nav's tab row. Holds the page content (the editable fields).
Right Panel (Rp) — fixed width Rw. On skin2 it holds the live preview.

Wide window — all three zones visible

Lpfixed Lw

PageContentArea = w1 − 40pxcentered inside the header, lined up in the tab row

Rpfixed Rw

Narrow window — panels hide off-canvas behind edge handles

PageContentArea = w1 − 40pxstays lined up; gutters freed for the page

Lp / Rp are hidden (slid off-canvas); a thin handle reveals each one over the content on demand.

2. w1 — the responsive header column

w1 is the header width. The PageContentArea is tied to it but sits 40px narrower (centered inside it). w1 is fluid between a minimum and a maximum, set from the window:

--w1: clamp(MIN, calc(100vw - GUTTERS), MAX);

MIN — w1 never gets narrower than this.
MAX — w1 never gets wider than this.
The middle term tracks the window, reserving fixed side gutters for the panels.

Current skin2.php values: --w1: clamp(640px, calc(100vw - 560px), 640px) — i.e. min 640px, max 640px (effectively fixed at 640px; shrinks to fit windows narrower than 640px). The PageContentArea is therefore 640 − 40 = 600px. Change MIN/MAX to open up a fluid range; the −40px content inset rides along automatically.

3. Side panels — fixed width, hide (never shrink)

Lw and Rw are constant pixel widths. They do not scale with w1 or the window. (skin2: 244px each.)
They live in the side gutters, outside w1 (floated out via negative margins, −260px).
When the window is so narrow that a fixed panel would overlap the PageContentArea (gutter < panel width), the panel hides off-canvas behind an edge handle and can be revealed over the content. It is never resized to fit.

4. Multi-device behaviour

Window	Header (w1)	PageContentArea (w1 − 40)	Lp / Rp
Wide (gutters fit the panels)	w1 at/near MAX, centered	40px inside the header, centered	Visible in the gutters
Medium (gutters too tight, ≤ breakpoint)	w1, gutters reclaimed	still w1 − 40, centered	Hidden off-canvas; handles shown
Narrow (< w1 MIN)	Shrinks to the window	Shrinks with it, stays 40px inside & lined up	Hidden; handles shown

5. Audited values (skin2.php · window 1245px)

Element	left	right	width	rule
Header nav (`.darx-nav-top/-sections`)	295	935	640	`max-width: var(--w1)`
PageContentArea (`.s2-wrap` / `.s2-main` / save bar)	315	915	600	`max-width: calc(var(--w1) - 40px)`
Left rail (gutter)	55	299	244	fixed, `margin-left:-260px`
Right preview (gutter)	931	1175	244	fixed, `margin-right:-260px`

The header (640) and the content column (600) share the same centre; the content is inset exactly 20px on each side (295→315 and 935→915), landing it inside the nav's tab row.

6. CSS implementation

/* w1 drives the HEADER; the content sits 40px inside it */
:root { --w1: clamp(640px, calc(100vw - 560px), 640px); }

/* header (shared section nav) = w1 */
.darx-nav-top, .darx-nav-sections { max-width: var(--w1) !important; }

/* PageContentArea: w1 minus 40px, centered, NEVER wider than the header (GOLD RULE) */
.wrap { width: 100%; max-width: calc(var(--w1) - 40px); margin: 0 auto; }

/* fixed-width side panels in the gutters */
.left-panel  { float: left;  width: 244px; margin-left:  -260px; }
.right-panel { float: right; width: 244px; margin-right: -260px; }

/* below the fit breakpoint: panels off-canvas + handle, w1 reclaims gutters
   (the content stays w1 - 40, still lined up) */
@media (max-width: 1199px) {
  :root { --w1: clamp(640px, calc(100vw - 28px), 640px); }
  .wrap { max-width: calc(var(--w1) - 40px); }
  .left-panel, .right-panel { position: fixed; transform: translateX(-100%/100%); }
  .left-handle, .right-handle { display: flex; }
}

7. Do / Don't

Do drive the header from --w1 and the content from calc(var(--w1) - 40px) so they stay lined up at every width.
Do cap the content with max-width:calc(var(--w1) - 40px) (+ width:100%).
Don't give the content a hard width — it overflows past the header on narrow windows.
Don't set the content equal to the full var(--w1) — the 40px inset is what lines the band up inside the nav's tab row.
Don't shrink the side panels to make them fit — hide them off-canvas instead.
Don't let the PageContentArea ever exceed w1. Ever.

DARMASTER Platform · Internal layout standard · 2026-06-19 · revised from live-page audit