Sistema de Espaciado Fluido (coastdigitalgroup/coastai-skills)

Sistema de Espaciado Fluido

Propósito

La skill Sistema de Espaciado Fluido proporciona una metodología para crear una escala responsiva de espacio en blanco (márgenes, paddings, gaps) que se adapta suavemente al viewport del usuario. Mediante el uso de la función CSS clamp(), el espaciado escala linealmente entre valores mínimos y máximos definidos, manteniendo la armonía visual y proporciones consistentes sin necesidad de excesivas media queries.

Casos de Uso

• Establecer una escala de espaciado fundamental para un nuevo sistema de diseño.
• Modernizar un sitio web para mejorar la consistencia visual entre móvil, tablet y escritorio.
• Diseñar layouts de alta calidad donde el espacio en blanco necesite expandirse en pantallas grandes pero mantenerse compacto en pantallas pequeñas.
• Reemplazar espaciados fijos basados en píxeles con un sistema más flexible y consciente de la implementación.

Cuándo NO Usarlo

• Páginas Sencillas y No Responsivas: Si el layout es extremadamente básico o no tiene requisitos responsivos.
• Layouts Estrictamente Fijos: Cuando las especificaciones de diseño exijan valores de píxel exactos e innegociables en todas las resoluciones.
• Soporte de Navegadores Antiguos: Si el público objetivo utiliza principalmente navegadores que no soportan CSS clamp() (por ejemplo, Internet Explorer).

Entradas

Para generar un sistema de espaciado fluido, necesitas:

1. Rango de Viewport:
   • min-width: El ancho de pantalla donde comienza el escalado (ej., 320px).
   • max-width: El ancho de pantalla donde se detiene el escalado (ej., 1280px).
2. Unidad Base de Espaciado:
   • min-size: La unidad base (ej., 16px) en min-width.
   • max-size: La unidad base (ej., 20px) en max-width.
3. Ratio de Escala:
   • Un multiplicador para determinar los pasos en la escala (ej., 1.25 para una escala de Tercera Mayor, o una progresión lineal 2x/3x/4x).

Salidas

1. Escala de Espaciado Fluido: Un conjunto de variables de CSS que definen valores desde "diminuto" hasta "enorme" usando clamp().
2. Mapeo Semántico: Guías sobre cómo aplicar estos tokens (ej., --space-m para padding de componentes, --space-xl para márgenes de sección).
3. Documentación de Uso: Reglas para combinar unidades manteniendo el ritmo vertical y la alineación horizontal.

Flujo de Trabajo

1. Definir los Parámetros de la Escala

Establece los límites para tu sistema fluido basándote en los dispositivos objetivo del proyecto. Ejemplo: 320px (Móvil) a 1440px (Escritorio), con una unidad base que escala de 16px a 24px.

2. Elegir un Ratio de Espaciado

Decide cómo deben crecer los pasos de espaciado.

• Lineal/Multiplicativo: Los pasos son múltiplos de la unidad base (ej., 0.5x, 1x, 1.5x, 2x, 4x, 8x). Mejor para una alineación predecible.
• Escala Geométrica: Cada paso es el paso anterior multiplicado por un ratio (ej., 1.25). Mejor para layouts artísticos de alto contraste.

3. Calcular los Pasos de la Escala

Crea un rango de tamaños. Una escala típica incluye:

• 3XS a XS: Para detalles diminutos, listas ajustadas y padding interno de botones.
• S a M: Para espaciado estándar de componentes y medianiles (gutters).
• L a 3XL: Para márgenes de sección, espaciado de héroe y grandes brechas de layout.

4. Generar Fórmulas CSS clamp()

Convierte los valores de píxel en fórmulas fluidas. clamp(min_rem, intercept_rem + slope_vw, max_rem)

Cálculo de pendiente: (max_px - min_px) / (max_viewport - min_viewport) * 100

5. Asignar Roles Semánticos

Mapea la escala abstracta a roles funcionales para asegurar consistencia en todo el equipo.

• space-component: --space-s
• space-layout-gutter: --space-m
• space-section: --space-xl

Reglas de Decisión

• El Principio de la Cuadrícula 8pt: Siempre que sea posible, asegúrate de que tus valores mínimos y máximos sean múltiplos de 4 u 8 para alinearse con los patrones estándar de UI.
• Principio de Proximidad: Los elementos relacionados deben tener menos espacio entre ellos que los elementos no relacionados.
• Compresión Móvil: Mantén las unidades de espaciado pequeñas (3XS-S) relativamente estables; solo las unidades más grandes (L-3XL) deben escalar agresivamente para evitar que los layouts móviles se sientan "explotados".
• Accesibilidad: Asegúrate de que, incluso en la escala más pequeña, los elementos interactivos mantengan un área de toque lo suficientemente grande (mínimo 24x24px según WCAG 2.2 SC 2.5.8, incluyendo padding; 44x44px preferido para acciones principales).
• Espaciado Relativo al Contenedor: Para espaciado que deba responder al contenedor de un componente en lugar del viewport (ej., una tarjeta que puede estar en una barra lateral estrecha o en una columna principal ancha), usa unidades de longitud de consulta de contenedor (cqi/cqw) dentro de la fórmula clamp() en lugar de vw.

Restricciones

• Responsividad: El espaciado nunca debe causar desbordamiento horizontal.
• Consistencia: Una vez definida una escala, no uses valores de píxel "únicos".
• Jerarquía: Siempre se debe usar espaciado más grande para separar bloques de contenido más grandes (ej., secciones), mientras que el espaciado más pequeño es para detalles internos de componentes.
• Alcance: Esta skill cubre únicamente valores de espaciado — no crea un grid de layout (usa responsive-grid-system), no define tamaños de tipografía (usa fluid-typography-system), ni gestiona z-index/capas.

Patrones de Fracaso Comunes

• Escalar Todo por Igual: Escalar pequeños paddings (como 4px) demasiado puede hacer que los componentes se vean distorsionados en escritorio.
• Ignorar los Gutter del Layout: Tener espaciado de componentes fluido pero medianiles (gutters) fijos del grid, llevando a una "deriva" en la alineación.
• Escala Abrumadora: Tener 20 o más pasos de espaciado diferentes hace que el sistema sea difícil de usar y mantener. Apunta a 7-9 pasos.
• Falta de Pasos Lógicos: Usar números arbitrarios en lugar de una escala o ratio consistente.

Criterios de Validación

• El espaciado escala suavemente cuando se redimensiona el viewport.
• El ritmo vertical se mantiene en todos los puntos de quiebre principales.
• No se usan valores de píxel "únicos" en la implementación; todo el espaciado utiliza las variables definidas.
• El sistema usa unidades rem para los límites mínimo y máximo de la función clamp().
• La proximidad y la jerarquía se ven reforzadas por las elecciones de espaciado.
• Los elementos interactivos conservan al menos un área de toque de 24x24px (WCAG 2.2 SC 2.5.8) en cada punto de la escala fluida, incluido el viewport más pequeño.