Files

Jakub Zych a9a7a328e6 refactor: hard-fork GSD -> MSD (Make Software Done)

Mechanical rename produced by scripts/msd-rename.cjs: gsd/Gsd/GSD -> msd/Msd/MSD
across contents and paths, upstream package/repo coordinates -> @golem15/msd-core
and golem15com/msd-core. Deep links into upstream history, sibling upstream
packages, the GSD-2 import feature, CHANGELOG.md and .changeset/ are kept as-is.

Hand edits on top: MSD block-letter banner and logos, LICENSE copyright line,
package/plugin identity, regenerated lockfile, install-tree fixtures, derived
registries and benchmark baseline; migration checksum baseline re-locked
(MSD keeps its own install state, so no install had applied the old sums);
sort-order and regex-escaped expectations in tests adjusted.

2026-10-06 01:47:40 +02:00

2.6 KiB

Raw Permalink Blame History

Multi-Variant HTML Patterns

Every sketch produces 2-3 variants in the same HTML file. The user switches between them to compare.

Tab-Based Variants

The standard approach: a tab bar at the top of the page, each tab shows a different variant.

<div id="variant-nav" style="position:fixed;top:0;left:0;right:0;z-index:9998;background:var(--color-surface, #fff);border-bottom:1px solid var(--color-border, #e5e5e5);padding:8px 16px;display:flex;gap:8px;font-family:system-ui;">
  <button class="variant-tab active" onclick="showVariant('a')">A: Sidebar Layout</button>
  <button class="variant-tab" onclick="showVariant('b')">B: Top Nav</button>
  <button class="variant-tab" onclick="showVariant('c')">C: Floating Panels</button>
</div>

<div id="variant-a" class="variant active">
  <!-- Variant A content -->
</div>
<div id="variant-b" class="variant" style="display:none">
  <!-- Variant B content -->
</div>
<div id="variant-c" class="variant" style="display:none">
  <!-- Variant C content -->
</div>

<script>
function showVariant(id) {
  document.querySelectorAll('.variant').forEach(v => v.style.display = 'none');
  document.querySelectorAll('.variant-tab').forEach(t => t.classList.remove('active'));
  document.getElementById('variant-' + id).style.display = 'block';
  event.target.classList.add('active');
}
</script>

Add padding-top to the body to account for the fixed tab bar.

Marking the Winner

After the user picks a direction, add a visual indicator to the winning tab:

<button class="variant-tab active">A: Sidebar Layout ★ Selected</button>

Keep all variants visible and navigable — the winner is highlighted, not the only option.

Side-by-Side (for small variants)

When comparing small elements (button styles, card layouts, icon treatments), render them next to each other with labels rather than using tabs:

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px;">
  <div>
    <h3>A: Rounded</h3>
    <!-- variant content -->
  </div>
  <div>
    <h3>B: Sharp</h3>
    <!-- variant content -->
  </div>
  <div>
    <h3>C: Pill</h3>
    <!-- variant content -->
  </div>
</div>

Variant Count

First round (dramatic): 2-3 meaningfully different approaches
Refinement rounds: 2-3 subtle variations within the chosen direction
Never more than 4 — more than that overwhelms. If there are 5+ options, narrow before showing.

Synthesis Variants

When the user cherry-picks elements across variants, create a new variant tab labeled descriptively:

<button class="variant-tab" onclick="showVariant('synth1')">Synthesis: A's layout + C's palette</button>

2.6 KiB Raw Permalink Blame History