Implementa una secuencia de servicios fácil de leer con la tipografía real, la estructura adaptable de Stepper y el estado de formulario local recuperable de Bootstrap Italia.
sistema de diseño .italia Sistema e implementación
Designers Italia a través de su biblioteca de código
Designers Italia abarca más que un paquete CSS: incluye pautas de diseño de servicios, kits y recursos de implementación. Este ejemplo se centra en la implementación documentada de Bootstrap Italia, fijada en la versión 2.18.3. No implica que instalar la biblioteca complete el diseño de un servicio público ni que satisfaga todos los requisitos de un sitio web municipal.
En la versión inspeccionada, Bootstrap Italia incluye y personaliza Bootstrap 5.2.3. No añadas encima un segundo paquete estándar de Bootstrap. La vista previa usa su CSS nativo y archivos de fuente Titillium Web proporcionados localmente, junto con un flujo de planificación original de tres etapas para una visita a la biblioteca.
sistema de diseño .italia Tipografía y valores exactos
Cada fuente cumple una función distinta
Titillium Web es la familia habitual de la interfaz. Lora es la opción serif para textos de lectura más extensos y Roboto Mono se usa para código o contenido de ancho fijo. La vista previa carga los pesos reales de Titillium Web que utiliza y conserva la licencia de la fuente, en lugar de sustituirla silenciosamente por una fuente del sistema.
El cuerpo del texto se mantiene en 16px. Los encabezados cambian en 576px: H1 mide 40px, con un interlineado de 48px, en pantallas pequeñas; luego pasa a 48px, con un interlineado de 56px, en la versión instalada de CSS. La tabla de la documentación indica un interlineado de escritorio de 60px; la tabla de referencia de aquí registra la versión inspeccionada y explica la discrepancia, en lugar de mezclar dos fuentes.
sistema de diseño .italia Etapas responsivas y espaciado
Dos puntos de quiebre resuelven problemas distintos
El umbral tipográfico es de 576px, mientras que Stepper cambia la presentación de su encabezado por debajo de 992px. En pantallas compactas, se mantienen visibles la etiqueta actual y el índice n/total. Los nombres de las demás etapas no se comprimen en columnas ilegibles. Quienes visitan el sitio desde un móvil también necesitan un aviso de la etapa actual; el ejemplo lo proporciona mediante el foco en el encabezado y texto de estado accesible.
Las utilidades de espaciado siguen la escala rem verificada: 4, 8, 16, 24 y 48px para los tamaños del 1 al 5, con un tamaño de raíz normal. Los anchos máximos del contenedor de cuadrícula incluyen 1176px en xl, en lugar del valor estándar de Bootstrap que suele citarse de memoria. El plan independiente usa un límite más estrecho de 900px, como decisión explícita de la aplicación.
sistema de diseño .italia Anatomía y responsabilidades de Stepper
El encabezado no controla el flujo de trabajo
La estructura documentada separa steppers-header, steppers-content y steppers-nav. Los elementos de la lista del encabezado reciben las clases confirmed y active; el índice indica la posición. Los botones anterior y siguiente reciben sus clases específicas. Estas clases describen la presentación. La aplicación debe decidir si el formulario actual es válido y si se puede acceder a una etapa posterior.
El ejemplo usa secciones comunes para cada paso y mantiene los controles en el DOM, ocultando las secciones inactivas. Por eso, al volver al paso de la nota de acceso, la nota se conserva. Un paso de revisión lee los controles existentes; no los recrea a partir de un resultado del servidor supuesto.
sistema de diseño .italia Validación y progreso significativo
Avanza solo después de elegir una opción obligatoria
El tipo de visita es obligatorio. Si se continúa sin elegirlo, el primer paso sigue activo, aparece un error específico y el foco pasa al primer botón de opción. Al elegir un tipo y continuar, la primera etapa queda marcada como completa. La nota es opcional y puede dejarse en blanco; en ese caso, la revisión indica que no se añadió ninguna nota.
El botón para volver lleva a la etapa anterior sin borrar la selección ni la nota. El botón para empezar de nuevo borra ambas deliberadamente y vuelve al inicio. La pantalla final se denomina plan local: nunca afirma que se haya enviado, aprobado ni guardado una reserva.
Pulsa Continuar sin seleccionar un botón de opción y comprueba el error.
Elige un tipo de visita, añade una nota breve y abre la revisión.
Vuelve a la nota, confirma que conserva su valor y luego empieza de nuevo para borrar el plan.
Mantén alineadas la posición visual y la anunciada
El elemento de la lista activa tiene aria-current="step" y una etiqueta visualmente oculta que indica la etapa actual. Las etapas anteriores reciben un texto de finalización, además de la clase confirmed. El índice numérico compacto se oculta a las tecnologías de asistencia porque el encabezado actual y la semántica de la etapa ya indican la posición; se mantiene visible para facilitar la orientación visual.
El contenido dinámico usa aria-live="polite", tal como recomiendan las directrices oficiales para una secuencia de una sola página. El ejemplo también enfoca el nuevo encabezado para ofrecer a quienes usan el teclado un punto de inicio de lectura predecible. Prueba esa combinación con las tecnologías de asistencia compatibles para evitar anuncios demasiado repetitivos en formularios más complejos.
Usa botones reales para cambiar de paso y desactiva el botón Atrás en la primera etapa.
Mantén las etiquetas asociadas a los botones de opción y al área de texto; el texto del marcador de posición no sustituye a una etiqueta.
Indica los estados actual y completado con texto, no solo con el color azul o un icono.
sistema de diseño .italia Recursos nativos e inicialización
CSS, fuentes y JavaScript opcional
El paquete proporciona CSS, un script integrado, fuentes de origen y un sprite SVG. Este ejemplo de Stepper necesita CSS y las fuentes elegidas; su navegación es lógica de la aplicación. Otros widgets usan data-bs-toggle o los atributos de datos documentados para inicializarse automáticamente. No combines la inicialización automática con una segunda instancia manual del mismo widget.
Si usas módulos, importa solo los componentes que necesite la aplicación. Las directrices oficiales señalan que los métodos de transición devuelven el control antes de que termine la transición y que las llamadas realizadas durante una transición pueden ignorarse. En esos componentes, espera al evento de finalización correspondiente antes de encadenar acciones dependientes; este Stepper sencillo no inventa una transición nativa de API.
Usa el kit sin dar a entender que el servicio se ha completado
La documentación de la biblioteca recomienda mantenerla actualizada y desaconseja depender de una CDN pública en producción. La configuración fija la versión verificada y el ejemplo local incluye sus propios recursos y licencias. Un servicio real sigue necesitando diseño de contenido, gestión de datos, validación en el servidor y una respuesta de envío confirmada.
El ejemplo muestra una visita genérica a una biblioteca, sin logotipo municipal ni insignias oficiales. Es un ejemplo didáctico de OpenDesign, no un servicio de una autoridad pública. Mantén clara esa distinción en cualquier prototipo para que un estado de revisión visualmente pulido no se confunda con un registro de solicitud real.
CSS/fuentes nativos, validación obligatoria de botones de opción, nota opcional, revisión, volver atrás y reinicio.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>
Configuración del agente de sistema de diseño .italia
Punto de partida para la implementación
Configuración nativa de CSS y las fuentes. La navegación del Stepper es lógica de la aplicación; a continuación se incluye un ejemplo completo y funcional. El ZIP del ejemplo completo y funcional, disponible en Fuentes, también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/designers-italia.html. No abras ejemplos basados en módulos mediante file://.
bash
npm install [email protected]
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
Una instrucción para tu proyecto
Instrucción para el agente
Usa Bootstrap Italia 2.18.3 con CSS nativo y Titillium Web. Crea la estructura documentada de steppers, encabezado, contenido y navegación, con estados activo y confirmado, y el índice móvil sincronizado. Gestiona la validación y la navegación en el código de la aplicación, conserva los valores al volver atrás y etiqueta el estado final según la respuesta real del backend. No mezcles otro entorno de ejecución de Bootstrap ni afirmes que se ha enviado una revisión local.
05
sistema de diseño .italia Fuentes y alcance
Ejemplo independiente de OpenDesign centrado en Bootstrap Italia. No representa la identidad de una autoridad pública ni un servicio real de reservas.
