refactor: reorganizar openspec y planificacion con spec recaptcha
- 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>
This commit is contained in:
FrankZamora
340
_planificacion/01-design-system/05-SISTEMA-GRID-ESPACIADO.md
Normal file
340
_planificacion/01-design-system/05-SISTEMA-GRID-ESPACIADO.md
Normal file
@@ -0,0 +1,340 @@
|
||||
# 📏 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)
|
||||
Reference in New Issue
Block a user