Base
Fundamentos, tokens, breakpoints y tipografía base.
Framework Core
El archivo core organiza el orden del sistema, define las capas del framework y reúne todos los módulos dentro de una sola entrada consistente.
Qué es framework core
Framework Core es el punto de entrada del sistema. Su función es reunir todos los módulos del framework en un orden controlado, respetando su jerarquía y su responsabilidad estructural.
En Octanogram Framework, este archivo es octanogram.css. No define
utilidades ni layout directamente: organiza el sistema y establece el orden en que
cada parte debe entrar al proyecto.
Archivo principal del sistema
/* ================================
FRAMEWORK CORE
================================ */
/* ----------------
Base
---------------- */
@import "base.css" layer(base);
@import "breakpoints.css" layer(base);
@import "typography.css" layer(base);
@import "text.css" layer(base);
/* ----------------
Layout
---------------- */
@import "layout.css" layer(layout);
/* ----------------
Rhythm
---------------- */
@import "sections.css" layer(rhythm);
@import "stack.css" layer(rhythm);
/* ----------------
Helpers
---------------- */
@import "spacing.css" layer(helpers);
@import "align.css" layer(helpers);
@import "width.css" layer(helpers);
@import "height.css" layer(helpers);
@import "radius.css" layer(helpers);
@import "visibility.css" layer(helpers);
@import "lists.css" layer(helpers);
/* ----------------
Animations
---------------- */
@import "animations.css" layer(animations);
/* ----------------
Project overrides
---------------- */
@layer overrides {
/* CSS específico del sitio */
}Resumen rápido de capas
Layout
Estructura horizontal principal del sistema.
Rhythm
Ritmo macro e interno de los bloques.
Helpers
Ajustes puntuales de composición, tamaño, visibilidad y listas.
Overrides
CSS específico del sitio o de la implementación final.
Qué resuelve el core
Orden
Establece la secuencia correcta en la que entra cada módulo del sistema.
Separación
Mantiene las responsabilidades distribuidas por capa y evita mezclar lógica.
Escalabilidad
Permite añadir módulos nuevos sin romper la lógica general del framework.
Mantenimiento
Hace visible la arquitectura completa del sistema en un solo archivo.
Capas que organiza
Base
Define reset, tokens, breakpoints, tipografía y helpers de texto.
Layout
Introduce containers, grid y proporciones estructurales.
Rhythm
Establece sections y stack para controlar el flujo vertical del sistema.
Helpers
Activa spacing, align, width, height, radius, visibility y lists.
Animations
Organiza el sistema de animaciones de forma aislada y reutilizable.
Overrides
Reserva el espacio final para el CSS específico del proyecto.
Por qué el orden importa
- Base debe entrar primero porque define el lenguaje del sistema.
- Layout entra después para construir estructura sobre esa base.
- Rhythm se apoya en la composición ya definida.
- Helpers aparecen después para complementar el sistema sin reemplazar sus fundamentos.
- Animations se mantienen separadas para no contaminar helpers estructurales.
- Overrides deben ir al final porque pertenecen al proyecto, no al framework.
Qué no debe hacer el core
No define componentes
El core no debe contener estilos específicos de cards, formularios o piezas del proyecto.
No mezcla responsabilidades
No debe incluir utilidades nuevas ni reglas que pertenezcan a base, layout o helpers.
No sustituye la documentación
Su función es organizar, no explicar. La explicación vive en páginas modulares como esta.
No guarda CSS de proyecto
El CSS específico del sitio solo debe existir en la capa de overrides o en archivos externos del proyecto.
Siguiente paso
Continúa con file responsibilities para entender qué le corresponde a cada archivo del framework.