roi-theme/_planificacion/01-design-system/05-SISTEMA-GRID-ESPACIADO.md

📏 SISTEMA DE GRID Y ESPACIADO

Grid de Bootstrap

Sistema de 12 Columnas

.container-fluid {
    max-width: 1400px;         /* Máximo ancho del admin panel */
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
}

.row {
    --bs-gutter-x: 1.5rem;     /* Espacio horizontal entre columnas */
    --bs-gutter-y: 0;          /* Espacio vertical */
}

Uso en Admin Panels

.row.g-3 {                     /* Gap de 1rem (16px) */
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.row.g-2 {                     /* Gap de 0.5rem (8px) */
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
}

---

Breakpoints

Breakpoint	Min Width	Max Width	Dispositivo	Comportamiento
xs	0px	575px	Móvil	Stack vertical
sm	576px	767px	Tablet pequeña	Stack vertical
md	768px	991px	Tablet	Stack vertical
lg	992px	1199px	Desktop	2 columnas
xl	1200px	1399px	Desktop grande	2 columnas
xxl	1400px	∞	Desktop XL	2 columnas

Punto de Quiebre Principal: lg (992px)

<!-- 2 columnas en desktop (≥992px), stack en mobile/tablet (<992px) -->
<div class="col-lg-6">Columna 1</div>
<div class="col-lg-6">Columna 2</div>

---

Clases de Grid Comunes

Layout de 2 Columnas (Admin Panel Estándar)

<div class="row g-3">
    <!-- Columna izquierda -->
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>

    <!-- Columna derecha -->
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>

    <!-- Fila completa (opcional) -->
    <div class="col-12">
        <!-- Vista previa o cards full-width -->
    </div>
</div>

Layout de 3 Columnas Desiguales

<div class="row g-2 mb-2">
    <div class="col-5">Campo 1</div>
    <div class="col-5">Campo 2</div>
    <div class="col-2">Campo 3</div>
</div>

Layout de 2 Columnas Iguales (Campos de Color)

<div class="row g-2 mb-2">
    <div class="col-6">
        <label>Color Fondo</label>
        <input type="color" class="form-control form-control-color w-100">
    </div>
    <div class="col-6">
        <label>Color Texto</label>
        <input type="color" class="form-control form-control-color w-100">
    </div>
</div>

Full Width

<div class="col-12">
    <!-- Contenido full-width -->
</div>

---

Sistema de Espaciado

Escala de Espaciado (rem)

Bootstrap utiliza una escala basada en rem:

/* Bootstrap Spacing Scale */
0 = 0
1 = 0.25rem  (4px)
2 = 0.5rem   (8px)
3 = 1rem     (16px)
4 = 1.5rem   (24px)
5 = 3rem     (48px)

Margin (m) y Padding (p)

Margin

<!-- Margin Bottom -->
.mb-2  /* margin-bottom: 0.5rem (campos de formulario) */
.mb-3  /* margin-bottom: 1rem (cards, secciones) */
.mb-4  /* margin-bottom: 1.5rem (headers) */

<!-- Margin Right -->
.me-2  /* margin-right: 0.5rem (iconos) */
.me-1  /* margin-right: 0.25rem (iconos pequeños) */

<!-- Margin Left -->
.ms-2  /* margin-left: 0.5rem */

<!-- Margin Top -->
.mt-1  /* margin-top: 0.25rem (hints) */
.mt-3  /* margin-top: 1rem (separadores) */

<!-- Margin 0 (reset) -->
.m-0   /* margin: 0 */
.mb-0  /* margin-bottom: 0 */

Padding

<!-- Padding uniforme -->
.p-4   /* padding: 1.5rem (header del tab) */
.p-3   /* padding: 1rem (card-body estándar) */

<!-- Padding vertical -->
.py-4  /* padding-top y bottom: 1.5rem (container principal) */
.py-3  /* padding-top y bottom: 1rem */

<!-- Padding horizontal -->
.px-3  /* padding-left y right: 1rem */

---

Uso Estándar en Admin Components

Tabla de Referencia

Elemento	Clase	Valor Real	Uso
Container Principal	.py-4	1.5rem (24px)	Padding vertical del contenedor
Header del Tab	.mb-4	1.5rem (24px)	Separación después del header
Cards	.mb-3	1rem (16px)	Separación entre cards
Campos de Formulario	.mb-2	0.5rem (8px)	Separación entre campos
Card Body	.p-3	1rem (16px)	Padding interno de cards
Iconos en Título	.me-2	0.5rem (8px)	Espacio después de iconos grandes
Iconos en Label	.me-1	0.25rem (4px)	Espacio después de iconos pequeños
Títulos de Card	.mb-3	1rem (16px)	Separación después del título
Hints/Small Text	.mt-1	0.25rem (4px)	Espacio antes de hints

---

Gap Utilities

Flexbox/Grid Gap

<!-- Gap en flex containers -->
<div class="d-flex gap-2">     /* 0.5rem (8px) entre elementos */
<div class="d-flex gap-3">     /* 1rem (16px) entre elementos */

<!-- Gap en grid (row) -->
<div class="row g-2">          /* 0.5rem (8px) entre columnas */
<div class="row g-3">          /* 1rem (16px) entre columnas */

Ejemplo: Header Responsive con Gap

<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div>
        <h3 class="h4 mb-1 fw-bold">Título</h3>
        <p class="mb-0 small">Descripción</p>
    </div>
    <button class="btn btn-sm btn-outline-light">Botón</button>
</div>

Qué hace:

• gap-3: 1rem de espacio entre elementos hijos
• flex-wrap: Permite que el botón baje a la siguiente línea en mobile
• Mantiene espaciado consistente sin margins complejos

---

Auto Layout

Margin Auto

<!-- Centrar horizontalmente -->
.mx-auto  /* margin-left: auto; margin-right: auto; */

<!-- Empujar a la derecha -->
.ms-auto  /* margin-left: auto; */

Padding Auto (No existe en Bootstrap)

Bootstrap NO tiene padding auto. Usar flexbox para alineación:

<div class="d-flex justify-content-between">
    <div>Izquierda</div>
    <div>Derecha</div>
</div>

---

Ejemplos Completos

Container Principal del Admin

<div class="container-fluid py-4" style="max-width: 1400px;">
    <!-- py-4: 1.5rem (24px) padding vertical -->
    <!-- max-width: 1400px para no ser demasiado ancho -->
</div>

Header del Tab

<div class="rounded p-4 mb-4 shadow text-white"
     style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%);">
    <!-- p-4: 1.5rem (24px) padding uniforme -->
    <!-- mb-4: 1.5rem (24px) margin-bottom -->
</div>

Card Estándar

<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
    <div class="card-body p-3">
        <!-- mb-3: 1rem (16px) margin-bottom del card -->
        <!-- p-3: 1rem (16px) padding del body -->

        <h5 class="fw-bold mb-3">Título</h5>
        <!-- mb-3: 1rem (16px) separación después del título -->

        <div class="mb-2">
            <!-- mb-2: 0.5rem (8px) separación entre campos -->
        </div>
    </div>
</div>

Campo de Formulario con Label e Icono

<div class="mb-2">
    <label for="field" class="form-label small mb-1 fw-semibold">
        <i class="bi bi-palette me-1" style="color: #FF8600;"></i>
        <!-- me-1: 0.25rem (4px) después del icono -->
        Nombre del Campo
    </label>
    <input type="text" id="field" class="form-control form-control-sm">
    <small class="text-muted d-block mt-1">
        <!-- mt-1: 0.25rem (4px) antes del hint -->
        Texto de ayuda
    </small>
</div>

---

Responsive Spacing

Desktop (≥992px)

Usar espaciado estándar sin modificaciones.

Mobile (<576px)

@media (max-width: 575px) {
    /* Reducir padding en containers */
    .container-fluid {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* Reducir padding en headers */
    .tab-header {
        padding: 0.75rem !important;
    }

    /* Reducir padding en cards */
    .card-body {
        padding: 0.75rem !important;
    }
}

---

Volver al Índice

← Volver al README