sistema de design .italia.

sistema de design .italia Sistema e implementação

Designers Italia por meio de sua biblioteca de código

Designers Italia vai além de um pacote CSS: inclui orientações de design de serviços, kits e recursos de implementação. Este exemplo se concentra na implementação documentada de Bootstrap Italia, fixada na versão 2.18.3. Ele não sugere que a instalação da biblioteca conclua o design de um serviço público nem que atenda a todos os requisitos de um site municipal.

Bootstrap Italia inclui e personaliza Bootstrap 5.2.3 na versão analisada. Não adicione outro pacote padrão de Bootstrap por cima. A prévia usa seus CSS nativos e arquivos de fonte Titillium Web fornecidos localmente, com um fluxo original de planejamento de visita à biblioteca em três etapas.

Consulte a especificação de apoio

sistema de design .italia Tipografia e valores exatos

Cada fonte tem uma função específica

Titillium Web é a família tipográfica padrão da interface. Lora é a opção serifada para textos mais longos, e Roboto Mono é usada em código ou conteúdo monoespaçado. A prévia carrega os pesos reais de Titillium Web que utiliza e mantém a licença da fonte, em vez de substituí-la silenciosamente por uma fonte do sistema.

O texto do corpo permanece em 16px. Os títulos mudam em 576px: em uma tela pequena, H1 tem 40px e entrelinha de 48px; depois, passa a 48px e entrelinha de 56px na versão instalada de CSS. A tabela da documentação indica entrelinha de 60px para desktop; a tabela de referência aqui registra a versão analisada e explica a diferença, em vez de misturar duas fontes.

Consulte a especificação de apoio

sistema de design .italia Etapas responsivas e espaçamento

Dois pontos de quebra resolvem problemas diferentes

O limite da tipografia é 576px, enquanto o Stepper altera a apresentação do cabeçalho abaixo de 992px. Em telas compactas, o rótulo atual e o índice n/total continuam visíveis. Os nomes das outras etapas não são espremidos em colunas ilegíveis. Quem visita pelo celular ainda precisa de um anúncio da etapa atual, fornecido pelo exemplo por meio do foco no título e de um texto de estado acessível.

As classes utilitárias de espaçamento seguem a escala rem verificada: 4, 8, 16, 24 e 48px para os tamanhos de 1 a 5, considerando o tamanho padrão da raiz. Os limites máximos dos contêineres da grade incluem 1176px em xl, em vez do valor padrão de Bootstrap de 1140px, muitas vezes lembrado de forma equivocada. O plano independente usa um limite mais estreito, de 900px, como uma escolha explícita da aplicação.

Consulte a especificação de apoio

sistema de design .italia Anatomia e responsabilidades do Stepper

O cabeçalho não controla o fluxo de trabalho

A estrutura documentada separa steppers-header, steppers-content e steppers-nav. Os itens da lista do cabeçalho recebem as classes confirmed e active; o índice informa a posição. Os botões anterior e próximo recebem suas classes específicas. Essas classes descrevem a apresentação. Cabe à aplicação decidir se o formulário atual é válido e se é possível avançar para uma etapa posterior.

O exemplo usa seções comuns para cada etapa e mantém os controles no DOM, ocultando as seções inativas. Assim, ao voltar à etapa da observação de acesso, o texto permanece. A etapa de revisão lê os controles existentes; não os recria com base em um resultado presumido do servidor.

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

Referência de código

Consulte a especificação de apoio

sistema de design .italia Validação e progresso significativo

Avance somente após fazer a escolha obrigatória

O tipo de visita é obrigatório. Se a pessoa tentar continuar sem escolhê-lo, a primeira etapa permanece ativa, uma mensagem de erro específica é exibida e o primeiro botão de opção recebe o foco. Ao escolher um tipo e continuar, a primeira etapa é marcada como concluída. A observação é opcional e pode ficar em branco; nesse caso, a revisão informa que nenhuma observação foi adicionada.

O botão Voltar leva à etapa anterior sem apagar a seleção nem a observação. Começar de novo limpa deliberadamente ambos e retorna ao início. A tela final é chamada de plano local: ela nunca afirma que uma reserva foi enviada, aprovada ou armazenada.

1. Tente continuar sem selecionar um botão de opção e confira a mensagem de erro.
2. Escolha um tipo de visita, adicione uma observação curta e abra a revisão.
3. Volte à observação, confirme que o valor foi mantido e, depois, comece de novo para limpar o plano.

Consulte a especificação de apoio

sistema de design .italia Estado acessível e foco

Mantenha alinhadas a posição visual e a posição anunciada

O item ativo da lista recebe aria-current="step" e um rótulo da etapa atual oculto visualmente. As etapas anteriores recebem um texto de conclusão, além da classe confirmed. O índice numérico compacto fica oculto para tecnologias assistivas, pois o título atual e a semântica da etapa já indicam a posição; ele continua visível para orientação visual.

O corpo que muda usa aria-live="polite", conforme a orientação oficial para uma sequência de página única. O exemplo também move o foco para o novo título, oferecendo às pessoas que usam o teclado um ponto de início previsível para a leitura. Teste essa combinação com as tecnologias assistivas compatíveis para evitar anúncios repetitivos em formulários mais complexos.

• Use botões reais para mudar de etapa e desative o botão Voltar na primeira etapa.
• Mantenha os rótulos associados aos botões de opção e à área de texto; o texto do placeholder não substitui um rótulo.
• Indique em texto os estados atual e concluído, não apenas pela cor azul ou por um ícone.

Consulte a especificação de apoio

sistema de design .italia Recursos e inicialização nativos

CSS, fontes e JavaScript opcional

O pacote fornece CSS, um script incluído, fontes de origem e um sprite SVG. Este exemplo de Stepper precisa de CSS e das fontes escolhidas; a navegação faz parte da lógica da aplicação. Outros componentes usam data-bs-toggle ou os atributos de dados documentados para inicialização automática. Não combine a inicialização automática com uma segunda instância manual do mesmo componente.

Ao usar módulos, importe apenas os componentes necessários para a aplicação. A documentação oficial observa que os métodos de transição retornam antes do fim da transição e que as chamadas feitas durante uma transição podem ser ignoradas. Aguarde o evento de conclusão correspondente antes de encadear ações dependentes nesses componentes; este Stepper simples não inventa uma API de transição nativa.

Consulte a especificação de apoio

sistema de design .italia Limites de integração

Use o kit sem sugerir que o serviço foi concluído

A documentação da biblioteca recomenda manter a versão atualizada e desaconselha depender de uma CDN pública em produção. A configuração fixa a versão verificada, e o exemplo local inclui os próprios recursos e licenças. Um serviço real ainda precisa de conteúdo planejado, tratamento de dados, validação no servidor e uma confirmação de envio.

O exemplo mostra uma visita genérica a uma biblioteca, sem logotipo municipal nem insígnia oficial. É um exemplo didático de OpenDesign, não um serviço de uma autoridade pública. Mantenha essa distinção em qualquer protótipo para que uma tela de revisão visualmente refinada não seja confundida com um registro de solicitação real.

Consulte a especificação de apoio

Exemplos de componentes do sistema de design sistema de design .italia

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>