UIkit combina un framework de CSS, personalización con Less y componentes de JavaScript controlados por atributos. En el planificador de talleres siguiente, Switcher, Accordion y la cuadrícula adaptable funcionan en conjunto para ilustrar dónde termina el comportamiento nativo de los componentes y dónde empieza el estado de selección de la aplicación.
UIkit nativo 3.25.25 CSS y JavaScript; contenido original de las sesiones y estado del plan. · Referencia de implementación
02
Referencia de diseño del sistema de diseño UIkit
Código fuente Less de UIkit 3.25.25 y CSS predeterminado compilado. Los nombres que empiezan por @ son variables de Less disponibles en tiempo de compilación, no propiedades personalizadas de CSS en tiempo de ejecución. La vista previa añade modificaciones específicas de pantalla, indicadas explícitamente.
Clases de CSS y comportamiento controlado por atributos del sistema de diseño UIkit
Clases de CSS y comportamiento controlado por atributos
UIkit combina un framework CSS con una capa de componentes JavaScript. La clase uk-card aplica estilo a una superficie; el atributo uk-switcher inicializa un componente interactivo. La diferencia se aprecia en el ejemplo del taller: las tarjetas y los controles de formulario pueden mostrarse solo con CSS, pero para cambiar de sesión y desplegar el acordeón se necesita el paquete JavaScript de UIkit.
La vista previa carga localmente la hoja de estilos compilada y el entorno de ejecución reales de la versión 3.25.25. Las tres sesiones tienen longitudes y diseños distintos, así que al cambiar de una a otra se muestra el comportamiento real del contenido, en lugar de cambiar una etiqueta en una tarjeta idéntica. El script local del plan de asistentes es independiente del entorno de ejecución de UIkit y se incluye íntegramente.
Variables de Less y estilos en tiempo de ejecución del sistema de diseño UIkit
Variables de Less y estilos en tiempo de ejecución
Los nombres de referencia que empiezan por @ son variables de Less. Se resuelven durante la compilación; añadir @global-primary-background a una hoja de estilos normal del navegador no cambiará un tema en tiempo de ejecución. La tabla muestra valores verificados del código fuente instalado, mientras que la vista previa usa el CSS predeterminado precompilado del paquete.
Para crear un tema de marca de UIkit, utiliza el proceso documentado de importación y personalización de Less y vuelve a compilar. Para ajustes aislados en una página, puedes usar CSS normal para seleccionar una clase después de la hoja de estilos oficial. Este ejemplo sigue esa segunda opción para el tamaño del título, el relleno de las tarjetas y el color de los metadatos. No afirma que esos ajustes sean nuevos tokens oficiales de UIkit.
Jerarquía de texto, color y superficies del sistema de diseño UIkit
Jerarquía de texto, color y superficies
La fuente global predeterminada es una pila de fuentes del sistema de dieciséis píxeles, con una altura de línea de 1.5. El fondo principal predeterminado es #1e87f0, el secundario es un tono neutro oscuro y las superficies atenuadas son #f8f8f8. Estas funciones permiten distinguir una acción principal para elegir de un mosaico explicativo más discreto. La tabla de especificaciones proporcionada incluye valores de texto y de superficie, no solo una paleta decorativa de cuatro colores.
El taller utiliza un encabezado grande, pero limitado, una etiqueta pequeña para el programa y un título dentro de cada tarjeta de sesión. El color local de los metadatos se oscurece a #65717a. El mosaico de preparación tiene una superficie azul claro original y texto oscuro normal. No se presupone que el texto deba invertirse automáticamente: un fondo oscuro requiere el tratamiento inverso adecuado de UIkit o estilos de texto explícitos que hagan juego.
Conectar la navegación de sesiones con el contenido del sistema de diseño UIkit
Conectar la navegación de sesiones con el contenido
La lista de navegación incluye uk-switcher con connect: #sessions y una animación de fundido. La lista de contenido tiene la clase uk-switcher y el ID correspondiente. El orden de la lista establece la correspondencia: el primer control activa el primer elemento de contenido, así que al añadir o reordenar una sesión hay que actualizar ambos lados a la vez. El selector connect explícito evita depender de la posición de un elemento hermano inmediato.
La navegación utiliza uk-tab para el tratamiento visual. UIkit gestiona el estado del elemento activo y el comportamiento de accesibilidad asociado. El estado original del plan es deliberadamente independiente: ver otra sesión no la selecciona automáticamente. Solo «Elegir sesión» cambia la etiqueta de selección y dirige la atención al campo de asistentes.
Abre «Prototipado» y examina su contenido diferenciado.
Elige esa sesión y comprueba la etiqueta de selección de abajo.
Cambia a «Clínica de sistemas» sin elegirla; el plan local seguirá indicando «Prototipado».
Anchos adaptables y control de los márgenes de cuadrícula del sistema de diseño UIkit
Anchos adaptables y control de los márgenes de cuadrícula
El contenido de la sesión utiliza uk-width-2-3@m y uk-width-1-3@m dentro de uk-grid. En el punto de interrupción mediano, 960px, el contenido y el mosaico de preparación se disponen horizontalmente. Por debajo de ese punto, se apilan. Las secciones del plan y de preparación aplican reglas de ancho de media columna en el mismo punto de interrupción, lo que conserva un orden lógico en pantallas pequeñas.
La cuadrícula de UIkit usa la lógica de separación asociada a sus clases de cuadrícula. El ejemplo utiliza uk-grid-medium en las secciones principales y uk-grid-small en el encabezado. No añadas márgenes arbitrarios a los elementos de la cuadrícula para luego suponer que sus anchos fraccionarios siguen sumando correctamente. El contenedor exterior y el relleno proporcionan el espacio en los bordes; los ajustes locales para móviles reducen el relleno de las tarjetas y el tamaño de los encabezados.
Detalles de preparación del sistema de diseño UIkit con estado nativo de los componentes
Detalles de preparación con el estado nativo del componente
La clase uk-accordion-default aplica el estilo predeterminado. El atributo uk-accordion establece multiple: true, por lo que abrir una respuesta de preparación no cierra la otra. Cada elemento contiene un uk-accordion-title y un uk-accordion-content. El entorno de ejecución controla el estado de expansión y la visibilidad del contenido; las clases de CSS por sí solas no proporcionan ese comportamiento.
Las dos preguntas responden a distintas inquietudes prácticas: qué llevar y si el planificador local reserva un asiento. Explicitar la segunda respuesta evita que la interfaz dé a entender que se realiza una transacción para un evento externo. Este límite no solo aparece en el contenido del acordeón; el estado aplicado también indica que no se reservó ningún asiento.
multiple: true permite mantener abiertas ambas respuestas.
El título y el contenido deben permanecer en el mismo elemento del acordeón.
El contorno de foco del teclado permanece visible en cada título.
Sistema de diseño UIkit: separar la apariencia de la biblioteca de la validación de la aplicación
Separar la apariencia de la biblioteca de la validación de la aplicación
El campo de asistente usa uk-input dentro de uk-form-controls, con una etiqueta real y un texto explicativo. La validación obligatoria del navegador impide enviar el formulario vacío. La aplicación añade una comprobación de espacios en blanco y aplica uk-form-danger y aria-invalid cuando se producen eventos de validación, manteniendo alineados los estados visual y semántico. Al editar, se borra el error obsoleto.
Al elegir una sesión, se actualiza la selección local y se enfoca el campo del nombre. Al enviar el formulario, se muestra un mensaje de estado con el asistente y la sesión elegida. El texto se inserta con textContent, por lo que el marcado introducido no se ejecuta. Se trata de un planificador local sin backend; UIkit no atribuye al formulario funciones de registro, guardado ni notificación.
Sistema de diseño UIkit: cargar CSS, el entorno de ejecución y, después, el código de la aplicación
Cargar CSS, el entorno de ejecución y, después, el código de la aplicación
Instala [email protected] y copia CSS y JavaScript compilados desde dist a los recursos locales. Carga CSS antes del pequeño ajuste de diseño y uikit.min.js antes de app.js. Ambos scripts pueden usar defer para conservar el orden de origen tras el análisis del documento. El ejemplo del cuerpo proporciona todos los atributos y el contenido de los componentes.
El paquete de iconos es opcional en este caso, ya que la página no usa uk-icon. Si más adelante añades iconos, carga el entorno de ejecución de iconos correspondiente y asigna etiquetas significativas a los controles que solo tengan iconos. Evita mezclar un paquete de JavaScript más reciente con una hoja de estilos antigua solo porque coincidan los nombres de archivo: la estructura de los componentes y los estilos deben proceder del mismo paquete fijado.
Sistema de diseño UIkit: mantener estables las conexiones del Switcher a medida que crece el contenido
Mantener estables las conexiones del selector a medida que crece el contenido
El Switcher asigna los elementos de navegación a los elementos de contenido por orden. Para añadir una sesión, hay que añadir ambos elementos en la misma posición, mientras que connect: #sessions establece el destino explícito. Si hay varios Switcher independientes en una página, asigna un ID único a cada destino y conserva esa relación en el atributo de inicialización correspondiente.
La sesión elegida sigue siendo independiente del panel activo. Explorar otra sesión no debe sobrescribir silenciosamente una elección ya hecha en el planificador. Al añadir paneles más largos, comprueba la cuadrícula adaptable compartida y el contenido del acordeón en el panel recién activado; ajustar solo el panel inicial puede ocultar problemas de diseño hasta que el usuario cambie de panel.
Ejemplos de componentes del sistema de diseño UIkit
Página de taller con atributos nativos de UIkit
El Switcher se conecta a #sessions; el acordeón permite abrir varias secciones; los anchos de la cuadrícula se activan en @m.
HTML
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
El atributo uk-switcher inicializa el comportamiento; la clase uk-switcher identifica su contenedor de contenido.
Esta composición no necesita ningún paquete de iconos de UIkit.
Comportamiento original del planificador local
La elección de sesiones y la validación son lógica de la aplicación, además de las interacciones nativas de UIkit.
javascript
const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';});
Estos ajustes no son valores oficiales de los tokens predeterminados.
04
Configuración del agente de IA del sistema de diseño UIkit
Punto de partida para la implementación
Guarda los ajustes de pantalla proporcionados como style.css y el comportamiento del planificador local como app.js. UIkit gestiona el Switcher y el acordeón. Esta composición no requiere el paquete de iconos. El contenedor de HTML incluye todo el marcado del cuerpo; guarda los ejemplos de interacción y de CSS proporcionados con los nombres de archivo indicados aquí.
HTML
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
Una instrucción para tu proyecto
Instrucción para el agente
Usa UIkit 3.25.25 para ampliar el planificador de talleres proporcionado. Conserva uk-switcher con su conexión explícita a #sessions, el orden coincidente de navegación y contenido, las fracciones adaptables de uk-grid y el acordeón nativo que permite abrir varios elementos. Ver una sesión debe seguir siendo una acción independiente de elegirla. Al elegir una, se enfoca el campo etiquetado del asistente; si el formulario se envía con solo espacios en blanco, debe mostrar uk-form-danger y aria-invalid. El estado debe indicar la sesión elegida y el asistente como parte de un plan local, sin afirmar que se ha reservado un asiento. Carga el entorno de ejecución de UIkit correspondiente antes del script de la aplicación.
05
Fuentes y alcance del sistema de diseño UIkit
Referencia de los componentes nativos de UIkit 3.25.25. Los valores de Less son definiciones de compilación; los ajustes locales de título, relleno y foco son originales. No se realizan reservas de eventos.
