système de design .italia.

système de design .italia Système et mise en œuvre

Designers Italia et sa bibliothèque de code

Designers Italia va au-delà d’un package CSS : il comprend des conseils de conception de services, des kits et des ressources de mise en œuvre. Cet exemple se concentre sur l’implémentation documentée de Bootstrap Italia, en version 2.18.3. Il ne signifie pas que l’installation de la bibliothèque suffit à concevoir un service public ou à satisfaire à toutes les exigences applicables à un site municipal.

Dans la version examinée, Bootstrap Italia intègre et personnalise Bootstrap 5.2.3. N’ajoutez pas par-dessus une seconde version standard de Bootstrap. L’aperçu utilise son CSS natif ainsi que des fichiers de police Titillium Web fournis localement, avec un parcours original en trois étapes pour planifier une visite à la bibliothèque.

Consultez la spécification associée

système de design .italia Typographie et valeurs exactes

Chaque police a un rôle distinct

Titillium Web est la famille de polices utilisée pour l’interface courante. Lora est l’option avec empattements pour les textes longs, et Roboto Mono convient au code ou aux contenus à chasse fixe. L’aperçu charge les véritables graisses de Titillium Web qu’il utilise et conserve la licence de la police, plutôt que de la remplacer discrètement par une police système.

Le corps du texte reste à 16px. La taille des titres change à 576px : H1 passe de 40px avec une interligne de 48px sur petit écran à 48px avec une interligne de 56px dans la version CSS installée. Le tableau de la documentation indique une interligne de 60px sur ordinateur ; le tableau de référence ci-présent consigne les mesures de la version examinée et explique cet écart, plutôt que de mélanger deux sources.

Consultez la spécification associée

système de design .italia Étapes responsives et espacement

Deux points de rupture répondent à des besoins différents

Le seuil typographique est de 576px, tandis que l’en-tête de l’indicateur d’étapes change de présentation sous 992px. Sur les écrans compacts, le libellé de l’étape active et l’index n/le total restent visibles. Les noms des autres étapes ne sont pas comprimés en colonnes illisibles. Les visiteurs sur mobile doivent toujours être informés de l’étape en cours ; l’exemple le fait au moyen du focus sur le titre et d’un texte d’état accessible.

Les utilitaires d’espacement suivent l’échelle rem vérifiée : 4, 8, 16, 24 et 48px pour les tailles 1 à 5, avec une taille de racine standard. Les largeurs maximales des conteneurs de la grille comprennent 1176px pour xl, et non la valeur standard de Bootstrap souvent reprise de mémoire. Le plan indépendant est limité à 900px, un choix explicite de l’application.

Consultez la spécification associée

système de design .italia Anatomie de l’indicateur d’étapes et responsabilités

L’en-tête ne pilote pas le parcours

La structure documentée distingue steppers-header, steppers-content et steppers-nav. Les éléments de la liste d’en-tête reçoivent les classes confirmed et active ; l’index indique la position. Les boutons Précédent et Suivant reçoivent leurs classes respectives. Ces classes décrivent la présentation. C’est à l’application de déterminer si le formulaire en cours est valide et si l’utilisateur peut passer à une étape ultérieure.

L’exemple utilise des sections ordinaires pour chaque étape et conserve les contrôles dans le DOM en masquant les sections inactives. Le retour à l’étape de la note d’accès préserve donc son contenu. L’étape de récapitulatif lit les contrôles existants ; elle ne les recrée pas à partir d’un résultat serveur supposé.

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

Référence du code

Consultez la spécification associée

système de design .italia Validation et progression pertinente

Ne passez à l’étape suivante qu’après le choix obligatoire

Le type de visite est obligatoire. Si l’utilisateur continue sans le choisir, la première étape reste active, un message d’erreur précis s’affiche et le focus est placé sur le premier bouton radio. Après avoir choisi un type et continué, la première étape est marquée comme terminée. La note est facultative et peut rester vide ; le récapitulatif indique alors qu’aucune note n’a été ajoutée.

Le bouton Retour permet de revenir à l’étape précédente sans effacer le choix ni la note. Le bouton Recommencer efface délibérément les deux et ramène au début. L’écran final présente un plan local : il ne prétend jamais qu’une réservation a été envoyée, approuvée ou enregistrée.

1. Cliquez sur Continuer sans sélectionner de bouton radio et examinez le message d’erreur.
2. Choisissez un type de visite, ajoutez une courte note et ouvrez le récapitulatif.
3. Revenez à la note, vérifiez que son contenu est conservé, puis recommencez pour effacer le plan.

Consultez la spécification associée

système de design .italia États accessibles et focus

Faites correspondre la position visuelle et la position annoncée

L’élément actif de la liste porte aria-current="step" et un libellé d’étape en cours masqué visuellement. Les étapes précédentes reçoivent un texte indiquant leur achèvement ainsi que leur classe de confirmation. L’index numérique compact est masqué aux technologies d’assistance, car le titre actuel et la sémantique des étapes indiquent déjà la position ; il reste visible pour se repérer visuellement.

Le contenu qui change utilise aria-live="polite", conformément aux recommandations officielles pour une séquence sur une seule page. L’exemple déplace également le focus sur le nouveau titre afin de fournir un point de départ prévisible aux utilisateurs du clavier. Testez cette combinaison avec les technologies d’assistance prises en charge pour éviter des annonces trop répétitives dans un formulaire plus complexe.

• Utilisez de vrais boutons pour changer d’étape et désactivez Retour à la première étape.
• Associez les libellés aux boutons radio et à la zone de texte ; le texte indicatif ne remplace pas un libellé.
• Indiquez les états actuel et terminé par du texte, et pas uniquement par la couleur bleue ou une icône.

Consultez la spécification associée

Ressources natives et initialisation de système de design .italia

CSS, polices et JavaScript facultatif

Le package fournit CSS, un script intégré, les polices sources et un sprite SVG. Cet exemple d’indicateur d’étapes nécessite CSS et les polices choisies ; sa navigation relève de la logique de l’application. Les autres composants utilisent data-bs-toggle ou les attributs de données indiqués dans leur documentation pour s’initialiser automatiquement. Ne combinez pas l’initialisation automatique avec une deuxième instance manuelle du même composant.

Avec les modules, n’importez que les composants nécessaires à l’application. Les recommandations officielles précisent que les méthodes de transition renvoient la main avant la fin de la transition et que les appels effectués pendant celle-ci peuvent être ignorés. Pour enchaîner des actions dépendantes dans ces composants, attendez l’événement de fin correspondant ; cet indicateur d’étapes simple ne simule pas de transition native API.

Consultez la spécification associée

Limites d’intégration de système de design .italia

Utiliser la bibliothèque sans laisser entendre qu’un service a été fourni

La documentation de la bibliothèque recommande de maintenir sa version à jour et déconseille de dépendre d’un CDN public en production. La configuration épingle la version vérifiée et l’exemple local inclut ses propres ressources et licences. Un véritable service nécessite encore une conception des contenus, un traitement des données, une validation côté serveur et une confirmation de l’envoi.

L’exemple présente une visite générique à la bibliothèque, sans logo municipal ni insigne officiel. Il s’agit d’un exemple pédagogique OpenDesign, et non d’un service d’une autorité publique. Maintenez cette distinction dans tout prototype afin qu’un état de vérification visuellement abouti ne puisse pas être pris pour une véritable demande.

Consultez la spécification associée

Exemples de composants du système de design système 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>