Saltar al contenido principal

Grid System v2

El Grid System v2 gobierna toda la UI de TED OS. Deroga el modelo anterior de razón áurea (basado en φ): el espaciado, la tipografía y las proporciones son ahora base-8, sin φ. Las directivas completas (G1–G20) viven en el repo (knowledge/grid-system.md) y la presentación de Paper del proyecto; esta página es la orientación.

El eje X — columnas variables, anti-estiramiento​

  • Columnas variables por ancho objetivo, no por breakpoints. El número de columnas se calcula del ancho disponible (acotado entre 4 y 20). Referencia: móvil 4 · tablet 6 · laptop 10 · escritorio 12 · ultra-ancho / TV 20.
  • Anti-estiramiento. Más pantalla = más columnas y más widgets, nunca widgets inflados. El canvas nunca se centra ni se limita.
  • overflow-x está prohibido (overflow-x: clip en el chrome de la página).

El eje Y — crecimiento​

  • El canvas crece hacia abajo; el scroll-y está permitido, el origen superior nunca se mueve.
  • Bandas por volatilidad — constante (origen) → en vivo → fresco (borde inferior). La altura de una banda es la de su grupo más alto.

Grupos — siempre contexto​

  • Ningún widget flota suelto. Cada widget vive en un grupo (un subgrid 2D cohesivo alineado al grid principal) y se renderiza por grupos a cualquier tamaño.
  • Cada grupo declara un contrato: su span de columnas/filas (y máximo), prioridad y matiz, más un widget flex que absorbe ancho extra y un widget vbottom que absorbe altura extra.

Empaquetado 2D + expansión acotada​

  • Empaquetado greedy por prioridad + balanceo — nunca una última banda con un grupo cuando la banda anterior tiene tres o más.
  • Expansión acotada — distribuye el ancho restante hasta el máximo de cada grupo (absorbido por flex); estira la altura a la banda (absorbida por flex + vbottom); el remanente extremo queda como aire editorial. Sin estiramiento uniforme repeat(auto-fit, minmax(...)).

La unidad, el radio y la tipografía​

  • Unidad cuadrada — una celda es un cuadrado verdadero en 1×1, vertical en 1×2, horizontal en 2×1.
  • Radios por jerarquía (R1–R5), concéntricos: un radio interno = el externo menos su padding.
  • Tipografía base-8 — una escala de pasos fija con clamp() por densidad; Geist para display, Geist Mono (tabular) para UI/datos.

Reglas heredadas​

  • Todo en rem, una sola perilla de escala; iconos en em.
  • El arrastre se ajusta al grid (también el teclado); el contrato del grupo sobrevive al drop.
  • Anima solo transform y opacity — nunca width/height/top/left; transition: all prohibida.
  • La accesibilidad es una compuerta, no un pulido — contraste AA, foco visible, estado por tono + etiqueta + forma, movimiento reducido respetado.

Relación con las otras reglas​

El grid complementa las convenciones de la base y las reglas de ingeniería; en un conflicto de espaciado / layout, el grid gana. Ver Fundamentos y Alcance de color.