TOT Boilerplate
CSS System

Sistema CSS esencial donde solo 5 variables controlan TODO el diseño. Progresión áurea φ=1.618 para crear armonía matemática perfecta. Zero duplicación, máxima eficiencia.

Título Principal

Texto breve

Item 1
Item 2
Item 3

Imagen

TOT0 Matrix

Sistema CSS esencial donde 5 variables controlan TODO. Basado en progresión áurea (φ=1.618) para crear armonía matemática perfecta en spacing, tipografía y layout.
Consonancia

Principio fundamental de no duplicación. Cada elemento tiene UNA responsabilidad de spacing. Una sola fuente de verdad que se propaga sin fragmentación.
Atomicidad Universal

Clases modulares (.pt0-.pt5, .ch/.cv, .sch/.scv) que se componen matemáticamente. Sistema fractal donde el patrón se repite a todas las escalas manteniendo proporción áurea.

Nueva Section

T087236987256

Contenido texto

Imagen Fondo 89876786

Grid Cards

Ejemplo grid

Card Uno

Contenido mínimo

Ver Edit Del
Card Dos 827345
Card Tres

Mini grid de iconos

Variables Áureas

5 variables CSS que controlan todo el sistema. Progresión matemática φ = 1.618 para spacing perfecto.
Sistema Atómico

Clases modulares que se componen como átomos. pt0-pt5, ch/cv, sch/scv para máxima flexibilidad.

Clases Guía
Di345

46456

Div 41234

2456234

2531

Lista Simple

Cinco elementos

Item uno
Item dos
Item tres
Item cuatro
Item cinco

Code Windows - Syntax para Programadores

HTML 5

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proyecto</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header class="grid">
        <h1>Mi Proyecto</h1>
        <nav>
            <ul class="grid-flow">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Proyectos</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="grid">
            <h2>Contenido Principal</h2>
            <p>Descripción del proyecto</p>
        </section>
    </main>
    
    <footer class="grid ch cv">
        <p>© 2025 Mi Proyecto</p>
    </footer>
</body>
</html>

CSS

/* TOT0 MATRIX - 5 variables controlan TODO */
:root {
    --u: 8px;           /* Unidad base */
    --r: 1.618;         /* Ratio áureo */
    --hue: 200;         /* Matiz color */
    --sat: 70%;         /* Saturación */
    --flow: column;     /* Dirección */
}

/* Reset + Grid System */
* { margin: 0; padding: 0; box-sizing: border-box; }
.grid { display: grid; 
    grid-template-columns: repeat(auto-fit, 
    minmax(min(100%, calc(var(--u) * 20)), 1fr)); }

/* Tipografía TOT0 - Solo logaritmos áureos */
h1 { font-size: calc(var(--u) * var(--r) * var(--r) * var(--r)); }
h2 { font-size: calc(var(--u) * var(--r) * var(--r)); }
h3 { font-size: calc(var(--u) * var(--r)); }
p { font-size: calc(var(--u) * 2); }
small { font-size: calc(var(--u) * 1.2); }

Final Section con .full-row

Texto limpio suelto

Último uno
Último dos
Último tres
Último cuatro
Último cinco

Primer paso
Segundo paso
Tercer paso

TOT Boilerplate CSS System