Système de design USWDS.

USWDS Foundation configurable : système de design

Les jetons par défaut constituent une configuration de départ

USWDS distingue les jetons du système, les paramètres du thème du projet, les classes utilitaires et les composants. La référence ci-dessous répertorie les choix de thème par défaut de la documentation actuelle. Un programme fédéral peut configurer d’autres rôles typographiques ou alias de couleur sans remplacer tous les composants.

L’aperçu est une comparaison indépendante de possibilités de recherche, qui utilise 3.14.0 CSS et l’accordéon JavaScript. Il ne comprend ni la bannière gouvernementale ni les marques d’identité visuelle. Les noms et étapes des programmes sont fictifs, et le filtrage s’effectue entièrement dans le navigateur.

Consultez la spécification associée

Espacement et jetons de thème du système de design USWDS

Tenez compte de l’unité, pas du chiffre

Une unité d’espacement USWDS vaut 8px : units(2) correspond à 16px, tandis que units(3) correspond à 24px. Les jetons en demi-unités permettent de définir des espacements plus petits, et la syntaxe des utilitaires utilise 05 pour une demi-unité. Un utilitaire margin-2 ne signifie pas une marge de deux pixels.

L’échelle comprend également des largeurs nommées, comme tablette et ordinateur. Ces noms sont des jetons réutilisables, et non une obligation de repenser chaque page pour chaque largeur. La comparaison utilise grid-container autour du contenu et une zone défilante dédiée au tableau.

@use "uswds-core" as *;
.opportunity-meta {
  padding: units(2);
  margin-bottom: units(3);
}

Référence du code

Consultez la spécification associée

Polices et rôles du système de design USWDS

Un rôle peut changer sans qu’il soit nécessaire de renommer les composants

Le jeton sans-serif par défaut correspond à Source Sans Pro, et le jeton serif à Merriweather. Les rôles body et UI correspondent au sans-serif ; le rôle heading, au serif. La fonction family("body") résout cette chaîne. Dans la documentation d’un projet, distinguez le rôle sémantique de la famille de polices finale.

L’aperçu local utilise explicitement Helvetica/Arial pour le corps du texte et Georgia pour les titres, afin d’éviter tout téléchargement de polices. Il s’agit d’une surcharge propre à cette étude, et non de l’identité typographique standard de USWDS. Dans une version de production, configurez ces rôles via les paramètres uswds-core ou copiez les fichiers de polices distribués.

@use "uswds-core" with (
  $theme-font-type-sans: "helvetica",
  $theme-font-type-serif: "georgia",
  $theme-font-role-body: "sans",
  $theme-font-role-heading: "serif"
);

Référence du code

Consultez la spécification associée

Alias de couleur du thème du système de design USWDS

Associez les alias à leur rôle

L’alias primary par défaut correspond à blue-60v, #005ea2. Primary-dark correspond à blue-warm-70v, #1a4480 ; ink correspond à gray-90, #1b1b1b. Il s’agit de valeurs de thème, et non d’une affirmation selon laquelle tous les sites USWDS doivent utiliser la même couleur de marque.

Utilisez l’alias sémantique pour une action ou un traitement de titre, et un jeton de couleur système uniquement lorsque c’est bien le choix de conception retenu. Remplacer un alias primary dans les paramètres est plus contrôlé que de remplacer chaque chaîne hexadécimale correspondante dans CSS compilé.

Consultez la spécification associée

Lignes d’offres comparables du système de design USWDS

Préservez la sémantique du tableau

L’exemple utilise une légende, des en-têtes de colonne avec scope="col" et un nom d’offre avec scope="row". Il s’agit d’un tableau, car les lecteurs comparent les mêmes champs de thème et d’étape entre plusieurs entrées. Ces relations restent accessibles lorsque la zone défile.

Le conteneur défilant possède tabindex="0" afin que les utilisateurs du clavier puissent y accéder. Il confine les données trop larges à cette zone, au lieu d’élargir tout le document. L’aperçu contient des cellules de texte ordinaires ; si des données de programme manquaient, il faudrait prévoir un état de contenu explicite plutôt que d’inventer un nombre.

Consultez la spécification associée

Le tri est une amélioration distincte

USWDS permet de trier les en-têtes grâce à data-sortable. Un tableau triable nécessite également une zone usa-table__announcement-region avec aria-live="polite". Pour les valeurs numériques, data-sort-value peut être nécessaire afin qu’un montant formaté soit trié comme une valeur plutôt que par ordre alphabétique. Cette comparaison n’active pas le tri, car le filtre par thème sur trois lignes est la démonstration souhaitée.

Consultez la spécification associée

Les exigences sous forme de panneaux dépliables dans le système de design USWDS

Reliez les identifiants du bouton et du panneau

Chaque usa-accordion__button possède un attribut aria-controls qui pointe vers le usa-accordion__content associé. Le composant natif JavaScript met à jour aria-expanded et la visibilité. Le modificateur de bordure change l’encadrement ; data-allow-multiple permet de laisser plusieurs sections ouvertes.

Le bouton est placé dans un titre afin que la structure du contenu reste compréhensible. Les exigences nécessaires pour déterminer si un programme est pertinent doivent rester visibles au-dessus du panneau dépliable. Ici, les panneaux contiennent des notes de préparation complémentaires et une explication du jeu de données fictif.

• Le titre décrit le sujet du panneau.
• Le bouton porte l’état déplié et l’identifiant cible.
• Le panneau conserve le même identifiant lorsque sa visibilité change.

Consultez la spécification associée

Installer l’arborescence complète des ressources du système de design USWDS

Préservez les chemins utilisés par CSS compilé

Installez @uswds/[email protected] et copiez son répertoire dist sans regrouper css, js, img et fonts dans un seul dossier. La feuille de style utilise des chemins relatifs vers les icônes et les polices. Sinon, une page peut sembler en partie correcte tout en étant dépourvue des symboles des panneaux dépliables ou des polices.

Chargez uswds-init.min.js dans l’en-tête, puis la feuille de style, et enfin uswds.min.js après le balisage du corps. La bibliothèque incluse ajoute le comportement de l’accordéon. Le champ de recherche et le filtre par thème ci-dessous reposent sur une logique personnalisée de l’application ; ils n’interrogent aucun service de recherche à distance.

Consultez la spécification associée

Filtrage et récupération dans le système de design USWDS

Une recherche doit présenter son résultat

Les styles natifs des éléments label, input, select et button mettent les commandes en forme ; l’application compare la recherche et le thème sélectionné aux trois entrées fictives. Le nombre de résultats se trouve dans une zone dynamique polie. Si aucun résultat ne correspond, un message explicatif et une action de réinitialisation s’affichent, tandis que la recherche saisie est conservée.

La démonstration distingue volontairement la découverte d’une possibilité de la candidature. Ouvrir le contenu préparatoire ne crée pas de brouillon et ne marque aucune exigence comme remplie. Une véritable demande de financement nécessiterait sa propre politique de programme, son système d’authentification et un état de transaction persistant.

1. Filtrez sur « Environnement » et examinez les possibilités restantes.
2. Recherchez une expression sans résultat, puis utilisez « Effacer les filtres ».
3. Ouvrez les deux panneaux de préparation et vérifiez que chacun possède son propre état de développement.

Consultez la spécification associée

Exemples de composants du système de design USWDS

<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
</div>

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>Illustrative research opportunities</caption>
    <thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead>
    <tbody><tr><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr></tbody>
  </table>
</div>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>