Un espacio de trabajo funcional de comprobación de Foundation que utiliza XY Grid, validadores personalizados de Abide, confirmación de Reveal, ajustes Sass reales y código completo de integración local.
Foundation nativo para Sites 6.9.0 CSS/JavaScript con jQuery 3.7.1; reglas originales de comprobación de impresión. · Referencia de implementación
02
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.
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.
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.
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.
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.
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.
Introduce cinco páginas y envía el formulario: la revisión debe permanecer cerrada.
Introduce dieciséis páginas, un título y completa la revisión previa.
Revisa los valores capturados antes de registrar la prueba local.
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.
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.
Fija y carga la cadena de dependencias del sistema de diseño de Foundation
Fija y carga la cadena de dependencias
Instala [email protected] y [email protected]; 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.
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.
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.
HTML
<main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
Todos los colores de la portada son decisiones de la aplicación.
04
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í.
HTML
<!-- npm install [email protected][email protected]
mkdir -p assets
cp node_modules/foundation-sites/dist/css/foundation.min.css assets/
cp node_modules/foundation-sites/dist/js/foundation.min.js assets/
cp node_modules/jquery/dist/jquery.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Proof desk</title>
<link rel="stylesheet" href="assets/foundation.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/jquery.min.js" defer></script>
<script src="assets/foundation.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
</body></html>
Una instrucción para tu proyecto
Instrucción para el agente
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.
05
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.
