# Sistema de Design Foundation

## Prévia da interface do Sistema de Design Foundation

Valide os incrementos de páginas do livreto e as quantidades de cópias, revise os detalhes no Reveal e registre um estado de prova local.

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

### paleta Foundation

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| $primary-color | #1779ba | Função de ação primária da foundation-palette. |
| $secondary-color | #767676 | Função secundária. |
| $success-color | #3adb76 | Entrada da paleta de sucesso. |
| $warning-color | #ffae00 | Entrada da paleta de aviso. |
| $alert-color | #cc4b37 | Função de erro/alerta. |
| $body-font-color | #0a0a0a | Texto de leitura padrão. |
| $body-background | #fefefe | Plano de fundo padrão da página. |
| $light-gray | #e6e6e6 | Origem neutra clara para superfícies/bordas. |
| $medium-gray | #cacaca | Tom neutro médio. |
| $dark-gray | #8a8a8a | Tom neutro escuro. |
### Tipografia e geometria

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| $global-font-size | 100% | Tamanho de fonte base relativo ao navegador. |
| $global-lineheight | 1.5 | Altura de linha do corpo do texto. |
| $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | Preferência de família padrão. |
| $global-margin | 1rem | Ritmo de margens base. |
| $global-padding | 1rem | Ritmo de preenchimento base. |
| $global-radius | 0 | Cantos quadrados por padrão. |
| $global-width | rem-calc(1200) | Largura máxima padrão da grade. |
| $button-padding | 0.85em 1em | Preenchimento vertical/horizontal padrão do botão. |
### Pontos de interrupção da grade XY

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| small | 0 | Intervalo base. |
| medium | 640px | Divisão 7/5 entre formulário da prova e prévia. |
| large | 1024px | Intervalo grande. |
| xlarge | 1200px | Ponto de interrupção Sass disponível. |
| xxlarge | 1440px | Ponto de interrupção Sass disponível. |
| $breakpoint-classes | small medium large | Somente estas classes de largura nomeadas são geradas pela configuração padrão. |
### Regras explícitas da bancada de prova

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| booklet validator | integer, 4–200, divisible by 4 | Premissa original de validação prévia implementada no Abide. |
| copies validator | integer, 1–10 | Limite original de quantidade para a prova local. |
| Page heading | 38px / 1.15; mobile 30px | Aprimoramento tipográfico original. |
| Form padding | 24px; mobile 18px | Composição original de formulário compacto. |
| Cover colors | #e3d8bd / #718474 / #31483b | Ilustração original, não valores da paleta de Foundation. |
## Guia completo do sistema de design Foundation

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

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

Consulte a especificação de apoio

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

Consulte a especificação de apoio

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

Consulte a especificação de apoio

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

Consulte a especificação de apoio

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

1. Insira cinco páginas e envie o formulário: a revisão deve permanecer fechada.

2. Insira dezesseis páginas e um título, e conclua a verificação pré-impressão.

3. Revise os valores capturados antes de registrar a prova local.

Consulte a especificação de apoio

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

Consulte a especificação de apoio

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

Consulte a especificação de apoio

## Sistema de design Foundation: fixe as versões e carregue a cadeia de dependências

### Fixe e carregue a cadeia de dependências

Instale foundation-sites@6.9.0 e jquery@3.7.1 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.

Consulte a especificação de apoio

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

Consulte a especificação de apoio

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

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

Referência de código

- O formulário usa data-abide e novalidate para que Abide controle o fluxo de erros.

- Reveal é identificado por um ID exclusivo e por data-reveal.

### Validadores personalizados do Abide e fluxo do Reveal

Os validadores são registrados antes da inicialização de Foundation; formvalid abre um resumo no Reveal.

```
Foundation.Abide.defaults.validators.booklet=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=4&&n<=200&&n%4===0};
Foundation.Abide.defaults.validators.copies=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=1&&n<=10};
$(document).foundation();let pending=null;
$('#proof-form').on('submit',event=>event.preventDefault()).on('formvalid.zf.abide',()=>{pending={title:$('#job').val().trim(),pages:Number($('#pages').val()),copies:Number($('#copies').val()),stock:$('#stock').val()};const list=document.getElementById('proof-summary');list.replaceChildren();for(const[label,value]of [['Job',pending.title],['Pages',pending.pages],['Proof copies',pending.copies],['Stock',pending.stock]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=value;list.append(dt,dd);}$('#proof-review').foundation('open');}).on('forminvalid.zf.abide',()=>{document.querySelector('#proof-form [data-invalid]')?.focus()}).on('reset',()=>{$('#result').text('No proof recorded. This preview does not submit a print order.')});
$('#confirm').on('click',()=>{$('#result').text('Recorded locally: '+pending.title+' — '+pending.pages+' pages, '+pending.copies+' proof copies. No order was created.');$('#proof-review').foundation('close')});
```

Referência de código

- Neste fluxo do Abide testado, o atributo step, por si só, não impôs incrementos de quatro páginas; o validador personalizado faz isso.

- Apenas um formulário válido abre a caixa de diálogo de revisão.

### Arte original da capa e ajustes de layout

Arte de CSS e tipografia específica de cada página, separadas das configurações padrão de Foundation.

```
body{background:#f6f5f1}.proof-desk{max-width:1100px;padding-top:32px;padding-bottom:32px}header{margin-bottom:32px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#596456}h1{font-size:38px;line-height:1.15}.lead{font-size:18px;color:#53606a}form{background:white;padding:24px;border:1px solid #ddd}.paper-preview{background:#e3d8bd;aspect-ratio:4/3;padding:24px;position:relative;overflow:hidden;margin-bottom:20px}.paper-preview span{position:relative;z-index:1;font-size:36px;line-height:1;font-weight:700;letter-spacing:-.04em;color:#31483b}.paper-circle{position:absolute;width:75%;aspect-ratio:1;background:#718474;border-radius:50%;top:25%;left:40%}.paper-preview strong{position:absolute;bottom:20px;left:24px;color:#31483b;font-size:12px;letter-spacing:.13em}.callout h2{font-weight:600}#result{margin-top:16px}.reveal dl{display:grid;grid-template-columns:110px 1fr;gap:10px}.reveal dd{overflow-wrap:anywhere}.button:focus-visible{outline:3px solid #143e5b;outline-offset:3px}@media(max-width:639px){h1{font-size:30px}form{padding:18px}.paper-preview{margin-top:16px}}
```

Referência de código

- Todas as cores da capa são escolhas da aplicação.

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

```
<!-- npm install foundation-sites@6.9.0 jquery@3.7.1
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

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

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

- Estilos globais Fundamentos do Sass e paleta.

- XY Grid Larguras das células e tipos de espaçamento.

- Abide Regras e eventos de validação.

- Reveal Estrutura do modal e API.

- JavaScript Carregamento e inicialização de dependências.

- Formulários Marcação e estilização nativas do formulário.

## Recursos relacionados ao sistema de design Foundation

### Framework7

Um caderno de esboços nativo do Framework7 com ações reais de deslizar para fora, valores explícitos de tema do iOS, um acionador de ações acessível por teclado e uma lista filtrada que mantém os estudos concluídos até a redefinição.

### gluestack UI

Crie uma lista de conferência para um kit de campo com os criadores reais de Button e Input do gluestack, cores semânticas explícitas da v5 e o código-fonte completo de React Native Web. Examine a validação, as ações de teclado, a identidade estável dos itens e o progresso de preparação derivado localmente.

### Headless UI

Headless UI fornece componentes de interação sem estilos para React, como diálogos, listas de opções e interruptores. Este guia mostra como combinar o comportamento nativo de foco, seleção e pop-up desses componentes com CSS comum, usando como exemplo um fluxo de compartilhamento de documentos.


- [Referência de implementação](https://get.foundation/sites/docs/abide.html)
- [Fonte](https://get.foundation/sites/docs/global.html)
- [Fonte](https://get.foundation/sites/docs/xy-grid.html)
- [Fonte](https://get.foundation/sites/docs/abide.html)
- [Consulte a especificação de apoio](https://get.foundation/sites/docs/javascript.html)
- [Consulte a especificação de apoio](https://get.foundation/sites/docs/global.html)
- [Consulte a especificação de apoio](https://get.foundation/sites/docs/xy-grid.html)
- [Consulte a especificação de apoio](https://get.foundation/sites/docs/abide.html)
- [Consulte a especificação de apoio](https://get.foundation/sites/docs/reveal.html)
- [Referência de código](https://get.foundation/sites/docs/xy-grid.html)
- [Referência de código](https://get.foundation/sites/docs/abide.html)
- [Referência de código](https://get.foundation/sites/docs/global.html)
- [Estilos globais Fundamentos do Sass e paleta.](https://get.foundation/sites/docs/global.html)
- [XY Grid Larguras das células e tipos de espaçamento.](https://get.foundation/sites/docs/xy-grid.html)
- [Abide Regras e eventos de validação.](https://get.foundation/sites/docs/abide.html)
- [Reveal Estrutura do modal e API.](https://get.foundation/sites/docs/reveal.html)
- [JavaScript Carregamento e inicialização de dependências.](https://get.foundation/sites/docs/javascript.html)
- [Formulários Marcação e estilização nativas do formulário.](https://get.foundation/sites/docs/forms.html)