# Système de design Fomantic UI ## Aperçu de l’interface du système de design Fomantic UI Filtrez trois suggestions de lecture originales, attribuez-leur une note avec les étoiles ou les touches fléchées, et gardez une sélection pour en discuter. ## Référence de conception du système de design Fomantic UI Les valeurs par défaut compilées de Fomantic UI 2.9.4 CSS ont été examinées directement. Il s’agit des valeurs par défaut des sélecteurs de son thème fondé sur Less, et non de jetons CSS d’exécution inventés. Les couleurs originales des couvertures et les dimensions de l’application sont indiquées séparément. ### Typographie par défaut du site | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | html font-size | 14px | Taille de base rem par défaut. | | body font-family | Lato, system-ui, platform and emoji fallbacks | L’aperçu intègre les données de police locales de Lato. | | body line-height | 1.4285em | Environ 20 px avec la taille de texte par défaut de 14 px. | | body text color | rgba(0, 0, 0, 0.87) | Texte par défaut à fort accent. | | h1 / h2 / h3 | 2rem / 1.71428571rem / 1.28571429rem | Tailles de titre par défaut, avant les ajustements originaux de la page. | | heading line-height | 1.28571429em | Rythme des titres par défaut. | ### Boutons par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | .ui.button background | #e0e1e2 | Bouton neutre par défaut. | | .ui.button border-radius | 0.28571429rem | Environ 4 px avec la taille de base par défaut. | | .ui.teal.button background | #00b5ad | Couleur d’action turquoise native utilisée pour la sélection. | | .ui.teal.button:hover | #009c95 | État de survol turquoise natif. | | .ui.teal.button:focus | #008c86 | Arrière-plan natif de mise au point turquoise. | | .ui.teal.button:active | #00827c | Arrière-plan turquoise natif à l’activation. | | .ui.primary.button background | #2185d0 | Le bleu principal est distinct de la variante turquoise nommée. | ### Géométrie des cartes par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | .ui.card width | 290px | Largeur fixe par défaut ; la variante fluide remplit cette grille d’application. | | .ui.card border-radius | 0.28571429rem | Environ 4 px avec la taille de base par défaut. | | .ui.card box-shadow | 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 | Relief et contour par défaut. | | .ui.card margin | 1em 0 | La grille originale supprime les marges pour aligner les cartes. | | .ui.card transition | box-shadow 0.1s ease, transform 0.1s ease | Animation des cartes par défaut. | ### Configuration des notes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | maxRating | 4 by default; 5 in this example | L’échelle explicite à cinq niveaux correspond à la valeur maximale du curseur accessible. | | initialRating | 0 | Aucune note avant l’interaction de l’utilisateur. | | clearable | auto by default; true in this example | Permet d’effacer une note existante. | | interactive | true | L’interaction à la souris est activée. | | onRate(value) | Callback after a rating is selected | Synchronise le texte affiché et la valeur accessible. | ### Échelle originale de la salle de lecture | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Page padding | 36px 28px / 24px 18px mobile | Espacement original de la mise en page. | | Grid gap | 22px | Étagère de lecture originale à trois colonnes. | | Page heading | 34px / 1.15; 29px mobile | Ajustement original du titre. | | Cover height | 175px / 155px mobile | Illustrations originales des couvertures de livres CSS. | | Layout breakpoint | 760px | Passage original à une seule colonne de cartes. | ## Guide complet du système de design Fomantic UI 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 Fomantic UI : un vocabulaire CSS avec des modules jQuery ### Un vocabulaire CSS avec des modules jQuery > Fomantic UI associe des chaînes de classes sémantiques à des modules à état facultatifs. L’étagère de lecture utilise ui fluid card, ui teal button et ui basic label pour son apparence. La liste déroulante et les notes sont initialisées explicitement avec jQuery. La feuille de style seule afficherait les cartes, mais ne fournirait pas les mêmes interactions. Cet exemple utilise Fomantic UI 2.9.4 et jQuery 3.7.1. Il inclut le module de transition avant ceux de la liste déroulante et des notes. Mieux vaut afficher ces dépendances que de présenter une rangée d’étoiles statique comme un exemple interactif de bibliothèque. Le module original de l’application n’est exécuté qu’une fois le balisage des cartes créé. Consultez la spécification associée ## Système de design Fomantic UI : les valeurs par défaut compilées ne sont pas des noms de jetons à l’exécution ### Les valeurs par défaut compilées ne sont pas des noms de jetons à l’exécution Le thème par défaut de Fomantic est généré avec Less. La référence consigne donc les valeurs réelles des sélecteurs, comme l’arrière-plan du bouton turquoise et le rayon de bordure de la carte. Elle n’invente pas de jeton --fomantic-primary API que le paquet compilé n’expose pas. Pour modifier le thème en profondeur, utilisez le processus de compilation et les fichiers de variables documentés. La variante turquoise nommée est distincte de la variante bleue principale. Dans cette étagère de lecture, l’action de sélection est turquoise, tandis que les couvertures originales utilisent des couleurs papier, sauge et argile chaude. Ces couvertures sont des illustrations de l’application, et non des échantillons officiels de la palette. Les valeurs des états de survol, de mise au point et d’activation des boutons restent celles par défaut de Fomantic. Consultez la spécification associée ## Système de design Fomantic UI : une base rem de quatorze pixels change la géométrie ### Une base rem de quatorze pixels change la géométrie La feuille de style par défaut du site définit la taille de base et le texte du corps à quatorze pixels. Le rayon de bordure de 0.28571429rem des boutons et des cartes équivaut donc à environ quatre pixels. Copier cette valeur en rem dans un contexte où la taille de base est de seize pixels produirait une géométrie différente. C’est pourquoi la référence précise la taille de base plutôt que d’indiquer un rayon sans contexte. Lato est la famille de polices privilégiée, et le paquet compilé comprend des fichiers de polices locaux. Cet aperçu autonome intègre ces ressources au lieu de faire appel à un service de polices Web. Le titre de la page est une modification originale de trente-quatre pixels ; les descriptions des cartes conservent un texte de corps compact, avec une hauteur de ligne plus généreuse propre à l’application. Consultez la spécification associée ## Système de design Fomantic UI : la structure des cartes distingue le contenu des actions ### La structure des cartes distingue le contenu des actions Chaque carte native comprend une couverture décorative, un bloc de contenu pour le sujet et sa description, un autre pour la note, ainsi qu’un bloc supplémentaire pour l’action de sélection. Les cartes fluides remplissent la grille originale à trois colonnes, au lieu d’utiliser la largeur par défaut de 290 px du paquet. La page supprime les marges de chaque carte afin que la grille assure un espacement régulier. Les suggestions proposent différentes activités de lecture : comparer l’espacement des lettres, retirer un élément pour étudier l’espace négatif et observer les changements de couleur contextuels. Leurs couvertures reprennent visuellement ces exercices au moyen de caractères typographiques, de rectangles et de couleurs superposées. Il s’agit explicitement de suggestions originales, qui ne signifient pas qu’un éditeur les approuve. Consultez la spécification associée ## Système de design Fomantic UI : utilisez le comportement natif des notes pour chaque mode de saisie ### Utilisez le comportement natif des notes pour chaque mode de saisie Le module de notes est configuré avec un maximum de cinq et l’option clearable réglée sur true. onRate reçoit la valeur numérique actuelle et synchronise à la fois le score visible et la valeur accessible du curseur. L’action Effacer la note utilise le comportement clear rating du module au lieu de supprimer manuellement les classes actives. Le module natif d’étoiles gère les interactions à la souris, mais cet exemple ajoute aussi une prise en charge explicite du clavier. Le conteneur de notes est un curseur étiqueté dont la plage va de zéro à cinq. Les touches fléchées changent la note d’un niveau, Début l’efface et Fin sélectionne cinq. Chaque mode de saisie appelle set rating, de sorte que les étoiles affichées et la sortie de l’application utilisent le même état de module. 1. Placez-vous sur une note avec la touche Tab, puis appuyez deux fois sur la flèche droite pour choisir deux étoiles sur cinq. 2. Appuyez sur Fin pour choisir cinq étoiles, puis sur Début pour revenir à « Sans note ». 3. Cliquez sur une étoile et vérifiez que le texte affiché et la valeur accessible sont mis à jour ensemble. Consultez la spécification associée ## Système de design Fomantic UI : le filtrage du menu déroulant préserve l’état masqué ### Le filtrage de la liste déroulante préserve l’état masqué Le sélecteur de sujet devient un menu déroulant Fomantic natif grâce à l’initialiseur de menu déroulant. Son rappel onChange masque les cartes dont le sujet ne correspond pas à la valeur sélectionnée et met à jour le nombre de suggestions affichées. L’option « Tous les sujets » rétablit l’ensemble de la sélection. Le composant utilise le module transition pour animer le déplacement du menu. Le filtrage ne détruit pas les cartes pour les recréer. Les notes existantes et l’appartenance à la sélection restent associées à leurs enregistrements d’origine lorsqu’ils sont masqués. Ce comportement est intentionnel : réduire la sélection est une opération d’affichage, et non une demande d’effacement des choix précédents. Le récapitulatif peut donc mentionner un élément qui ne figure pas dans le filtre actuel. Consultez la spécification associée ## Système de design Fomantic UI : la sélection est indépendante de la note ### Une sélection de favoris est indépendante d’une note La note exprime l’intérêt sur une échelle de zéro à cinq, tandis que l’ajout à la sélection est une décision distincte, oui ou non. Une personne peut conserver une suggestion pour en discuter avant de la noter. Le bouton de sélection indique son état avec aria-pressed et alterne entre les libellés « Ajouter » et « Retirer ». Le récapitulatif extrait les noms d’un Set d’identifiants de sujets stables. La zone d’état décrit les suggestions sélectionnées sans prétendre qu’une collection a été enregistrée à distance. Le rechargement du navigateur réinitialise cet exemple. Une véritable liste de lecture partagée nécessiterait une persistance des données, une identité utilisateur et une gestion des conflits ; ajouter une classe à une carte ne fournit pas ces fonctionnalités. Consultez la spécification associée ## Système de design Fomantic UI : préserver la signification des nombres au-delà des étoiles décoratives ### Préserver la signification des nombres au-delà des étoiles décoratives Les icônes en forme d’étoile sont masquées aux technologies d’assistance, car le curseur parent expose la valeur numérique et son libellé. Un texte visible, « Sans note » ou une fraction, transmet la même information sans obliger à compter les icônes colorées. Un contour visible à la prise de focus indique le curseur actif, et le bouton « Effacer » redonne le focus à ce contrôle. Les formes des couvertures de livres sont également décoratives. Le véritable titre de la suggestion, sa durée et sa description restent du texte dans la carte. Sur les écrans étroits, les cartes s’empilent au point de rupture initial de 760px. L’exemple réinitialise à auto la hauteur de la fenêtre définie à 100% dans le body compilé et supprime le débordement horizontal masqué, afin que l’intégration utilise la hauteur réelle du contenu et ne dissimule pas les défauts de mise en page. - Exposez la valeur actuelle à la fois dans le texte et comme valeur accessible. - Utilisez des boutons natifs pour effacer la note et modifier la sélection. - Préservez les libellés et les descriptions complètes lorsque la grille passe sur une seule colonne. Consultez la spécification associée ## Système de design Fomantic UI : livrer les polices avec les styles ou les intégrer au bundle ### Fournissez les polices avec les styles ou intégrez-les au bundle Pour un projet classique, copiez le répertoire fomantic-ui-css dans son intégralité plutôt que d’extraire semantic.css et d’oublier ses ressources de thèmes. Les styles compilés référencent les fichiers de police Lato et les icônes à l’aide de chemins relatifs. La configuration ci-dessous préserve ces chemins et charge jQuery avant les modules du package. L’aperçu local utilise uniquement les styles et scripts requis par les composants, puis intègre leurs ressources référencées dans un seul document. Il n’effectue aucune requête de police externe. Les outils de build de production peuvent traiter ces ressources autrement, mais il faut tester le chemin des polices et l’ordre des modules dans la page livrée, plutôt que de les tenir pour acquis après une installation npm réussie. Consultez la spécification associée ## Système de design Fomantic UI Exemples de composants ### Sélection de lecture à trois cartes Cartes, libellés, boutons, balisage de menu déroulant et conteneurs de notation natifs. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` Référence du code - Il s’agit de suggestions originales pour l’exercice, et non de véritables couvertures de livres. - Chaque note possède son propre libellé accessible et sa plage numérique. - Les actions de sélection exposent aria-pressed. ### Initialisation des modules et interactions locales Filtrage du menu déroulant, comportement de la notation, prise en charge complémentaire du clavier et état de la sélection. ``` const cards=[...document.querySelectorAll('.book-grid article')],selected=new Set(); $('#topic').dropdown({onShow(){this.setAttribute('aria-expanded','true');},onHide(){this.setAttribute('aria-expanded','false');},onChange(value){let count=0;cards.forEach(card=>{card.hidden=value!=='all'&&card.dataset.topic!==value;if(!card.hidden)count++;});document.querySelectorAll('.toolbar .menu .item').forEach(item=>item.setAttribute('aria-selected',String(item.dataset.value===value)));document.querySelector('#visible-count').textContent=`${count} ${count===1?'prompt':'prompts'}`;}}); const dropdown=document.querySelector('.toolbar div.dropdown');dropdown.setAttribute('role','combobox');dropdown.setAttribute('aria-label','Show topic');dropdown.setAttribute('aria-expanded','false');dropdown.setAttribute('aria-haspopup','listbox');dropdown.querySelector('.menu').setAttribute('role','listbox');dropdown.querySelectorAll('.menu .item').forEach(item=>{item.setAttribute('role','option');item.setAttribute('aria-selected',String(item.dataset.value==='all'));}); $('.ui.rating').each(function(){const node=this,$rating=$(node);$rating.rating({maxRating:5,clearable:true,onRate(value){node.setAttribute('aria-valuenow',value);node.setAttribute('aria-valuetext',value?`${value} out of 5`:'Not rated');node.closest('article').querySelector('.score').textContent=value?`${value} / 5`:'Not rated';}});node.setAttribute('aria-valuetext','Not rated');node.querySelectorAll('.icon').forEach(i=>i.setAttribute('aria-hidden','true'));node.addEventListener('keydown',e=>{let value=Number($rating.rating('get rating'));if(['ArrowRight','ArrowUp'].includes(e.key))value=Math.min(5,value+1);else if(['ArrowLeft','ArrowDown'].includes(e.key))value=Math.max(0,value-1);else if(e.key==='Home')value=0;else if(e.key==='End')value=5;else return;e.preventDefault();$rating.rating('set rating',value);});node.closest('article').querySelector('.clear-rating').onclick=()=>{$rating.rating('clear rating');node.focus();};}); cards.forEach(card=>{card.querySelector('.shortlist').onclick=e=>{const id=card.dataset.topic,button=e.currentTarget;if(selected.has(id)){selected.delete(id);button.textContent='Add to shortlist';button.setAttribute('aria-pressed','false');}else{selected.add(id);button.textContent='Remove from shortlist';button.setAttribute('aria-pressed','true');}const names=cards.filter(c=>selected.has(c.dataset.topic)).map(c=>c.dataset.name);document.querySelector('#summary').textContent=names.length?`${names.length} selected: ${names.join('; ')}.`:'No prompts selected. Add one to begin.';};}); ``` Référence du code - jQuery et les modules Fomantic doivent être chargés avant ce fichier. - La même méthode set rating est utilisée pour les changements au clavier avec les flèches. - Le filtrage masque les cartes sans effacer leurs notes ni leurs sélections. ### Composition originale de la sélection Grille adaptative, illustrations de couverture et indication explicite du focus. ``` body{background:#f6f5f2}.reading-room{max-width:1120px;margin:auto;padding:36px 28px}.reading-room header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:#008c86}h1{font-size:34px;line-height:1.15;margin:12px 0}.intro{color:#666;font-size:15px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.toolbar>label{font-weight:700}.toolbar>span{color:#767676;margin-left:auto}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.book-grid>.ui.card{margin:0;height:100%}.book-grid>.ui.card[hidden]{display:none}.book-cover{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.book-cover small{position:absolute;bottom:16px;left:18px;letter-spacing:.15em;font-size:9px;font-weight:700}.type-cover{background:#e2ccb0;color:#4a332a}.type-cover>span{font-family:Georgia,serif;font-size:90px;line-height:1}.space-cover{background:#ccd7d5;gap:10px}.space-cover>span{height:65px;width:25px;background:#3c6763}.space-cover>span:nth-child(2){height:90px;width:45px}.color-cover{background:#dcb9b0}.color-cover>span{width:85px;height:85px;background:#a85243}.color-cover>span:nth-child(2){width:50px;height:50px;border-radius:50%;background:#e6c57c;position:absolute}.book-grid .description{font-size:14px;line-height:1.6;min-height:88px}.rating-label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.score{display:block;font-size:12px;color:#666;margin:8px 0 12px}.clear-rating{margin-bottom:0!important}.book-grid .ui.rating:focus-visible{outline:3px solid #00b5ad;outline-offset:4px}.summary{margin-top:28px!important}.scope{font-size:12px;color:#666}button:focus-visible{outline:3px solid #00b5ad!important;outline-offset:3px}@media(max-width:760px){.reading-room{padding:24px 18px}.reading-room header{flex-direction:column;gap:8px}h1{font-size:29px}.book-grid{grid-template-columns:1fr}.book-grid .description{min-height:0}.book-cover{height:155px}.toolbar>span{width:100%;margin-left:0}.toolbar .dropdown{min-width:180px}} html,body{height:auto;min-height:0}body{min-width:0;overflow-x:visible} ``` Référence du code - La hauteur par défaut height:100% du site compilé est réinitialisée à auto pour l’intégration. - Le débordement du body n’est pas utilisé pour dissimuler les erreurs de mise en page. ## Système de design Fomantic UI Configuration de l’agent IA ### Point de départ de l’implémentation Vérifié avec Fomantic UI 2.9.4 et jQuery 3.7.1. L’exemple autonome intègre les ressources de polices requises ; la configuration classique conserve les chemins relatifs au package. Le conteneur HTML inclut le balisage complet du body ; enregistrez les exemples d’interactions et de CSS fournis sous les noms de fichiers indiqués ici. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` ### Un prompt pour votre projet ``` Étendez la sélection de la salle de lecture Fomantic UI 2.9.4 à l’aide de l’initialisation des modules jQuery fournie et des composants Dropdown et Rating. Reliez les trois suggestions de lecture, leur état de notation et le comportement de sélection locale aux cartes affichées. Conservez la prise en charge explicite du clavier et la sémantique de curseur ajoutées au contrôle de notation, ainsi que les ressources de thèmes et d’icônes correspondantes. La sélection doit empêcher les ajouts en double et en afficher clairement le contenu actuel ; il ne s’agit ni d’un processus de gestion des demandes d’assistance ni d’un service de recommandation à distance. ``` ## Fomantic UI Sources et périmètre du système de design Fomantic UI 2.9.4 avec jQuery 3.7.1. Les valeurs du thème sont celles compilées par défaut ; les illustrations originales de couverture et la prise en charge complémentaire du clavier sont signalées. Toutes les sélections restent locales. - Pour commencer Ressources compilées et configuration des modules. - Thématisation Personnalisation du thème basée sur Less. - Site Typographie générale et paramètres par défaut de la page. - Carte Structure et variantes du contenu des cartes. - Notation Méthodes de notation et rappel onRate. - Menu déroulant Initialisation de la sélection et gestion des changements. - Button Variantes et états nommés natifs. ## Système de design Fomantic UI Ressources connexes ### Foundation Un espace de vérification fonctionnel Foundation, utilisant XY Grid, les validateurs personnalisés d’Abide, la confirmation Reveal, les paramètres Sass réels et un code d’intégration locale complet. ### Framework7 Un carnet de croquis natif Framework7 avec de véritables actions swipeout, les valeurs explicites du thème iOS, une commande d’action accessible au clavier et une liste filtrée qui conserve les études terminées jusqu’à la réinitialisation. ### gluestack UI Créez une liste de préparation avec les véritables créateurs Button et Input de gluestack, les couleurs sémantiques explicites de la v5 et le code source complet de React Native Web. Examinez la validation, les actions au clavier, l’identité stable des éléments et le calcul local de la progression de préparation. - [Référence de mise en œuvre](https://fomantic-ui.com/modules/rating.html) - [Source](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/site.css) - [Source](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/button.css) - [Source](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/card.css) - [Source](https://fomantic-ui.com/modules/rating.html) - [Source](https://fomantic-ui.com/usage/layout.html) - [Consultez la spécification associée](https://fomantic-ui.com/introduction/getting-started.html) - [Consultez la spécification associée](https://fomantic-ui.com/usage/theming.html) - [Consultez la spécification associée](https://fomantic-ui.com/globals/site.html) - [Consultez la spécification associée](https://fomantic-ui.com/views/card.html) - [Consultez la spécification associée](https://fomantic-ui.com/modules/rating.html) - [Consultez la spécification associée](https://fomantic-ui.com/modules/dropdown.html) - [Consultez la spécification associée](https://fomantic-ui.com/elements/button.html) - [Référence du code](https://fomantic-ui.com/views/card.html) - [Référence du code](https://fomantic-ui.com/modules/rating.html) - [Référence du code](https://fomantic-ui.com/usage/layout.html) - [Pour commencer Ressources compilées et configuration des modules.](https://fomantic-ui.com/introduction/getting-started.html) - [Thématisation Personnalisation du thème basée sur Less.](https://fomantic-ui.com/usage/theming.html) - [Site Typographie générale et paramètres par défaut de la page.](https://fomantic-ui.com/globals/site.html) - [Carte Structure et variantes du contenu des cartes.](https://fomantic-ui.com/views/card.html) - [Notation Méthodes de notation et rappel onRate.](https://fomantic-ui.com/modules/rating.html) - [Menu déroulant Initialisation de la sélection et gestion des changements.](https://fomantic-ui.com/modules/dropdown.html) - [Button Variantes et états nommés natifs.](https://fomantic-ui.com/elements/button.html)