Uma bancada funcional de comprovação do Foundation que usa XY Grid, validadores personalizados do Abide, confirmação com Reveal, configurações Sass reais e código completo de integração local.
Foundation nativo para Sites 6.9.0 CSS/JavaScript com jQuery 3.7.1; regras originais de verificação de impressão. · Referência de implementação
02
Referência de design do Sistema de Design Foundation
Configurações de Foundation para Sites 6.9.0 e CSS padrão compilado, com jQuery 3.7.1. Os nomes com prefixo de cifrão são configurações do Sass, não propriedades personalizadas CSS do navegador. As regras de impressão e as cores da capa são escolhas originais do exemplo.
Sistema de design Foundation para sites com um runtime real
Foundation para sites com um ambiente de execução real
Foundation para sites combina uma estrutura responsiva CSS com plugins JavaScript. A bancada de provas usa XY Grid para o layout, Abide para a validação e Reveal para o diálogo de revisão. Seu runtime compilado é carregado após o jQuery 3.7.1, e $(document).foundation() inicializa os atributos de dados quando a página existe.
Isso é diferente de Foundation para e-mails. A página usa formulários do navegador, validação JavaScript e um modal; sua marcação não é um modelo de e-mail. O exemplo offline inclui os arquivos reais da versão 6.9.0 e adiciona um pequeno script original, em vez de desenhar uma imitação estática desses componentes.
Configurações Sass do sistema de design Foundation e paleta padrão
Configurações Sass e paleta padrão
A tabela de referência apresenta as configurações da configuração Sass instalada. A paleta padrão inclui primary #1779ba, secondary #767676, success #3adb76, warning #ffae00 e alert #cc4b37. Elas representam as funções de cor do framework; a capa em tons quentes do livreto é uma criação original de CSS, com paleta própria.
As configurações prefixadas com cifrão são entradas de compilação. Elas não são propriedades personalizadas do CSS que possam ser atribuídas em um atributo style do navegador. Use uma compilação Sass para alterar o tema do framework ou adicione CSS comum com escopo claramente delimitado após a folha de estilos compilada para fazer ajustes específicos de uma tela. O exemplo adota a segunda abordagem para o título, o espaçamento interno do formulário e o plano de fundo.
Geometria padrão do sistema de design Foundation e hierarquia de leitura local
Geometria padrão e hierarquia de leitura local
Foundation começa com um tamanho de fonte de 100% relativo ao navegador, altura de linha do corpo de 1.5 e uma pilha de fontes Helvetica Neue/Helvetica/Roboto/Arial. O raio global é zero, resultando em um padrão com cantos mais retos do que os de muitos kits de componentes contemporâneos. Os campos de entrada, callouts e o formulário de prova mantêm esse estilo, sem adotar um tratamento de cantos arredondados grandes que não tem relação com ele.
A aplicação define um título de página de 38px com altura de linha de 1.15, reduzido para 30px em dispositivos móveis. O texto de abertura tem dezoito pixels. A ilustração usa letras em negrito empilhadas e um círculo simples para deixar evidente o contexto de impressão, enquanto o formulário permanece uma superfície de trabalho branca e estável. Essas são decisões locais, listadas por completo no CSS fornecido.
Sistema de design Foundation: grade XY e escolha de gutters
Grade XY e seleção de espaçamento entre colunas
O grid-container contém uma linha grid-x grid-margin-x. Suas duas células são medium-7 e medium-5, dividindo doze colunas entre o formulário e a prévia do livreto acima de 640px. Abaixo desse ponto de interrupção, elas se empilham na ordem do código-fonte. A linha aninhada Pages/Proof copies usa células small-6 para manter os dois campos numéricos compactos lado a lado em um celular.
Foundation oferece grades com margens e com espaçamento interno. Neste exemplo, os gutters com margens dentro do contêiner são usados de forma consistente, sem misturar os dois tipos em uma mesma linha. O mapa de pontos de interrupção inclui xlarge e xxlarge para uso em Sass, mas a configuração padrão breakpoint-classes gera classes de largura small, medium e large. A existência de uma entrada no mapa não significa que todas as classes utilitárias correspondentes estarão presentes no arquivo compilado.
Sistema de design Foundation: registre as regras reais de validação
Registre as regras reais de validação
O formulário usa data-abide com novalidate e data-validate-on=submit para evitar que alterações nos campos reorganizem os erros durante o clique em um botão; cada elemento form-error aponta para seu campo por meio de data-form-error-for. Um callout de alerta marcado com data-abide-error fornece um resumo para o formulário. Os erros dos campos obrigatórios de título e de confirmação da verificação pré-impressão são tratados junto com dois validadores numéricos explícitos.
O validador do livreto aceita números inteiros de quatro a duzentos, divisíveis por quatro. O validador de cópias aceita números inteiros de um a dez. Ambos são registrados em Foundation.Abide.defaults.validators antes da inicialização e referenciados por data-validator. Neste fluxo testado, o atributo step nativo, por si só, não impôs o incremento do livreto, então a implementação não depende dele. A premissa de páginas em múltiplos de quatro vale para este exemplo, não para todos os processos de impressão.
Insira cinco páginas e envie o formulário: a revisão deve permanecer fechada.
Insira dezesseis páginas e um título, e conclua a verificação pré-impressão.
Revise os valores capturados antes de registrar a prova local.
Sistema de design Foundation: conecte a aparência dos erros à navegação
Conecte a aparência dos erros à navegação
No evento forminvalid.zf.abide, a aplicação coloca o foco no primeiro campo com data-invalid. Assim, o usuário vai diretamente a um ponto que precisa de correção, enquanto o callout de alerta explica o problema geral. Os elementos de erro dos campos são associados por meio de aria-describedby, então a mensagem não é apenas um indicador visual vermelho ao lado de um campo sem nome acessível.
O fluxo completo de eventos está visível no exemplo JavaScript. O evento submit comum é cancelado para impedir que o navegador navegue para um endpoint inexistente. Somente formvalid.zf.abide cria o registro temporário e abre a revisão. Isso é importante: vincular o diálogo de revisão diretamente ao botão de envio ignoraria o resultado da validação.
Sistema de design Foundation: revise um registro no Reveal
Revise uma captura no Reveal
O modal inclui data-reveal e uma relação aria-labelledby com seu título. O manipulador do formulário válido cria um objeto temporário e monta sua lista de definições usando textContent. Reveal é aberto por meio de Foundation API, fornece o comportamento modal e pode ser fechado pelos botões data-close ou pelo manipulador de confirmação.
Manter edição fecha o diálogo sem registrar um resultado. Registrar prova local grava os mesmos valores temporários no callout de status antes de fechar. O ícone de fechar tem um rótulo explícito. A confirmação não afirma que um arquivo foi enviado nem que um pedido de impressão foi criado, pois a aplicação não realiza nenhuma dessas operações.
Reveal exibe os valores capturados pelo evento de formulário válido.
Cancelar não altera nenhum resultado local registrado.
Confirmar registra apenas o status da prévia, não um pedido externo.
Sistema de design Foundation: fixe as versões e carregue a cadeia de dependências
Fixe e carregue a cadeia de dependências
Instale [email protected] e [email protected] e, em seguida, copie CSS, Foundation JavaScript compilados e o jQuery para os ativos locais. Carregue a folha de estilos antes dos ajustes da página. Carregue primeiro o jQuery, depois Foundation e, por último, o script da aplicação; o atributo defer mantém essa ordem após a análise do documento.
Registre os validadores personalizados antes de chamar $(document).foundation(). Registrá-los depois da inicialização cria uma dependência temporal desnecessária. O exemplo atual usa o runtime compilado completo para garantir a reprodutibilidade. Um pacote de produção pode selecionar plugins e suas dependências, mas não deve remover Abide ou Reveal enquanto os respectivos atributos data permanecerem na marcação.
Decisão local de pré-produção do sistema de design Foundation, não aprovação para produção
A validação prévia é uma decisão local, não uma aprovação para produção
O diagrama e a regra de contagem de páginas tornam concreto o contexto da prova, mas não são especificações de produção para uma gráfica específica. O exemplo pede explicitamente que os usuários confirmem as restrições reais com o fornecedor responsável pela produção. A quantidade de cópias é um limite deste exemplo local, não uma informação de estoque ou preço.
Um fluxo real de envio exigiria inspeção de arquivos, validação no servidor e uma resposta de aceitação rastreável. Foundation pode fornecer os elementos básicos da interface, mas essas verificações específicas do domínio devem vir da aplicação. Deixar esse limite explícito permite que o leitor reutilize o padrão de validação e revisão sem incorporar uma alegação enganosa de sucesso.
Exemplos de componentes do sistema de design Foundation
Marcação da mesa de prova
XY Grid, erros explícitos no formulário, caixa de seleção de pré-produção, avisos e confirmação com Reveal.
html
<main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
Configuração do agente do sistema de design Foundation
Ponto de partida para implementação
O app.js fornecido registra os validadores do Abide antes da inicialização e conecta o Reveal a um evento de formulário válido. Salve o CSS original como style.css. A prévia local incorpora essas mesmas dependências. O wrapper de HTML inclui toda a marcação do body; salve os exemplos fornecidos de interação e CSS com os nomes de arquivo referenciados aqui.
html
<!-- npm install [email protected][email protected]
mkdir -p assets
cp node_modules/foundation-sites/dist/css/foundation.min.css assets/
cp node_modules/foundation-sites/dist/js/foundation.min.js assets/
cp node_modules/jquery/dist/jquery.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Proof desk</title>
<link rel="stylesheet" href="assets/foundation.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/jquery.min.js" defer></script>
<script src="assets/foundation.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
</body></html>
Um prompt para seu projeto
Prompt para agente de IA
Comece pela mesa de prova para impressão fornecida do Foundation 6.9.0, com sua marcação XY Grid, seus validadores do Abide e seu fluxo do Reveal. Mantenha as verificações de número inteiro e múltiplo de quatro para a contagem de páginas, além da validação acionada pelo envio, preservando os rótulos e as associações com os erros. Abra a revisão nativa do Reveal somente quando os detalhes da prova forem válidos e mantenha o cancelamento separado da confirmação local. Preserve a inicialização completa e o CSS original do layout; não substitua os validadores apenas por classes visuais de erro nem dê a entender que um trabalho de impressão foi encomendado.
05
Fontes e escopo do sistema de design Foundation
Foundation for Sites 6.9.0 com jQuery 3.7.1. As regras de impressão e a ilustração são exemplos originais. Não há implementação de envio de arquivos nem de pedidos de impressão.
