# Sistema de diseño Foundation ## Vista previa de la interfaz del sistema de diseño Foundation Valida los incrementos de páginas del folleto y el número de copias, revisa los detalles en Reveal y registra un estado de prueba local. ## Referencia de diseño del sistema de diseño Foundation Configuración de Foundation para Sites 6.9.0 y CSS predeterminado compilado, con jQuery 3.7.1. Los nombres con prefijo de dólar son opciones de Sass, no propiedades personalizadas de CSS del navegador. Las reglas de impresión y los colores de portada son elecciones originales del ejemplo. ### Paleta de Foundation | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $primary-color | #1779ba | Rol de acción principal de foundation-palette. | | $secondary-color | #767676 | Rol secundario. | | $success-color | #3adb76 | Entrada de la paleta de éxito. | | $warning-color | #ffae00 | Entrada de la paleta de advertencia. | | $alert-color | #cc4b37 | Rol de error/alerta. | | $body-font-color | #0a0a0a | Texto de lectura predeterminado. | | $body-background | #fefefe | Fondo de página predeterminado. | | $light-gray | #e6e6e6 | Fuente de superficie/borde neutro claro. | | $medium-gray | #cacaca | Neutro medio. | | $dark-gray | #8a8a8a | Neutro oscuro. | ### Tipografía y geometría | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $global-font-size | 100% | Tamaño de fuente base relativo al navegador. | | $global-lineheight | 1.5 | Interlineado del cuerpo. | | $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | Preferencia de familia predeterminada. | | $global-margin | 1rem | Ritmo de márgenes base. | | $global-padding | 1rem | Ritmo de relleno base. | | $global-radius | 0 | Esquinas cuadradas de forma predeterminada. | | $global-width | rem-calc(1200) | Ancho máximo predeterminado de la cuadrícula. | | $button-padding | 0.85em 1em | Relleno vertical/horizontal predeterminado de los botones. | ### Puntos de interrupción de XY Grid | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | small | 0 | Rango base. | | medium | 640px | División 7/5 entre el formulario de prueba y la vista previa. | | large | 1024px | Rango grande. | | xlarge | 1200px | Punto de interrupción de Sass disponible. | | xxlarge | 1440px | Punto de interrupción de Sass disponible. | | $breakpoint-classes | small medium large | La configuración predeterminada solo genera estas clases de ancho con nombre. | ### Reglas explícitas para la mesa de pruebas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | booklet validator | integer, 4–200, divisible by 4 | Supuesto original de comprobación previa implementado en Abide. | | copies validator | integer, 1–10 | Límite original de cantidad para pruebas locales. | | Page heading | 38px / 1.15; mobile 30px | Ajuste tipográfico original. | | Form padding | 24px; mobile 18px | Composición original compacta del formulario. | | Cover colors | #e3d8bd / #718474 / #31483b | Ilustración original, no valores de la paleta de Foundation. | ## Guía completa del sistema de diseño de Foundation 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. ## Sistema de diseño de Foundation para sitios con un entorno de ejecución real ### Foundation para sitios con un entorno de ejecución real > Foundation para sitios combina un framework CSS adaptable con plugins de JavaScript. La mesa de pruebas usa XY Grid para la disposición, Abide para la validación y Reveal para el cuadro de diálogo de revisión. Su entorno de ejecución compilado se carga después de jQuery 3.7.1, y $(document).foundation() inicializa los atributos de datos cuando la página ya existe. Esto es distinto de Foundation para correos electrónicos. La página usa formularios del navegador, validación de JavaScript y un modal; su marcado no es una plantilla de correo electrónico. El ejemplo sin conexión incluye los archivos reales de la versión 6.9.0 y añade un pequeño script original, en lugar de dibujar una imitación estática de esos componentes. Consulta la especificación complementaria ## Configuración de Sass y paleta predeterminada del sistema de diseño de Foundation ### Configuración de Sass y paleta predeterminada La tabla de referencia enumera opciones de la configuración de Sass instalada. La paleta predeterminada incluye primary #1779ba, secondary #767676, success #3adb76, warning #ffae00 y alert #cc4b37. Estos valores representan las funciones de color del framework; la cálida portada del folleto es una ilustración original de CSS con su propia paleta. Las opciones prefijadas con el signo de dólar son valores de entrada en tiempo de compilación. No son propiedades personalizadas de CSS que se puedan asignar en un atributo de estilo del navegador. Usa una compilación de Sass para cambiar el tema del framework o añade CSS convencional, con un ámbito claramente definido, después de la hoja de estilos compilada para hacer un ajuste específico de una pantalla. El ejemplo opta por esta última opción para el encabezado, el relleno del formulario y el fondo. Consulta la especificación complementaria ## Geometría predeterminada y jerarquía de lectura local del sistema de diseño de Foundation ### Geometría predeterminada y jerarquía de lectura local Foundation comienza con un tamaño de fuente del 100 % relativo al navegador, un interlineado de 1.5 para el cuerpo y una pila tipográfica Helvetica Neue/Helvetica/Roboto/Arial. El radio global es cero, lo que da lugar a un estilo predeterminado de bordes más rectos que el de muchos kits de componentes actuales. Los campos de entrada, los recuadros informativos y el formulario de pruebas mantienen ese estilo, en lugar de adoptar un tratamiento de esquinas muy redondeadas que no guarda relación con él. La aplicación elige un encabezado de página de 38px con un interlineado de 1.15, reducido a 30px en móviles. El texto introductorio tiene un tamaño de dieciocho píxeles. La ilustración usa letras gruesas apiladas y un círculo sencillo para evocar el contexto de impresión, mientras que el formulario conserva una superficie de trabajo blanca y estable. Estas decisiones locales se detallan por completo en el archivo CSS proporcionado. Consulta la especificación complementaria ## Selección de la cuadrícula XY y los canales del sistema de diseño de Foundation ### Selección de la cuadrícula XY y sus medianiles El contenedor grid-container incluye una fila grid-x grid-margin-x. Sus dos celdas son medium-7 y medium-5, que reparten doce columnas entre el formulario y la vista previa del folleto en pantallas de más de 640px. Por debajo de ese punto de quiebre, se apilan en el orden del código fuente. La fila anidada de copias de páginas y pruebas usa celdas small-6 para mantener juntos los dos campos numéricos compactos en un teléfono. Foundation admite cuadrículas con canales de margen y con padding. En este ejemplo, se eligen de forma coherente canales de margen dentro del contenedor, en lugar de mezclar ambos tipos en una misma fila. El mapa de puntos de quiebre incluye xlarge y xxlarge para usarlos en Sass, pero la opción predeterminada breakpoint-classes genera clases de ancho small, medium y large. Que una entrada figure en el mapa no significa que se genere automáticamente cada clase de utilidad correspondiente en el archivo compilado. Consulta la especificación complementaria ## Registra las reglas de validación reales del sistema de diseño de Foundation ### Registra las reglas de validación reales El formulario usa data-abide con novalidate y data-validate-on=submit para evitar que los errores se redistribuyan al cambiar un campo durante un clic en el botón; cada elemento form-error apunta a su campo de entrada mediante data-form-error-for. Un recuadro de alerta con la marca data-abide-error ofrece un resumen general del formulario. Los errores de título obligatorio y de la casilla de verificación de revisión previa se gestionan junto con dos validadores numéricos explícitos. El validador del folleto acepta números enteros del cuatro al doscientos que sean divisibles por cuatro. El validador de copias acepta números enteros del uno al diez. Ambos se registran en Foundation.Abide.defaults.validators antes de la inicialización y se referencian mediante data-validator. En este flujo probado, el atributo nativo step no aplicó por sí solo el incremento del folleto, así que la implementación no depende de él. La premisa de que las páginas se cuentan de cuatro en cuatro corresponde a este ejemplo, no a todos los procesos de impresión. 1. Introduce cinco páginas y envía el formulario: la revisión debe permanecer cerrada. 2. Introduce dieciséis páginas, un título y completa la revisión previa. 3. Revisa los valores capturados antes de registrar la prueba local. Consulta la especificación complementaria ## Vincula la apariencia de los errores con la navegación del sistema de diseño de Foundation ### Vincula la apariencia de los errores con la navegación En forminvalid.zf.abide, la aplicación enfoca el primer campo que tiene data-invalid. Así, el usuario llega directamente a un punto que debe corregir, mientras el recuadro de alerta explica el problema general. Los elementos de error de los campos se asocian mediante aria-describedby, de modo que el mensaje no sea solo una marca roja junto a un campo sin identificar de otro modo. El flujo completo de eventos se muestra en el ejemplo de JavaScript. Se evita el evento submit habitual para impedir que el navegador navegue a un destino inexistente. Solo formvalid.zf.abide crea la captura provisional y abre la revisión. Esto es importante: vincular el cuadro de diálogo de revisión directamente al botón de envío eludiría el resultado de la validación. Consulta la especificación complementaria ## Revisa una captura en Reveal con el sistema de diseño de Foundation ### Revisa una instantánea en Reveal El modal lleva data-reveal y una relación aria-labelledby con su encabezado. El controlador del formulario válido crea un objeto provisional y genera su lista de definiciones con textContent. Reveal se abre a través de Foundation API, proporciona el comportamiento modal y se cierra mediante botones data-close o el controlador de confirmación. Elegir «Seguir editando» cierra el cuadro de diálogo sin registrar un resultado. «Registrar prueba local» escribe los mismos valores provisionales en el recuadro de estado antes de cerrar. El icono de cierre tiene una etiqueta explícita. La confirmación no afirma que se haya subido un archivo ni creado un pedido de impresión, porque la aplicación no realiza ninguna de esas operaciones. - Reveal muestra los valores capturados por el evento de formulario válido. - Cancelar no cambia ningún resultado local registrado. - Confirmar solo registra el estado de la vista previa, no un pedido externo. Consulta la especificación complementaria ## Fija y carga la cadena de dependencias del sistema de diseño de Foundation ### Fija y carga la cadena de dependencias Instala foundation-sites@6.9.0 y jquery@3.7.1; después, copia CSS, Foundation JavaScript compilados y jQuery en los recursos locales. Carga la hoja de estilos antes de los ajustes de la página. Carga primero jQuery, Foundation en segundo lugar y el script de la aplicación en tercer lugar; defer conserva ese orden después de analizar el documento. Registra los validadores personalizados antes de llamar a $(document).foundation(). Si los registras después de la inicialización, crearás una dependencia temporal evitable. El ejemplo actual usa el entorno de ejecución compilado completo para garantizar la reproducibilidad. En producción, el paquete puede seleccionar complementos y sus dependencias, pero no debe eliminar Abide ni Reveal si el marcado conserva sus atributos data. Consulta la especificación complementaria ## Foundation La comprobación previa del sistema de diseño es una decisión local, no una aprobación para producción ### La comprobación previa es una decisión local, no una aprobación para producción El diagrama y la regla sobre el número de páginas concretan el contexto de la prueba, pero no son especificaciones de producción para una imprenta en particular. El ejemplo pide explícitamente a los usuarios que confirmen las restricciones reales con su proveedor de producción. La cantidad de copias es un límite de ejemplo local, no información sobre inventario ni precios. Un flujo de envío real requeriría inspeccionar los archivos, validarlos en el servidor y devolver una respuesta de aceptación rastreable. Foundation proporciona los componentes básicos de la interfaz, pero esas comprobaciones específicas del dominio deben proceder de la aplicación. Dejar claro este límite permite reutilizar el patrón de validación y revisión sin heredar una afirmación engañosa de éxito. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño Foundation ### Marcado de la mesa de pruebas XY Grid, errores de formulario explícitos, casilla de comprobación previa, avisos y confirmación con Reveal. ```

FOUNDATION / PRINT PROOF DESK

Check the job before it leaves the desk.

A local proof checklist built with XY Grid, Abide and Reveal.

Enter a job title.
Use a multiple of four, from 4 to 200.
Use a whole number from 1 to 10.
Preflight checkComplete the preflight check.
No proof recorded. This preview does not submit a print order.

Review the proof details

This confirms only the local example. No file is uploaded and no print order is created.

``` Referencia de código - El formulario incluye data-abide y novalidate para que Abide gestione el flujo de errores. - Reveal se identifica mediante un ID único y data-reveal. ### Validadores personalizados de Abide y flujo de Reveal Los validadores se registran antes de la inicialización de Foundation; formvalid abre una instantánea en Reveal. ``` Foundation.Abide.defaults.validators.booklet=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=4&&n<=200&&n%4===0}; Foundation.Abide.defaults.validators.copies=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=1&&n<=10}; $(document).foundation();let pending=null; $('#proof-form').on('submit',event=>event.preventDefault()).on('formvalid.zf.abide',()=>{pending={title:$('#job').val().trim(),pages:Number($('#pages').val()),copies:Number($('#copies').val()),stock:$('#stock').val()};const list=document.getElementById('proof-summary');list.replaceChildren();for(const[label,value]of [['Job',pending.title],['Pages',pending.pages],['Proof copies',pending.copies],['Stock',pending.stock]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=value;list.append(dt,dd);}$('#proof-review').foundation('open');}).on('forminvalid.zf.abide',()=>{document.querySelector('#proof-form [data-invalid]')?.focus()}).on('reset',()=>{$('#result').text('No proof recorded. This preview does not submit a print order.')}); $('#confirm').on('click',()=>{$('#result').text('Recorded locally: '+pending.title+' — '+pending.pages+' pages, '+pending.copies+' proof copies. No order was created.');$('#proof-review').foundation('close')}); ``` Referencia de código - En esta ruta de Abide probada, el atributo step por sí solo no imponía incrementos de cuatro páginas; el validador personalizado sí lo hace. - Solo un formulario válido abre el cuadro de diálogo de revisión. ### Portada original y ajustes de diseño Ilustración de CSS y tipografía específica para cada página, aparte de la configuración predeterminada de Foundation. ``` body{background:#f6f5f1}.proof-desk{max-width:1100px;padding-top:32px;padding-bottom:32px}header{margin-bottom:32px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#596456}h1{font-size:38px;line-height:1.15}.lead{font-size:18px;color:#53606a}form{background:white;padding:24px;border:1px solid #ddd}.paper-preview{background:#e3d8bd;aspect-ratio:4/3;padding:24px;position:relative;overflow:hidden;margin-bottom:20px}.paper-preview span{position:relative;z-index:1;font-size:36px;line-height:1;font-weight:700;letter-spacing:-.04em;color:#31483b}.paper-circle{position:absolute;width:75%;aspect-ratio:1;background:#718474;border-radius:50%;top:25%;left:40%}.paper-preview strong{position:absolute;bottom:20px;left:24px;color:#31483b;font-size:12px;letter-spacing:.13em}.callout h2{font-weight:600}#result{margin-top:16px}.reveal dl{display:grid;grid-template-columns:110px 1fr;gap:10px}.reveal dd{overflow-wrap:anywhere}.button:focus-visible{outline:3px solid #143e5b;outline-offset:3px}@media(max-width:639px){h1{font-size:30px}form{padding:18px}.paper-preview{margin-top:16px}} ``` Referencia de código - Todos los colores de la portada son decisiones de la aplicación. ## Configuración del agente del sistema de diseño Foundation ### Punto de partida para la implementación El archivo app.js proporcionado registra los validadores de Abide antes de la inicialización y conecta Reveal con un evento de formulario válido. Guarda el archivo CSS original como style.css. La vista previa local integra en línea estas mismas dependencias. El contenedor HTML incluye todo el marcado del cuerpo; guarda los ejemplos proporcionados de interacción y CSS con los nombres de archivo indicados aquí. ``` Proof desk

FOUNDATION / PRINT PROOF DESK

Check the job before it leaves the desk.

A local proof checklist built with XY Grid, Abide and Reveal.

Enter a job title.
Use a multiple of four, from 4 to 200.
Use a whole number from 1 to 10.
Preflight checkComplete the preflight check.
No proof recorded. This preview does not submit a print order.

Review the proof details

This confirms only the local example. No file is uploaded and no print order is created.

``` ### Una instrucción para tu proyecto ``` Parte de la mesa de pruebas de impresión Foundation 6.9.0 proporcionada, con su marcado XY Grid, sus validadores de Abide y su flujo de Reveal. Mantén las comprobaciones de que el número de páginas sea un entero y un múltiplo de cuatro, así como la validación al enviar el formulario; conserva las etiquetas y sus asociaciones con los errores. Abre la revisión nativa de Reveal solo si los datos de la prueba son válidos y mantén la cancelación separada de la confirmación local. Conserva la inicialización completa y el diseño original CSS; no sustituyas los validadores únicamente por clases visuales de error ni des a entender que se ha encargado un trabajo de impresión. ``` ## Fuentes y alcance del sistema de diseño Foundation Foundation for Sites 6.9.0 con jQuery 3.7.1. Las reglas de impresión y la ilustración son ejemplos originales. No se implementan la carga de archivos ni los pedidos de impresión. - Estilos globales Fundamentos de Sass y paleta. - XY Grid Anchos de celda y tipos de separación. - Abide Reglas y eventos de validación. - Reveal Estructura del modal y API. - JavaScript Carga e inicialización de dependencias. - Formularios Marcado y estilos de formulario nativos. ## Recursos relacionados con el sistema de diseño Foundation ### Framework7 Un cuaderno de bocetos nativo de Framework7 con acciones swipeout reales, valores explícitos del tema de iOS, un activador de acciones accesible mediante teclado y una lista filtrada que conserva los estudios completados hasta que se restablece. ### gluestack UI Crea una lista de verificación para un kit de campo con los creadores reales de Button e Input de gluestack, colores semánticos explícitos de v5 y el código fuente completo de React Native Web. Examina la validación, las acciones de teclado, la identidad estable de los elementos y el progreso de preparación calculado localmente. ### Headless UI Headless UI proporciona componentes de interacción React sin estilos para diálogos, listas desplegables y conmutadores. Esta guía se centra en combinar su comportamiento nativo de enfoque, selección y ventanas emergentes con CSS convencional, usando como ejemplo práctico un flujo para compartir documentos. - [Referencia de implementación](https://get.foundation/sites/docs/abide.html) - [Fuente](https://get.foundation/sites/docs/global.html) - [Fuente](https://get.foundation/sites/docs/xy-grid.html) - [Fuente](https://get.foundation/sites/docs/abide.html) - [Consulta la especificación complementaria](https://get.foundation/sites/docs/javascript.html) - [Consulta la especificación complementaria](https://get.foundation/sites/docs/global.html) - [Consulta la especificación complementaria](https://get.foundation/sites/docs/xy-grid.html) - [Consulta la especificación complementaria](https://get.foundation/sites/docs/abide.html) - [Consulta la especificación complementaria](https://get.foundation/sites/docs/reveal.html) - [Referencia de código](https://get.foundation/sites/docs/xy-grid.html) - [Referencia de código](https://get.foundation/sites/docs/abide.html) - [Referencia de código](https://get.foundation/sites/docs/global.html) - [Estilos globales Fundamentos de Sass y paleta.](https://get.foundation/sites/docs/global.html) - [XY Grid Anchos de celda y tipos de separación.](https://get.foundation/sites/docs/xy-grid.html) - [Abide Reglas y eventos de validación.](https://get.foundation/sites/docs/abide.html) - [Reveal Estructura del modal y API.](https://get.foundation/sites/docs/reveal.html) - [JavaScript Carga e inicialización de dependencias.](https://get.foundation/sites/docs/javascript.html) - [Formularios Marcado y estilos de formulario nativos.](https://get.foundation/sites/docs/forms.html)