# Sistema de diseño UIkit ## Vista previa de la interfaz del sistema de diseño UIkit Cambia entre tres sesiones, despliega los detalles de preparación, elige una sesión y valida un plan local para los asistentes. ## 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. ### Tipografía | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @global-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Pila de fuentes del sistema predeterminada. | | @global-font-size | 16px | Tamaño de texto base. | | @global-line-height | 1.5 | Interlineado del texto del cuerpo. | | @global-large-font-size | 1.5rem | Ayudante de texto grande. | | @global-medium-font-size | 1.25rem | Ayudante de texto mediano. | | @global-small-font-size | 0.875rem | Ayudante de texto pequeño. | ### Funciones del color | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @global-color | #666 | Texto predeterminado. | | @global-emphasis-color | #333 | Texto y encabezados con mayor énfasis. | | @global-muted-color | #999 | Color de texto atenuado predeterminado; la vista previa modifica los metadatos a #65717a. | | @global-link-color | #1e87f0 | Enlaces predeterminados. | | @global-background | #fff | Fondo predeterminado de página/superficie. | | @global-muted-background | #f8f8f8 | Mosaico/superficie atenuados. | | @global-primary-background | #1e87f0 | Superficie de acento principal. | | @global-secondary-background | #222 | Superficie oscura secundaria. | | @global-border | #e5e5e5 | Bordes neutros. | ### Espaciado y controles | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @global-margin | 20px | Ritmo de márgenes predeterminado. | | @global-small-margin | 10px | Margen pequeño. | | @global-medium-margin | 40px | Margen mediano. | | @global-large-margin | 70px | Margen grande. | | @global-gutter | 30px | Separación de cuadrícula predeterminada. | | @global-small-gutter | 15px | Separación pequeña de cuadrícula. | | @global-medium-gutter | 40px | Separación mediana de cuadrícula. | | @global-control-height | 40px | Altura normal de entrada/botón. | | @global-control-small-height | 30px | Altura de control pequeña. | | @global-control-large-height | 55px | Altura de control grande. | ### Rangos adaptables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @breakpoint-small | 640px | Comienzan las reglas de ancho @s. | | @breakpoint-medium | 960px | Comienzan las reglas de ancho @m; diseño del planificador en dos columnas. | | @breakpoint-large | 1200px | Comienzan las reglas de ancho @l. | | @breakpoint-xlarge | 1600px | Comienzan las reglas de ancho @xl. | ### Ajustes originales del taller | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Heading | 42px; 34px below 640px | Modificación local explícita de uk-heading-small. | | Card padding | 28px; 20px below 640px | Composición compacta local explícita. | | Metadata color | #65717a | Texto local de metadatos más oscuro sobre superficies claras. | | Focus outline | 3px solid #145ca5, offset 4px | Se añadió énfasis de teclado para pestañas, títulos de acordeón y botones. | ## Guía completa del sistema de diseño UIkit Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. Abre «Prototipado» y examina su contenido diferenciado. 2. Elige esa sesión y comprueba la etiqueta de selección de abajo. 3. Cambia a «Clínica de sistemas» sin elegirla; el plan local seguirá indicando «Prototipado». Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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 uikit@3.25.25 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. ```

UIkit / Workshop program

One afternoon.
Three ways to learn.

Local planner

Plan details

Use a name to label this local plan.

Selected: Design critique

No plan recorded yet.

Before you arrive

  • What should I prepare?

    Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.

  • Does this reserve a seat?

    No. This preview records a choice only in memory. It is not connected to an event or registration service.

Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.

``` Referencia de código - 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. ``` 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.';}); ``` Referencia de código - Al elegir una sesión, se enfoca el campo del asistente. - No se llama a ningún servicio de reservas ni de notificaciones. ### Ajustes explícitos a nivel de pantalla Pequeños ajustes de espaciado y foco que conservan los componentes de UIkit. ``` body{background:#fafafa}.uk-container-small{max-width:1040px}.uk-heading-small{font-size:42px}.uk-card-body{padding:28px}.uk-text-meta{color:#65717a}.uk-button{white-space:normal}.uk-tab{flex-wrap:wrap}.uk-card-title{font-size:24px;line-height:1.3}.uk-tile-muted{background:#edf3f8}.uk-button:focus-visible,.uk-tab a:focus-visible,.uk-accordion-title:focus-visible{outline:3px solid #145ca5;outline-offset:4px}@media(max-width:639px){.uk-padding{padding:20px}.uk-heading-small{font-size:34px}.uk-card-body{padding:20px}.uk-card-title{font-size:22px}} ``` Referencia de código - Estos ajustes no son valores oficiales de los tokens predeterminados. ## 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í. ``` Workshop planner

UIkit / Workshop program

One afternoon.
Three ways to learn.

Local planner

Plan details

Use a name to label this local plan.

Selected: Design critique

No plan recorded yet.

Before you arrive

  • What should I prepare?

    Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.

  • Does this reserve a seat?

    No. This preview records a choice only in memory. It is not connected to an event or registration service.

Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.

``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Less Variables del tema definidas en tiempo de compilación. - Switcher Comportamiento conectado de navegación y contenido. - Acordeón Expansión múltiple y estructura. - Cuadrícula Anchos adaptables y separaciones. - Form Clases de entrada y validación. - Instalación Carga de estilos y entorno de ejecución. ## Recursos relacionados con el sistema de diseño UIkit ### Vant Un flujo móvil de selección de dirección creado con Vant 4: variables reales de CSS, identidad de dirección controlada, validación de campos, cambio de tema y guardado explícitamente local. ### Vuestic UI Una hoja de evaluación nativa de Vuestic, con preajustes de modo claro y oscuro verificados en el código fuente, etiquetas de valoración accesibles, validación de áreas de texto, un promedio calculado y un estado guardado que conserva la evaluación completada. ### Web Awesome Examina los tokens semánticos reales de Web Awesome en elementos personalizados nativos, incluidos los cambios de radio y espaciado con alcance definido, el estilo de shadow-DOM, el comportamiento de selección y la validación de entradas. - [Referencia de implementación](https://getuikit.com/docs/switcher) - [Fuente](https://getuikit.com/docs/less) - [Fuente](https://getuikit.com/docs/utility) - [Consulta la especificación complementaria](https://getuikit.com/docs/javascript) - [Consulta la especificación complementaria](https://getuikit.com/docs/less) - [Consulta la especificación complementaria](https://getuikit.com/docs/card) - [Consulta la especificación complementaria](https://getuikit.com/docs/switcher) - [Consulta la especificación complementaria](https://getuikit.com/docs/grid) - [Consulta la especificación complementaria](https://getuikit.com/docs/accordion) - [Consulta la especificación complementaria](https://getuikit.com/docs/form) - [Consulta la especificación complementaria](https://getuikit.com/docs/installation) - [Referencia de código](https://getuikit.com/docs/switcher) - [Referencia de código](https://getuikit.com/docs/form) - [Referencia de código](https://getuikit.com/docs/utility) - [Less Variables del tema definidas en tiempo de compilación.](https://getuikit.com/docs/less) - [Switcher Comportamiento conectado de navegación y contenido.](https://getuikit.com/docs/switcher) - [Acordeón Expansión múltiple y estructura.](https://getuikit.com/docs/accordion) - [Cuadrícula Anchos adaptables y separaciones.](https://getuikit.com/docs/grid) - [Form Clases de entrada y validación.](https://getuikit.com/docs/form) - [Instalación Carga de estilos y entorno de ejecución.](https://getuikit.com/docs/installation)