Documentación para desarrolladores de Diseños

Los Layouts definen el marco de página compartido utilizado por las Páginas de FaceFlow.

Para usuarios técnicos, un Layout es el contrato del esqueleto de la página. Determina dónde viven las regiones compartidas, dónde se inyecta el contenido de la página y cómo una familia de Páginas mantiene un marco consistente sin duplicar la estructura página por página.

Responsabilidad principal

Un Layout debe controlar:

estructura general del documento
colocación del encabezado, pie de página y regiones compartidas
el punto principal de inserción del contenido
envoltorios estructurales y marco de la familia de páginas
estilos o comportamientos opcionales a nivel de Layout

Un Layout no debe poseer contenido de marketing específico de una página.

Esqueleto del Layout

La mayoría de los Layouts pueden entenderse mediante un patrón simple:

<!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>

El requisito clave es un punto de inserción {content} fiable. Sin él, las Páginas no tienen un lugar predecible para renderizarse.

Ejemplo de contrato de shell

Un Layout también puede exponer regiones compartidas adicionales manteniendo clara la frontera de propiedad:

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

La regla importante es que el shell permanezca estructural. La Página sigue siendo la propietaria de la secuencia renderizada en {content}.

Relación con Páginas y Componentes

Mantén claro el modelo de propiedad:

Layout posee el shell
Página posee la composición de la experiencia
Componente posee secciones de contenido reutilizables dentro de la experiencia

Cuando los Layouts se mantienen estructurales, las familias de páginas siguen siendo fáciles de evolucionar.

Regiones compartidas

Los Layouts son el lugar adecuado para regiones compartidas como:

navegación persistente
marco estándar de pie de página
barras laterales de documentación
elementos de soporte utilizados en toda una familia de páginas

Example:

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

Eso es reutilización estructural. Un banner promocional puntual no pertenece aquí.

Familias de Layouts

Las familias de Layouts comunes incluyen:

shell principal del sitio de marketing
shell de página de campaña
shell de recursos o documentación
shell de portal o base de conocimiento

Cada familia debe representar un patrón estructural duradero, no una variación de contenido temporal.

Estilos a nivel de Layout

Los Layouts pueden definir decisiones de estilo compartidas que pertenecen al shell:

<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>

Esto es apropiado cuando el estilo pertenece al marco de la página. El estilo específico de una sección sigue perteneciendo a los Componentes.

Impacto de los cambios

Los cambios en un Layout tienen un gran impacto porque un Layout suele afectar a muchas Páginas.

Antes de cambiar un Layout, revisa:

qué familia de páginas depende de él
si las regiones compartidas cambian de significado
si cambian las suposiciones sobre el ancho de contenido, el espaciado o la navegación
si los Componentes existentes siguen encajando correctamente en el shell

Patrón de revisión de Layout

Cuando se propone un cambio de Layout, verifica el impacto en este orden:

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

Esto ayuda a los equipos a evitar aprobar un cambio aparentemente pequeño en el shell que rompe silenciosamente varias Páginas dependientes.

Lista de verificación para revisión técnica

¿expone el Layout un punto claro de inserción de contenido?
¿se ocupa únicamente de cuestiones a nivel de shell?
¿pueden múltiples Páginas reutilizarlo sin excepciones puntuales?
¿las regiones compartidas son realmente compartidas?
¿afectaría el cambio de este Layout a muchas Páginas de forma comprensible?

Antipatrones

Evitar:

incrustar textos específicos de una página directamente en el Layout
crear Layouts casi duplicados para variaciones mínimas
mover la lógica de secciones al shell
usar el Layout como vertedero para todo el contenido compartido
cambiar la semántica del shell sin comprobar las Páginas dependientes

Regla de decisión de ejemplo

Usa un Layout cuando el cambio afecte al marco alrededor de muchas Páginas:

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