Système de design Fomantic UI.

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

<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>

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.';};});

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}