# système de design .italia ## système de design .italia Aperçu de l’interface Parcourez un véritable plan local en trois étapes, gérez un choix vide et revenez en arrière sans perdre votre note. ## système de design .italia Référence de conception Package installé Bootstrap Italia 2.18.3 et documentation officielle ; rendu natif de CSS et des polices vérifié à trois largeurs. ### Typographie et polices | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Main family | Titillium Web | Les graisses natives WOFF2 400/600/700 sont incluses dans l’aperçu. | | Long reading / code | Lora / Roboto Mono | font-serif et font-monospace ; n’utilisez pas une police à chasse fixe pour toute l’interface. | | Body | 16px / 1.5 | Base par défaut depuis la révision typographique 2.7. | | H1 mobile | 40px / 48px | CSS 2.18.3 réel sous 576px. | | H1 from 576px | 48px / 56px | CSS natif mesuré ; le tableau de la documentation indique toujours une interligne de 60px. | | Responsive typography | 576px threshold | Différent du seuil compact de 992px de l’indicateur d’étapes. | ### Jetons sémantiques natifs | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --bs-primary | hsl(210,100%,40%) = #0066cc | Couleur des actions principales et des liens. | | --bs-body-color | hsl(0,0%,10%) | Couleur de texte par défaut. | | --bs-success | hsl(160,100%,25%) | Signification de réussite, et non état de fin automatique. | | --bs-danger | hsl(350,60%,50%) | Signification d’erreur ou d’action destructive. | | --bs-warning | hsl(36,100%,30%) | Rôle d’avertissement, distinct du jaune de la palette. | | --bs-border-radius | 4px | Des variantes de 2px et 8px sont également disponibles. | ### Espacement et mise en page | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Utility sizes 0–5 | 0, 4, 8, 16, 24, 48px | Avec une racine standard de 16px ; par ex., p-3=1rem, p-5=3rem. | | Responsive thresholds | 576 / 768 / 992 / 1200 / 1400px | De sm à xxl. | | Container maxima | 540 / 720 / 960 / 1176 / 1320px | CSS Italia réel ; xl diffère des 1140px de Bootstrap standard. | | Preview width | 900px maximum | Choix de l’application pour un plan local court, et non jeton de conteneur officiel. | | Stepper compact mode | Below 992px | Seuls le libellé de l’étape active et l’index textuel sont visibles. | ### Structure de l’indicateur d’étapes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Root/header | steppers / steppers-header | L’en-tête contient une liste d’étapes. | | Stage states | confirmed / active | Le code de l’application doit les mettre à jour après validation. | | Mobile index | steppers-index | Veillez à synchroniser n/le total avec l’étape active. | | Body | steppers-content; aria-live=polite | Annonce le contenu de la page unique lorsqu’il change. | | Navigation | steppers-nav; steppers-btn-prev / steppers-btn-next | Les classes définissent la présentation, pas le routage automatique des formulaires. | ## système de design .italia Guide complet Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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é. ```

Add an access note

``` 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 ### Structure de l’indicateur d’étapes à la deuxième étape Les états confirmé et actif ainsi que l’index mobile doivent être synchronisés par le code de l’application. ```

Add an access note

``` Référence du code ### Parcours complet de planification en local CSS natif, polices, validation obligatoire des boutons radio, note facultative, vérification, retour et réinitialisation. ``` Prepare a library visit

Independent service example

Prepare a library visit

Choose a visit format, add a note and review your local plan.

  • Visit type
  • Access note
  • Review

Choose a visit type

``` Référence du code ## Configuration de l’agent système de design .italia ### Point de départ de l’implémentation Configuration native de CSS et des polices. La navigation de l’indicateur d’étapes relève de la logique de l’application ; un exemple fonctionnel complet suit. Le ZIP de l’exemple complet disponible dans les Sources contient également les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/designers-italia.html. N’ouvrez pas les exemples basés sur des modules avec file://. ``` npm install bootstrap-italia@2.18.3 # Copy dist/css/bootstrap-italia.min.css into public/vendor. # Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face. # CSS is sufficient for the Stepper presentation; application code owns navigation. # For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once. ``` ### Un prompt pour votre projet ``` Utilisez Bootstrap Italia 2.18.3 avec CSS natif et Titillium Web. Créez la structure documentée des indicateurs d’étapes, de l’en-tête, du contenu et de la navigation, avec des états actif et confirmé ainsi qu’un index mobile synchronisé. Gérez la validation et la navigation dans le code de l’application, conservez les valeurs lors d’un retour en arrière et libellez l’état final en fonction de la réponse réelle du serveur. N’ajoutez pas une seconde instance d’exécution de Bootstrap et ne prétendez pas qu’une vérification locale a été envoyée. ``` ## Sources et périmètre de système de design .italia Exemple OpenDesign indépendant consacré à Bootstrap Italia. Aucune identité d’autorité publique ni aucun véritable service de réservation. - Installation et ressources CSS, modules, bundle, polices et limites de l’environnement d’exécution. - Indicateurs d’étapes Structure native, états, mode compact et région dynamique. - Typographie Familles de polices et titres adaptatifs. - Espacement Échelle des utilitaires et syntaxe. - Source publiée Dimensions de la version épinglée et variables sémantiques. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Ressources connexes de système de design .italia ### Designsystemet Découvrez les véritables rôles du thème Designsystemet, ses modes de taille et le comportement natif des champs grâce à un éditeur complet de brief de tâche, avec indication du nombre de caractères et préservation de l’état de présentation. ### DSFR Découvrez la typographie, la grille et l’accordéon API du système de l’État français dans leur contexte institutionnel. Comparez les comportements d’ouverture liés et indépendants dans un exemple pédagogique au ton neutre. ### Europa Component Library Examinez les rôles de couleur, de typographie et d’espacement de l’EC Europa à travers un brief complet avec accordéon natif, incluant la navigation au clavier, l’ouverture de tous les éléments et une solution de repli lisible en l’absence de JavaScript. - [Référence de mise en œuvre](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Source](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/) - [Source](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css) - [Source](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/) - [Source](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Consultez la spécification associée](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/) - [Consultez la spécification associée](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/) - [Consultez la spécification associée](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/) - [Référence du code](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Consultez la spécification associée](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Installation et ressources CSS, modules, bundle, polices et limites de l’environnement d’exécution.](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/) - [Indicateurs d’étapes Structure native, états, mode compact et région dynamique.](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Typographie Familles de polices et titres adaptatifs.](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/) - [Espacement Échelle des utilitaires et syntaxe.](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/) - [Source publiée Dimensions de la version épinglée et variables sémantiques.](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)