Estructura
Container, grid, width y proportions definen el marco general del patrón.
Patterns
Patterns muestra cómo se combinan los módulos del framework en estructuras reales: hero, navegación, cards, artículos, dashboards y otros patrones reutilizables.
Qué resuelve patterns
Después de revisar los módulos del sistema por separado, patterns muestra cómo se ensamblan en componentes y bloques funcionales. Esta sección no introduce nuevas reglas base; demuestra el uso correcto de las que ya existen.
Su función es convertir la teoría del framework en ejemplos aplicados, claros y replicables.
Cómo leer esta sección
- Cada patrón muestra qué problema resuelve.
- Explica qué módulos del framework intervienen.
- Presenta una estructura base en HTML.
- Sirve como referencia para replicar bloques reales sin salir del sistema.
Patrones disponibles
Hero
Construcción de aperturas visuales con jerarquía, ritmo y CTAs.
Navigation
Patrones de navegación principal, grupos de enlaces y headers funcionales.
Cards
Grids y bloques modulares basados en layout, stack y spacing.
Article
Estructura editorial con ancho de lectura, títulos y bloques de contenido.
Buttons
Grupos de acciones, CTAs y disposiciones de botones consistentes.
Dashboard
Composición de paneles, áreas principales y bloques de información.
Cómo se construyen los patrones
Ritmo
Section y stack ordenan la separación macro e interna del bloque.
Tipografía
Typography y text establecen la jerarquía y los ajustes de lectura.
Helpers
Spacing, align, radius y visibility resuelven ajustes finos del patrón.
Motion
Animations puede integrarse cuando el patrón requiere entradas suaves o secuencias.
Consistencia
Guidelines y naming conventions ayudan a mantener el patrón dentro del sistema.
Ejemplo simple de patrón
<section class="section section-lg">
<div class="container container-lg">
<div class="stack stack-lg text-center">
<p class="meta ls-sm">Framework Documentation</p>
<h1 class="title title-xl fnt-uppercase">Hero Pattern</h1>
<p class="narrow centered">
Introducción breve del bloque.
</p>
<div class="align justify-center gap-2 wrap">
<a href="#">Primary CTA</a>
<a href="#">Secondary CTA</a>
</div>
</div>
</div>
</section>Aquí se combinan section, container, stack, text helpers, width y align sin introducir ninguna clase fuera del sistema.
Principios para construir patrones
Componer antes que inventar
Un patrón debe construirse combinando módulos existentes antes de justificar nuevas clases.
Patrón antes que componente aislado
El foco está en resolver estructuras repetibles, no solo piezas sueltas.
Uso real del sistema
Cada patrón debe mostrar cómo se usa de verdad el framework, no solo una demostración decorativa.
Consistencia primero
Si un patrón exige romper demasiadas reglas del framework, el problema probablemente está en el patrón.
Siguiente paso
Continúa con pattern hero para comenzar a ver ejemplos aplicados del sistema.