Sistema de diseño Fomantic UI.

Sistema de diseño Fomantic UI: un vocabulario CSS con módulos de jQuery

Un vocabulario de CSS con módulos de jQuery

Fomantic UI combina cadenas de clases semánticas con módulos con estado opcionales. La estantería de lectura usa ui fluid card, ui teal button y ui basic label para su aspecto. El menú desplegable y las valoraciones se inicializan explícitamente mediante jQuery. Cargar solo la hoja de estilos mostraría las tarjetas, pero no proporcionaría la misma interacción.

Este ejemplo fija Fomantic UI 2.9.4 y jQuery 3.7.1. Incluye el módulo de transición antes del menú desplegable y, después, el de valoración. Mostrar estas dependencias es más útil que presentar una fila de estrellas estática y llamarla ejemplo de biblioteca interactiva. El módulo de la aplicación original se ejecuta solo cuando ya existe el marcado de las tarjetas.

Consulta la especificación complementaria

Los valores predeterminados compilados del sistema de diseño de Fomantic UI no son nombres de tokens de ejecución

Los valores predeterminados compilados no son nombres de tokens en tiempo de ejecución

El tema predeterminado de Fomantic se crea con Less. Por eso, la referencia registra valores reales de selectores, como el fondo del botón verde azulado y el radio del borde de la tarjeta. No inventa un token --fomantic-primary API que el paquete compilado no expone. Para realizar cambios más amplios en el tema, deben usarse los archivos de variables y de compilación del tema documentados.

La variante verde azulado con nombre propio es independiente de la variante azul primario. En esta estantería de lectura, la acción para añadir a la lista de selección es verde azulado, mientras que las ilustraciones originales de las cubiertas usan colores de papel, salvia y arcilla cálida. Esas cubiertas son ilustraciones de la aplicación, no muestras oficiales de la paleta. Los valores de desplazamiento, enfoque y estado presionado de los botones siguen siendo los valores predeterminados nativos de Fomantic.

Consulta la especificación complementaria

El tamaño de rem de catorce píxeles cambia la geometría del sistema de diseño de Fomantic UI

Los rem de catorce píxeles cambian la geometría

La hoja de estilos predeterminada del sitio establece en catorce píxeles el tamaño raíz y el texto del cuerpo. Por eso, el radio de 0.28571429rem de los botones y las tarjetas equivale aproximadamente a cuatro píxeles. Copiar ese valor en rem a una raíz distinta de dieciséis píxeles produciría una geometría diferente; por eso, la referencia incluye el tamaño raíz en lugar de indicar solo un radio sin contexto.

Lato es la familia tipográfica preferida y el paquete compilado incluye recursos de fuentes locales. Esta vista previa independiente incorpora esos recursos en lugar de solicitarlos a un servicio de fuentes web. El encabezado de la página es una anulación original de treinta y cuatro píxeles; las descripciones de las tarjetas conservan un texto compacto de cuerpo con un interlineado más amplio, propio de la aplicación.

Consulta la especificación complementaria

La anatomía de las tarjetas del sistema de diseño de Fomantic UI separa el contenido de las acciones

La estructura de las tarjetas mantiene separados el contenido y las acciones

Cada tarjeta nativa contiene una cubierta decorativa, un bloque de contenido para el tema y la descripción, otro bloque para la valoración y un bloque adicional para la acción de añadir a la lista de selección. Las tarjetas fluidas ocupan la cuadrícula original de tres columnas en vez de usar el ancho predeterminado de 290px del paquete. La página elimina los márgenes de cada tarjeta para que la cuadrícula proporcione separaciones uniformes.

Las consignas proponen distintas tareas de lectura: comparar el espaciado entre letras, quitar un elemento para estudiar el espacio negativo y observar cambios de color según el contexto. Sus cubiertas hacen eco visual de esos ejercicios con tipografía, rectángulos y colores superpuestos. Se trata explícitamente de consignas originales y no implican el respaldo de ninguna editorial.

Consulta la especificación complementaria

Invoca el comportamiento nativo de valoración para cada tipo de entrada en el sistema de diseño de Fomantic UI

Usa el comportamiento nativo de valoración en todas las vías de entrada

El módulo de valoración se configura con un máximo de cinco y la opción clearable en true. onRate recibe el valor numérico actual y sincroniza tanto la puntuación visible como el valor accesible del control deslizante. La acción Borrar valoración invoca el comportamiento clear rating del módulo en vez de eliminar las clases activas manualmente.

El módulo nativo de estrellas permite la interacción con el ratón, pero este ejemplo también añade un comportamiento explícito para el teclado. El contenedor de la valoración es un control deslizante etiquetado con un rango de cero a cinco. Las teclas de flecha cambian el valor en un punto; Inicio borra la valoración y Fin selecciona cinco. Cada método invoca set rating para garantizar que las estrellas mostradas y la salida de la aplicación compartan el mismo estado del módulo.

1. Ve a una valoración con el tabulador y pulsa la flecha derecha dos veces para seleccionar dos de cinco.
2. Pulsa Fin para seleccionar cinco y luego Inicio para volver a Sin valorar.
3. Haz clic en una estrella y comprueba que la salida de texto y el valor accesible se actualicen juntos.

Consulta la especificación complementaria

El filtrado del menú desplegable conserva el estado oculto en el sistema de diseño de Fomantic UI

El filtrado del menú desplegable conserva el estado oculto

El selector de temas se convierte en un menú desplegable nativo de Fomantic mediante el inicializador dropdown. Su función de retorno onChange oculta las tarjetas cuyo tema no coincide con el valor seleccionado y actualiza el recuento de consignas visibles. La opción Todos los temas restaura la estantería completa. El componente usa el módulo de transición para animar el movimiento del menú.

El filtrado no destruye ni vuelve a crear una tarjeta. Las valoraciones existentes y la pertenencia a la lista de selección permanecen asociadas a sus registros originales mientras están ocultos. Es intencional: acotar la estantería es una operación de visualización, no una solicitud para borrar las elecciones anteriores del usuario. Por eso, el resumen puede mencionar un elemento que no esté incluido en el filtro actual.

Consulta la especificación complementaria

Sistema de diseño Fomantic UI: una lista de preselección es independiente de la valoración

Una lista de preselección es independiente de una valoración

La valoración expresa el interés en una escala de cero a cinco, mientras que formar parte de la lista de preselección es una decisión independiente de sí o no. El usuario puede guardar una propuesta para comentarla antes de valorarla. El botón de la lista de preselección comunica su estado seleccionado mediante aria-pressed y alterna las etiquetas Añadir y Quitar. El resumen obtiene los nombres de un Set de identificadores de tema estables.

La región de estado describe las propuestas seleccionadas sin afirmar que la colección se haya guardado de forma remota. Al recargar el navegador, este ejemplo se borra. Una lista de lectura compartida real necesitaría persistencia, identidad de usuario y gestión de conflictos; esas capacidades no se consiguen añadiendo una clase a una tarjeta.

Consulta la especificación complementaria

Sistema de diseño Fomantic UI: conserva el significado numérico más allá de las estrellas decorativas

Conserva el significado numérico más allá de las estrellas decorativas

Los iconos de estrella se ocultan a las tecnologías de asistencia porque el control deslizante principal expone el valor numérico y la etiqueta. Un resultado visible de Sin valorar o con una fracción comunica lo mismo sin que el lector tenga que contar los iconos coloreados. Un contorno visible al enfocar marca el control deslizante activo, y el botón Borrar devuelve el foco a ese control.

Las formas de las portadas también son decorativas. El título, la duración y la descripción reales de cada propuesta se mantienen como texto dentro de la tarjeta. En pantallas estrechas, las tarjetas se apilan en el punto de ruptura original de 760px. El ejemplo restablece a auto la altura del área de visualización compilada del body y desactiva el desbordamiento horizontal oculto para que la inserción use la altura real del contenido y no oculte defectos de diseño.

• Muestra el número actual tanto en texto como en un valor accesible.
• Usa botones nativos para borrar y modificar la lista de preselección.
• Conserva las etiquetas y las descripciones completas cuando la cuadrícula pase a una sola columna.

Consulta la especificación complementaria

Sistema de diseño Fomantic UI: distribuye las fuentes junto a los estilos o inclúyelas en el paquete

Incluye las fuentes junto con las hojas de estilo o empaquétalas en un solo archivo

En un proyecto normal, copia el directorio completo fomantic-ui-css en lugar de extraer semantic.css y olvidar los recursos de themes. Los estilos compilados hacen referencia a los archivos de fuentes Lato e icon mediante rutas relativas. La configuración siguiente conserva esas rutas y carga jQuery antes que los módulos del paquete.

La vista previa local usa solo los estilos y scripts necesarios de los componentes y luego integra en un único documento los recursos a los que hacen referencia. No realiza solicitudes externas de fuentes. Es posible que las herramientas de compilación de producción procesen estos recursos de otra manera, pero hay que probar la ruta de las fuentes y el orden de los módulos en la página entregada, no dar por hecho que funcionan porque npm install se haya completado correctamente.

Consulta la especificación complementaria

Sistema de diseño Fomantic UI: ejemplos de componentes

<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}