# Système de design Det Fælles Designsystem ## Aperçu de l’interface du système de design Det Fælles Designsystem Comparez cinq ressources de planification originales, inversez l’ordre et repartez d’une recherche sans résultat. ## Référence de conception du système de design Det Fælles Designsystem Thème Borger.dk de DKFDS 11.3.0, carte des espacements, carte typographique et variables de mise en évidence réelle du focus. Les noms indiqués sont des références aux sources Sass. ### Thème Borger.dk et focus | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $borger-primary | #44831E | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $borger-primary-dark | #3C5C22 | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $borger-primary-darker | #233614 | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $header-portal-background-color | #f1f1f1 | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $theme-focus-width | 3px | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $theme-focus-offset | 1px | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $theme-focus-style | solid | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $typography-text-max-width | 66ch | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | | $typography-font-family | IBM Plex Sans, system-ui, system, sans-serif | Configuration Sass réelle de la version 11.3.0 ; ces noms sont des variables source, et non des propriétés personnalisées CSS. | ### Clés de la carte des espacements | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | 0 | 0px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 1 | 2px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 2 | 4px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 3 | 8px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 305 | 12px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 4 | 16px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 405 | 20px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 5 | 24px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 505 | 28px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 6 | 32px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 7 | 40px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | | 8 | 48px | Carte $spacers publiée. Les clés non séquentielles telles que 305 et 405 correspondent à 12px et 20px ; ne les interprétez pas comme des tailles en pixels. | ### Carte des tailles de police | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | 2xs | 1.2rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | xs | 1.4rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | sm | 1.6rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | md | 1.8rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | lg | 2.0rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | xl | 2.1rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | 2xl | 2.2rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | 3xl | 2.4rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | 4xl | 2.8rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | 5xl | 3.2rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | 6xl | 4.0rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | | 7xl | 4.8rem | Entrée $fds-font-sizes publiée. La racine par défaut est de 62.5 % et respecte les préférences de police du navigateur ; avec une taille par défaut de 16px dans le navigateur, 1.6rem équivaut à 16px. | ## Guide complet du système de design Det Fælles Designsystem 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. ## Thème DKFDS et périmètre d’implémentation du système de design Det Fælles Designsystem ### Choisissez délibérément Borger.dk ou Virk > Det Fælles Designsystem distribue des feuilles de style distinctes pour Borger.dk et Virk. Cet exemple utilise la version 11.3.0 de dkfds et la feuille de style Borger.dk, avec ses commandes principales vertes caractéristiques et sa typographie IBM Plex Sans. Il ne se contente pas de changer la couleur d’un seul bouton en prétendant appliquer un thème complet. Le choix d’un autre thème doit être une décision d’implémentation délibérée. ### N’attribuez pas le tri original à la bibliothèque Les recommandations publiées pour les tableaux fournissent le balisage et les styles, mais confient explicitement à l’application la gestion du tri et de la recherche. L’aperçu inclut une implémentation originale complète de ces deux fonctions. Cette distinction est importante : importer uniquement DKFDS JavaScript ne transforme pas un tableau quelconque en vue de données consultable et triable. ## Valeurs Sass et rythme de base du système de design Det Fælles Designsystem ### Consultez les cartes source comme des cartes source La référence consigne les valeurs Sass réelles plutôt que des noms --token inventés. La carte des espacements repose sur une base de 8px et utilise des clés comme 305 pour 12px et 405 pour 20px. Le développeur doit utiliser l’assistant de la bibliothèque ou les conventions utilitaires correspondantes au lieu d’interpréter ces nombres comme des pixels. Le tableau des paramètres rend cette correspondance visible. ### Respectez la convention de taille de police racine La taille de police racine est de 62.5 %, tout en respectant les préférences de police du navigateur. La correspondance des tailles de police source inclut donc 1.6rem pour la taille standard du corps de texte, selon la valeur par défaut habituelle du navigateur. Copier une valeur en rem dans un environnement où la taille de police racine est différente peut modifier considérablement le résultat. L’exemple charge la feuille de style réelle afin de conserver le même contexte typographique et les mêmes espacements. ## Det Fælles Designsystem Structure sémantique des tableaux du système de design ### Utilisez une légende et définissez clairement le rôle des colonnes Le tableau comparatif des ressources comporte une légende, des en-têtes de colonnes et des cellules de données ordinaires. Les titres, les formats, les durées en minutes et les objectifs figurent dans des colonnes distinctes, car les utilisateurs comparent ces caractéristiques. Les durées de lecture sont des estimations fournies à titre d’exemple ; elles ne correspondent ni à des mesures de trafic ni à des statistiques de performance. La légende précise cette limite sans modifier la structure du tableau. - Fournissez une légende utile et des en-têtes de colonnes. - Conservez les données numériques sous forme de nombres dans le modèle de l’application. - Donnez un nom à la zone de défilement accessible au clavier sur les écrans étroits. ### Limitez le défilement mobile au tableau Le tableau triable se trouve dans une zone de défilement adaptative pouvant recevoir le focus. Sa largeur minimale préserve la lisibilité des colonnes sans faire déborder la page de la fenêtre d’affichage. À faible largeur, l’exemple ne transforme pas le tableau triable en cartes sans rapport avec sa structure, ce qui nécessiterait un autre modèle de navigation et de commandes de tri. Les utilisateurs du clavier peuvent placer le focus sur la zone de défilement. ## Det Fælles Designsystem État du tri et comparaison numérique du système de design ### Ne conservez qu’un seul ordre de tri actif La colonne des titres commence par ordre croissant. Une nouvelle activation du même en-tête inverse le sens du tri ; sélectionner la colonne des minutes lance un tri croissant. Seul l’en-tête actif reçoit aria-sort, et l’instruction masquée de chaque bouton décrit l’action suivante. La flèche visible reflète le même état : elle n’est pas une décoration indépendante. ### Comparez les nombres comme des nombres Les minutes sont des données numériques et sont triées par soustraction. Les titres utilisent localeCompare. Trier des chaînes numériques par ordre alphabétique produirait des résultats trompeurs à mesure que les valeurs augmentent. Les objets de lignes d’origine restent la source de vérité, et le rendu utilise textContent sans interpréter le contenu des lignes comme du balisage. ## Det Fælles Designsystem Recherche après validation et gestion de l’absence de résultats dans le système de design ### Lancez la recherche à la validation La recherche filtre tous les attributs affichés lorsqu’elle est validée, y compris en appuyant sur Entrée. La simple saisie ne remplace pas le tableau affiché au lecteur. Le statut indique le nombre de résultats visibles et l’ordre de tri actuel, tandis que la requête reste dans le champ. Cet exemple suit le modèle de recherche après validation qui a été choisi. ### Réinitialisez la recherche sans perdre l’ordre de tri Une recherche sans résultat affiche un message proposant une solution. La réinitialisation rétablit toutes les lignes et place le focus dans le champ de recherche, tout en conservant la colonne et le sens de tri sélectionnés. La recherche et le tri restent donc des variables d’état distinctes. Aucun état de chargement artificiel n’est nécessaire, puisque le jeu de données complet de cinq lignes est déjà disponible localement. ## Det Fælles Designsystem Intégration complète et fonctionnelle du système de design ### Conservez les chemins des ressources de distribution lors de leur chargement La table d’exportation du paquet 11.3.0 expose son entrée JavaScript, et non des importations profondes arbitraires CSS. La configuration copie la distribution dans public/dkfds et lie la feuille de style depuis index.html, en préservant les chemins relatifs des polices et des images. Enregistrez main.js et denmark.css fournis dans le même répertoire que cette page. L’aperçu local intègre ces mêmes ressources pour faciliter une vérification fiable. 1. Installez dkfds 11.3.0 et copiez sa distribution dans public/dkfds. 2. Utilisez la page HTML fournie pour charger la feuille de style Borger.dk. 3. Enregistrez l’entrée complète et CSS, puis lancez l’application locale. 4. Vérifiez le tri numérique, la recherche après validation, la réinitialisation et le défilement interne sur mobile. ### Vérifiez tout le parcours de comparaison Triez les minutes dans les deux sens, envoyez une recherche sans résultat, puis réinitialisez. Recherchez « Template » et vérifiez qu’il ne reste que les deux lignes de modèles, dans l’ordre actuel. À la largeur d’un téléphone, faites défiler le tableau à l’intérieur de sa zone et vérifiez que la page elle-même ne déborde pas. La vérification confirme également que toutes les ressources fournies se chargent et qu’il n’y a aucune erreur dans le navigateur. ## Exemples de composants du système de design Det Fælles Designsystem ### main.js — comportement complet de comparaison Données originales complètes, tri numérique et textuel, filtrage après validation et réinitialisation. ``` // index.html loads /dkfds/css/dkfds-borgerdk.css from the copied distribution. import './denmark.css'; const rows=[{name:'Content inventory',type:'Worksheet',minutes:25,note:'Map the purpose and owner of each section.'},{name:'Accessibility review',type:'Checklist',minutes:30,note:'Inspect keyboard use, reading order and clear labels.'},{name:'Research questions',type:'Template',minutes:15,note:'Separate assumptions from questions that need evidence.'},{name:'Decision summary',type:'Template',minutes:10,note:'Record a choice, its reason and what remains uncertain.'},{name:'Prototype walkthrough',type:'Guide',minutes:20,note:'Walk through one realistic task and note friction.'}];let key='name',direction=1,query='';document.getElementById('root').innerHTML=`

DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY

Find a planning resource

Compare five authored resources. Search the full table or sort by title and estimated reading time.

Original resource comparison; reading times are sample estimates
FormatPurpose
`;const $=id=>document.getElementById(id);function render(){const list=rows.filter(r=>Object.values(r).join(' ').toLowerCase().includes(query)).sort((a,b)=>direction*(key==='minutes'?a.minutes-b.minutes:a.name.localeCompare(b.name)));$('rows').replaceChildren(...list.map(r=>{const tr=document.createElement('tr');[r.name,r.type,String(r.minutes),r.note].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td)});return tr}));$('count').textContent=list.length+' of '+rows.length+' resources · sorted by '+(key==='name'?'title':'minutes')+' '+(direction===1?'ascending':'descending');$('empty').hidden=!!list.length;document.querySelectorAll('.sort').forEach(b=>{const active=b.dataset.key===key;active?b.parentElement.setAttribute('aria-sort',direction===1?'ascending':'descending'):b.parentElement.removeAttribute('aria-sort');b.querySelector('.arrow').textContent=active?(direction===1?'↑':'↓'):'↕';b.querySelector('.sr-only').textContent=' — sort '+(active&&direction===1?'descending':'ascending')})}$('search-form').addEventListener('submit',e=>{e.preventDefault();query=$('search').value.trim().toLowerCase();render()});$('reset').addEventListener('click',()=>{$('search').value='';query='';render();$('search').focus()});document.querySelectorAll('.sort').forEach(b=>b.addEventListener('click',()=>{direction=key===b.dataset.key?-direction:1;key=b.dataset.key;render()}));render(); ``` Référence du code - Le tri et la recherche sont implémentés dans le code de l’application, conformément aux limites d’intégration publiées pour les tableaux. ### denmark.css — composition originale de la page Commandes de recherche adaptatives et zone de défilement du tableau accessible au clavier. ``` body{margin:0}main{max-width:1160px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em}.lead{max-width:66ch}#search-form{margin:32px 0}.search-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-controls input{flex:1;min-width:180px;max-width:480px}#count{font-weight:600}.table--responsive-scroll{position:relative;max-width:100%;overflow:auto}.table{min-width:720px;width:100%}.table caption{text-align:left;font-weight:600;margin-bottom:16px}.table th:nth-child(1){width:25%}.table th:nth-child(2){width:15%}.table th:nth-child(3){width:16%}.arrow{margin-left:8px}.sort{white-space:nowrap}aside,#empty{padding:24px;margin-top:32px;background:#f1f1f1;border-left:4px solid #44831e}aside h2,#empty h2{margin-top:0}aside li{margin:8px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.search-controls{gap:12px}.search-controls input{flex-basis:100%;max-width:none}h1{font-size:34px}} @media(max-width:480px){.search-controls input{min-width:0;width:100%}.search-controls .button{max-width:100%;white-space:normal}h1{overflow-wrap:anywhere}} ``` Référence du code - À faible largeur, le tableau conserve ses colonnes dans une zone de défilement. ### index.html — page complète pour les ressources de distribution Chargez la feuille de style publiée en préservant ses ressources relatives. ``` Planning resource comparison
``` Référence du code - Remplacez le fichier index.html racine de Vite par cette page. ## Configuration de l’agent du système de design Det Fælles Designsystem ### Point de départ de l’implémentation La feuille de style et les polices officielles fonctionnent en local. L’application gère le tri et le filtrage ; aucun appel à DKFDS.init n’est nécessaire pour la mise en forme statique du tableau. ``` npm create vite@latest dkfds-table -- --template vanilla cd dkfds-table npm install npm install dkfds@11.3.0 mkdir -p public/dkfds cp -R node_modules/dkfds/dist/. public/dkfds/ # Replace index.html, src/main.js and src/denmark.css with the supplied examples. npm run dev ``` ### Un prompt pour votre projet ``` Créez le tableau comparatif des ressources DKFDS avec la véritable distribution Borger.dk 11.3.0 et son contexte typographique. Implémentez intégralement le tri original par valeur numérique et par titre, un seul en-tête aria-sort actif, la recherche après validation, le décompte des résultats et une réinitialisation qui conserve l’ordre de tri. Le tableau doit défiler horizontalement dans sa propre zone, accessible au clavier. ``` ## Sources et périmètre du système de design Det Fælles Designsystem Une comparaison originale OpenDesign utilisant la mise en forme et les polices Borger.dk de DKFDS 11.3.0. Le tri, la recherche et les données d’exemple sont entièrement implémentés dans le code original de l’application ; ils ne font pas partie du comportement intégré des tableaux DKFDS. - Conseils pour les tableaux Responsabilités du balisage, du défilement, du tri et de la recherche. - Paquet et thèmes Feuilles de style de la distribution et limites de l’initialisation. - Personnalisation du thème Configuration du thème au niveau source. - Source versionnée Cartes Sass, valeurs de thème et licences des ressources. ## Ressources associées au système de design Det Fælles Designsystem ### système de design .italia Créez un parcours de services facile à suivre avec la véritable typographie de Bootstrap Italia, une structure Stepper adaptative et un état de formulaire local récupérable. ### 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. - [Référence de mise en œuvre](https://designsystem.dk/komponenter/tables/) - [Source](https://github.com/detfaellesdesignsystem/dkfds-components) - [Référence du code](https://designsystem.dk/komponenter/tables/) - [Référence du code](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Conseils pour les tableaux Responsabilités du balisage, du défilement, du tri et de la recherche.](https://designsystem.dk/komponenter/tables/) - [Paquet et thèmes Feuilles de style de la distribution et limites de l’initialisation.](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Personnalisation du thème Configuration du thème au niveau source.](https://designsystem.dk/kom-i-gang/implementering-kode/justering/) - [Source versionnée Cartes Sass, valeurs de thème et licences des ressources.](https://github.com/detfaellesdesignsystem/dkfds-components)