Documentação do Desenvolvedor de Layouts

Layouts definem a moldura de página compartilhada usada pelas Páginas do FaceFlow.

Para usuários técnicos, um Layout é o contrato do invólucro da página. Ele determina onde residem as regiões compartilhadas, onde o conteúdo da página é injetado e como uma família de Páginas mantém uma moldura consistente sem duplicar a estrutura página a página.

Responsabilidade Principal

Um Layout deve controlar:

estrutura geral do documento
posicionamento de header, footer e regiões compartilhadas
o ponto de inserção do conteúdo principal
invólucros estruturais e enquadramento da família de páginas
estilo ou comportamento opcional em nível de layout

Um Layout não deve ser responsável por conteúdo de marketing específico da página.

Esqueleto do Layout

A maioria dos Layouts pode ser entendida por meio de um padrão simples:

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

O requisito chave é um ponto de inserção {content} confiável. Sem isso, as Páginas não têm um local previsível para renderizar.

Exemplo de Contrato do Shell

Um Layout também pode expor regiões compartilhadas adicionais mantendo a fronteira de propriedade limpa:

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

A regra importante é que o shell permaneça estrutural. A Página ainda é responsável pela sequência renderizada em {content}.

Relacionamento com Páginas e Componentes

Mantenha o modelo de propriedade claro:

Layout possui o shell
Página possui a composição da experiência
Componente possui seções de conteúdo reutilizáveis dentro da experiência

Quando os Layouts permanecem estruturais, as famílias de Páginas continuam fáceis de evoluir.

Regiões Compartilhadas

Os Layouts são o lugar adequado para regiões compartilhadas, tais como:

navegação persistente
enquadramento padrão de footer
sidebars de documentação
trilhos de suporte usados em uma família de páginas

Exemplo:

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

Isso é reutilização estrutural. Um banner promocional pontual não pertence aqui.

Famílias de Layout

Famílias comuns de layout incluem:

invólucro principal do site de marketing
invólucro de landing de campanha
invólucro de recursos ou documentação
invólucro de portal ou base de conhecimento

Cada família deve representar um padrão estrutural durável, não uma variação temporária de conteúdo.

Estilização em Nível de Layout

Layouts podem definir decisões de estilo compartilhadas que pertencem ao 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>

Isso é apropriado quando o estilo pertence ao quadro da página. Estilos específicos de seção ainda pertencem aos Componentes.

Impacto de Mudanças

Mudanças no Layout têm alto impacto porque um Layout frequentemente afeta muitas Páginas.

Antes de alterar um Layout, reveja:

qual família de páginas depende dele
se as regiões compartilhadas mudam de significado
se a largura do conteúdo, espaçamento ou suposições de navegação mudam
se os Componentes existentes ainda se encaixam corretamente no shell

Padrão de Revisão de Layout

Quando uma mudança no Layout é proposta, verifique o impacto nesta ordem:

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

Isso ajuda as equipes a evitar aprovar uma alteração aparentemente pequena no shell que silenciosamente quebra várias Páginas dependentes.

Lista de Verificação de Revisão Técnica

o Layout expõe um ponto de inserção de conteúdo claro?
ele possui apenas preocupações em nível de shell?
múltiplas Páginas podem reutilizá-lo sem exceções pontuais?
as regiões compartilhadas são realmente compartilhadas?
alterar este Layout afetaria muitas Páginas de maneira compreensível?

Anti-padrões

Evite:

embutir texto específico da página diretamente no Layout
criar Layouts quase duplicados para variações mínimas
mover lógica de seção para o shell
usar o Layout como depósito para todo o conteúdo compartilhado
alterar a semântica do shell sem verificar as Páginas dependentes

Regra de Decisão de Exemplo

Use um Layout quando a mudança afetar a moldura ao redor de muitas 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