0f6387ab46
- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
341 lines
7.8 KiB
Markdown
341 lines
7.8 KiB
Markdown
# 📏 SISTEMA DE GRID Y ESPACIADO
|
|
|
|
## Grid de Bootstrap
|
|
|
|
### Sistema de 12 Columnas
|
|
|
|
```css
|
|
.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
|
|
|
|
```css
|
|
.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)
|
|
|
|
```html
|
|
<!-- 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)
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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)
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<div class="col-12">
|
|
<!-- Contenido full-width -->
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## Sistema de Espaciado
|
|
|
|
### Escala de Espaciado (rem)
|
|
|
|
Bootstrap utiliza una escala basada en `rem`:
|
|
|
|
```css
|
|
/* 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
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<!-- 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:
|
|
|
|
```html
|
|
<div class="d-flex justify-content-between">
|
|
<div>Izquierda</div>
|
|
<div>Derecha</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## Ejemplos Completos
|
|
|
|
### Container Principal del Admin
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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)
|
|
|
|
```css
|
|
@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](README.md)
|