Framework Documentation

Base

Foundations Reset Tokens

Base define el punto de partida del framework: reset, box-sizing, html, body y las variables globales que sostienen el resto del sistema.

Overview

Qué resuelve base

El archivo base.css establece el comportamiento mínimo y compartido del sistema. Aquí se define cómo deben comportarse los elementos antes de entrar a layout, ritmo o utilidades.

Su función es crear una base consistente y neutral, no resolver componentes, ni helpers visuales, ni estilos propios del proyecto.

Source File

Estructura del archivo

/* ================================
   BASE
   Reset + fundamentos globales
   ================================ */

/* ----------------
   Reset moderno
   ---------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  line-height: 1.5;
  font-family: var(--font-base);
}

/* ----------------
   Tipografía base
   ---------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
}

p {
  margin: 0;
}

/* ----------------
   Variables globales
   ---------------- */

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  --color-black: #000;
  --color-white: #fff;
  --color-text: #111;
  --color-muted: #666;
}

Reset

Reset y comportamiento base

Box-sizing

Todo el sistema parte de border-box para que padding y border no alteren el cálculo del ancho visual de los elementos.

Html

Se define un tamaño base de fuente y se controla el ajuste de texto en navegadores móviles mediante -webkit-text-size-adjust.

Body

El body establece el margen inicial en cero, el line-height base y la familia tipográfica general del framework.

Tokens

Variables globales

Spacing

La escala de spacing se define aquí como fuente única del sistema. Layout, rhythm y helpers reutilizan estos mismos tokens.

  • --space-0
  • --space-1
  • --space-2
  • --space-3
  • --space-4
  • --space-5
  • --space-6
  • --space-7

Colores base

Base puede contener colores neutrales del sistema. No debe almacenar aún la identidad visual específica del proyecto.

  • --color-black
  • --color-white
  • --color-text
  • --color-muted

Boundaries

Qué sí y qué no va en base

Qué sí debe contener

  • Reset moderno.
  • Box-sizing.
  • Configuración base de html y body.
  • Variables globales del sistema.
  • Resets tipográficos mínimos.

Qué no debe contener

  • Grid o containers.
  • Helpers utilitarios como spacing o align.
  • Clases de proyecto.
  • Componentes visuales.
  • Animaciones o patrones de layout.

Connections

Relación con otros módulos

Next

Breakpoints

Extiende el sistema con lógica responsive y prefijos oficiales.

Type

Typography

Construye la escala tipográfica sobre la base ya definida.

Core

Framework Core

Ubica base dentro del orden general del sistema.

Siguiente paso

Continúa con breakpoints para entender cómo escala el sistema desde una lógica mobile-first.

Volver a file responsibilities Ir a breakpoints