Introducción

Esta plantilla moderna está diseñada para crear documentación profesional y atractiva. Combina un diseño elegante con funcionalidad práctica, perfecta para guías técnicas, documentación de productos, tutoriales y más.

Características Principales

Diseño responsive, modo oscuro, navegación fluida, componentes reutilizables y animaciones suaves que mejoran la experiencia del usuario.

🎨 Diseño Moderno

Interfaz elegante con gradientes, efectos de cristal y sombras suaves que crean una experiencia visual atractiva.

📱 Totalmente Responsive

Se adapta perfectamente a cualquier dispositivo, desde móviles hasta pantallas de escritorio grandes.

⚡ Rápido y Optimizado

Código limpio y optimizado que garantiza tiempos de carga rápidos y una navegación fluida.

Componentes Disponibles

Esta plantilla incluye una amplia variedad de componentes pre-diseñados que puedes usar en tu documentación:

Headers y Navegación: Cabeceras sticky/estáticas con menú móvil hamburguesa
Sidebar Inteligente: Navegación lateral con scroll activo y menú móvil deslizante
Alertas Contextuales: Bloques de información, advertencia, éxito y error
Bloques de Código: Syntax highlighting con etiquetas de lenguaje
Listas Avanzadas: Listas numeradas, con iconos y características
Tablas Responsive: Tablas con scroll horizontal y hover effects
Sistema de Pestañas: Pestañas interactivas para organizar contenido
Tarjetas y Grids: Sistema de tarjetas con diseño en cuadrícula
Botones Interactivos: Múltiples estilos con efectos hover
Galerías de Imágenes: Contenedores con efectos zoom y captions

Sistema Tipográfico

La plantilla utiliza un sistema tipográfico consistente que garantiza legibilidad y jerarquía visual clara.

Títulos Disponibles

Título Principal (H1) - 2.2rem

Título de Sección (H2) - 1.6rem

Subtítulo (H3) - 1.2rem

Párrafo normal - 1rem con line-height 1.7

Texto pequeño - 0.9rem

Colores de Texto

Texto principal - Blanco suave para máxima legibilidad

Texto secundario - Gris claro para información complementaria

Texto de acento - Azul púrpura para enlaces y elementos destacados

Texto de énfasis - Cian para títulos de sección

Alertas y Bloques Informativos

Utiliza estos bloques para destacar información importante en tu documentación:

Tipos de Alertas

Información General

Utiliza este tipo de alerta para proporcionar información adicional, consejos útiles o contexto importante que complementa el contenido principal.

Éxito o Confirmación

Perfecto para mostrar confirmaciones, pasos completados exitosamente o resultados positivos de una acción.

Advertencia Importante

Usa este bloque para advertencias, información que requiere atención especial o pasos que podrían tener consecuencias si se realizan incorrectamente.

Error o Peligro

Reservado para errores críticos, información de seguridad importante o acciones que podrían causar problemas graves.

Código HTML para Alertas

<div class="alert alert-info">
    <div class="alert-title">Título de la Alerta</div>
    <p>Contenido de la alerta aquí...</p>
</div>

<!-- Tipos disponibles: alert-info, alert-success, alert-warning, alert-danger -->
                

Bloques de Código

Presenta código de manera clara y profesional con estos componentes:

Código en Línea

Para elementos pequeños de código dentro del texto, utiliza codigo-inline que se integra naturalmente en el párrafo.

Bloques de Código

Para fragmentos más largos, utiliza bloques de código con etiquetas de lenguaje:

// Ejemplo de función en JavaScript
function crearDocumentacion(titulo, contenido) {
    return {
        titulo: titulo,
        contenido: contenido,
        fechaCreacion: new Date(),
        mostrar: function() {
            console.log(`${this.titulo}: ${this.contenido}`);
        }
    };
}

const miDoc = crearDocumentacion("Guía", "Contenido de ejemplo");
miDoc.mostrar();
                

/* Ejemplo de estilos CSS */
.mi-componente {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.mi-componente:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
                

<!-- Ejemplo de estructura HTML -->
<div class="code-block" data-lang="TuLenguaje">
    Tu código aquí...
</div>

<!-- Para código inline -->
<code class="code-inline">elemento-codigo</code>
                

Tipos de Listas

Organiza información de manera clara con diferentes tipos de listas:

Lista de Pasos Numerados

Perfecto para tutoriales paso a paso o procesos secuenciales:

Primer Paso: Describe claramente lo que el usuario debe hacer en este paso. Incluye detalles específicos y cualquier información relevante para completar la tarea.
Segundo Paso: Continúa con el siguiente paso lógico del proceso. Mantén las instrucciones claras y concisas para evitar confusión.
Tercer Paso: Finaliza el proceso con el paso final. Asegúrate de mencionar el resultado esperado o cómo verificar que se completó correctamente.

Lista de Características

Ideal para enumerar características, beneficios o elementos importantes:

Característica Principal: Descripción detallada de esta característica y por qué es importante
Funcionalidad Avanzada: Explica cómo esta función mejora la experiencia del usuario
Beneficio Clave: Destaca el valor que aporta esta característica al producto final
Integración Perfecta: Describe cómo se integra con otros componentes del sistema

Tablas de Datos

Presenta información tabular de manera clara y responsive:

Componente	Clase CSS	Uso Recomendado	Compatible
Alerta de Información	`alert alert-info`	Información general y consejos	✅ Todos los dispositivos
Bloque de Código	`code-block`	Fragmentos de código largos	✅ Scroll horizontal
Lista de Pasos	`steps-list`	Tutoriales paso a paso	✅ Mobile friendly
Tarjeta	`card`	Contenido agrupado	✅ Grid responsive

Código para Tablas

<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th>Columna 1</th>
                <th>Columna 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Dato 1</td>
                <td>Dato 2</td>
            </tr>
        </tbody>
    </table>
</div>
                

Contenedores de Imágenes

Muestra imágenes de manera atractiva con efectos y captions:

Imagen de Demostración

Este es un ejemplo de cómo se verían las imágenes con caption. El contenedor incluye efectos hover y bordes redondeados.

Código para Imágenes

<div class="image-container">
    <img src="ruta-imagen.jpg" alt="Descripción" class="demo-image">
    <div class="image-caption">
        Descripción o caption de la imagen
    </div>
</div>
                

Sistema de Botones

Botones interactivos con diferentes estilos y efectos:

Estilos Disponibles

Botón Principal Botón Outline

<!-- Botones como enlaces -->
<a href="#" class="btn btn-primary">Botón Principal</a>
<a href="#" class="btn btn-outline">Botón Outline</a>

<!-- Botones como elementos button -->
<button class="btn btn-primary">Botón Principal</button>
<button class="btn btn-outline">Botón Outline</button>
                

Sistema de Tarjetas

Organiza contenido en tarjetas atractivas con sistema de grid responsive:

Grid de Tarjetas

🚀 Rendimiento

Optimizado para carga rápida y navegación fluida. Incluye lazy loading y compresión de assets.

🎨 Diseño

Interfaz moderna con efectos glassmorphism, gradientes suaves y animaciones de micro-interacción.

📱 Responsive

Se adapta perfectamente a cualquier tamaño de pantalla desde móviles hasta monitores 4K.

<div class="card-grid">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Título de la Tarjeta</h3>
        </div>
        <p>Contenido de la tarjeta...</p>
    </div>
</div>
                

Sistema de Pestañas

Organiza contenido relacionado en pestañas interactivas:

<!-- Estructura HTML para pestañas -->
<div class="tabs">
    <div class="tab-buttons">
        <button class="tab-button active" onclick="showTab('tab1')">Pestaña 1</button>
        <button class="tab-button" onclick="showTab('tab2')">Pestaña 2</button>
    </div>
    
    <div id="tab1" class="tab-content active">
        Contenido de la primera pestaña
    </div>
    
    <div id="tab2" class="tab-content">
        Contenido de la segunda pestaña
    </div>
</div>
                        

/* Estilos para el sistema de pestañas */
.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.tab-button {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}
                        

// Función para cambiar entre pestañas
function showTab(tabId) {
    // Ocultar todas las pestañas
    const allTabs = document.querySelectorAll('.tab-content');
    allTabs.forEach(tab => tab.classList.remove('active'));
    
    // Desactivar todos los botones
    const allButtons = document.querySelectorAll('.tab-button');
    allButtons.forEach(btn => btn.classList.remove('active'));
    
    // Mostrar la pestaña seleccionada
    document.getElementById(tabId).classList.add('active');
    
    // Activar el botón correspondiente
    event.target.classList.add('active');
}
                        

Personalización y Variables CSS

Personaliza fácilmente la apariencia modificando las variables CSS en el root:

:root {
    /* Colores principales */
    --primary-color: #6366f1;      /* Azul púrpura principal */
    --secondary-color: #4f46e5;    /* Azul púrpura más oscuro */
    --accent-color: #06b6d4;       /* Cian para acentos */
    --success-color: #10b981;      /* Verde para éxito */
    --warning-color: #f59e0b;      /* Amarillo para advertencias */
    --danger-color: #ef4444;       /* Rojo para errores */
    
    /* Colores de fondo */
    --background: #0f172a;         /* Fondo principal oscuro */
    --card-bg: #1e293b;           /* Fondo de tarjetas */
    --code-bg: #1a1b26;          /* Fondo de código */
    
    /* Colores de texto */
    --text-primary: #f8fafc;      /* Texto principal blanco */
    --text-secondary: #94a3b8;    /* Texto secundario gris */
    
    /* Utilidades */
    --border-color: rgba(255, 255, 255, 0.1);
}
                

Temas Personalizados

Puedes crear diferentes temas cambiando estas variables. Por ejemplo, para un tema más claro:

/* Tema alternativo más claro */
:root {
    --primary-color: #8b5cf6;
    --accent-color: #10b981;
    --background: #1e293b;
    --card-bg: #334155;
    --text-primary: #ffffff;
}
                

CSS Variables Personalización Temas Colores Responsive Design