Layout-ontwikkelaarsdocumentatie

Layouts definiëren het gedeelde paginarame dat door FaceFlow-pagina's wordt gebruikt.

Voor technische gebruikers is een Layout het contract van de paginashell. Het bepaalt waar gedeelde regio's zich bevinden, waar paginainhoud wordt geïnjecteerd en hoe een familie van pagina's een consistent frame behoudt zonder structuur pagina voor pagina te dupliceren.

Kernverantwoordelijkheid

Een Layout moet beheren:

de algemene documentstructuur
plaatsing van header, footer en gedeelde regio's
het hoofd-invoegpunt voor content
structurele wrappers en framing van een paginafamilie
optionele stijl of gedrag op lay-outniveau

Een Layout mag niet verantwoordelijk zijn voor pagina-specifieke marketinginhoud.

Layoutskelet

De meeste Layouts zijn te begrijpen via één eenvoudig patroon:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ page.title }}</title>
</head>
<body>
  {header}
  {siteComponents}
  <main>
    {content}
  </main>
  {footer}
</body>
</html>

De belangrijkste vereiste is een betrouwbaar invoegpunt voor {content}. Zonder dat hebben pagina's geen voorspelbare plaats om te renderen.

Voorbeeld van het shell-contract

Een Layout kan ook extra gedeelde regio's blootstellen, terwijl de eigendomsgrens schoon blijft:

<body class="resource-layout">
  {header}
  <div class="resource-shell">
    <aside class="resource-sidebar">
      {siteComponents}
    </aside>
    <main class="resource-main">
      {content}
    </main>
  </div>
  {footer}
</body>

De belangrijke regel is dat de shell structureel blijft. De pagina is nog steeds eigenaar van de volgorde die in {content} wordt gerenderd.

Relatie tot pagina's en componenten

Houd het eigendomsmodel duidelijk:

Layout is eigenaar van de shell
Pagina is eigenaar van de samenstelling van de ervaring
Component is eigenaar van herbruikbare inhoudssecties binnen de ervaring

Wanneer Layouts structureel blijven, blijven paginafamilies eenvoudig aan te passen.

Gedeelde regio's

Layouts zijn de juiste plaats voor gedeelde regio's zoals:

persistente navigatie
standaard footer-framing
documentatiezijbalken
ondersteuningsrails die binnen één paginafamilie worden gebruikt

Voorbeeld:

<body class="docs-layout">
  {header}
  <div class="docs-shell">
    <aside class="docs-sidebar">
      {siteComponents}
    </aside>
    <main class="docs-content">
      {content}
    </main>
  </div>
  {footer}
</body>

Dat is structureel hergebruik. Een eenmalige promotiebanner hoort hier niet thuis.

Layout-families

Veelvoorkomende layout-families omvatten:

main marketing site shell
campagne-landingpagina-shell
resource- of documentatie-shell
portal- of knowledge-base-shell

Elke familie moet een duurzaam structureel patroon vertegenwoordigen, geen tijdelijke inhoudsvariatie.

Stijl op lay-outniveau

Layouts kunnen gedeelde stijlkeuzes definiëren die bij de shell horen:

<body class="min-h-screen bg-slate-950 text-white">
  {header}
  <main class="mx-auto max-w-7xl px-6 py-16">
    {content}
  </main>
  {footer}
</body>

Dit is passend wanneer de stijl bij het paginarame hoort. Sectiespecifieke styling hoort nog steeds thuis bij componenten.

Impact van wijzigingen

Wijzigingen in Layouts hebben grote impact omdat één Layout vaak veel pagina's beïnvloedt.

Voordat je een Layout wijzigt, controleer:

welke paginafamilie ervan afhankelijk is
of gedeelde regio's van betekenis veranderen
of inhoudsbreedte, afstand of navigatieaannames veranderen
of bestaande componenten nog steeds correct in de shell passen

Patroon voor layoutbeoordeling

Wanneer een Layout-wijziging wordt voorgesteld, controleer de impact in deze volgorde:

shell semantics
-> shared regions
-> content width and spacing
-> component fit
-> dependent page-family behavior

Dit helpt teams te voorkomen dat ze schijnbaar kleine shell-wijzigingen goedkeuren die stilletjes meerdere afhankelijke pagina's kapotmaken.

Technische beoordelingschecklist

biedt de Layout een duidelijk invoegpunt voor content?
beheert het alleen zorgen op shell-niveau?
kunnen meerdere pagina's het hergebruiken zonder unieke uitzonderingen?
zijn gedeelde regio's echt gedeeld?
zou het wijzigen van deze Layout veel pagina's op een begrijpelijke manier beïnvloeden?

Anti-patronen

Vermijd:

het direct insluiten van pagina-specifieke tekst in de Layout
het creëren van bijna-identieke Layouts voor kleine variaties
het verplaatsen van sectielogica naar de shell
het gebruiken van de Layout als opslagplaats voor alle gedeelde inhoud
het veranderen van shell-semantiek zonder afhankelijke pagina's te controleren

Voorbeeld van een beslisregel

Gebruik een Layout wanneer de wijziging het kader rond veel pagina's beïnvloedt:

new docs sidebar across the whole docs section -> Layout
new CTA block inside one page section -> Component
new page-specific proof content -> Page composition

FaceFlow — Layout System