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
422
_planificacion/01-design-system/10-RESPONSIVE-DESIGN.md
Normal file
422
_planificacion/01-design-system/10-RESPONSIVE-DESIGN.md
Normal file
@@ -0,0 +1,422 @@
|
||||
# 📱 RESPONSIVE DESIGN
|
||||
|
||||
## Breakpoints de Bootstrap
|
||||
|
||||
| Breakpoint | Min Width | Dispositivo | Uso en Admin Panel |
|
||||
|------------|-----------|-------------|-------------------|
|
||||
| **xs** | 0px | Móvil pequeño | Stack vertical, padding reducido |
|
||||
| **sm** | 576px | Móvil grande | Stack vertical |
|
||||
| **md** | 768px | Tablet | Stack vertical |
|
||||
| **lg** | 992px | Desktop | Grid 2 columnas activo |
|
||||
| **xl** | 1200px | Desktop grande | Grid 2 columnas |
|
||||
| **xxl** | 1400px | Desktop XL | Grid 2 columnas |
|
||||
|
||||
---
|
||||
|
||||
## Media Queries
|
||||
|
||||
### Mobile (<576px)
|
||||
|
||||
```css
|
||||
@media (max-width: 575px) {
|
||||
/* Header del Tab: reducir tamaño de título */
|
||||
.tab-header h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Cards: reducir padding */
|
||||
.form-section.card .card-body {
|
||||
padding: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* Container: reducir padding lateral */
|
||||
.container-fluid {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Botones: full width */
|
||||
.tab-header button {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Tablet (576px - 991px)
|
||||
|
||||
```css
|
||||
@media (max-width: 991px) {
|
||||
/* Header del Tab: reducir padding */
|
||||
.tab-header {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Título: tamaño medio */
|
||||
.tab-header h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Grid: todavía en stack vertical */
|
||||
}
|
||||
```
|
||||
|
||||
### Desktop (≥992px)
|
||||
|
||||
```css
|
||||
@media (min-width: 992px) {
|
||||
/* Grid de 2 columnas activo */
|
||||
.col-lg-6 {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Espaciado normal */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Patrones Responsive
|
||||
|
||||
### Header del Tab
|
||||
|
||||
#### HTML Responsive
|
||||
|
||||
```html
|
||||
<div class="rounded p-4 mb-4 shadow text-white"
|
||||
style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%);">
|
||||
<!-- flex-wrap permite que el botón baje en mobile -->
|
||||
<!-- gap-3 mantiene espaciado consistente -->
|
||||
<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>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### CSS Responsive
|
||||
|
||||
```css
|
||||
@media (max-width: 576px) {
|
||||
/* El botón baja automáticamente con flex-wrap */
|
||||
/* gap-3 mantiene el espaciado */
|
||||
|
||||
/* Opcional: hacer botón full-width */
|
||||
.tab-header button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Reducir padding del header */
|
||||
.tab-header {
|
||||
padding: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Grid de 2 Columnas
|
||||
|
||||
#### HTML Responsive
|
||||
|
||||
```html
|
||||
<div class="row g-3">
|
||||
<!-- col-lg-6: 2 columnas en desktop (≥992px) -->
|
||||
<!-- Stack vertical automático en mobile/tablet (<992px) -->
|
||||
<div class="col-lg-6">
|
||||
<!-- Cards de configuración -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<!-- Cards de configuración -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Comportamiento:**
|
||||
- **Desktop (≥992px)**: 2 columnas lado a lado
|
||||
- **Mobile/Tablet (<992px)**: Stack vertical automático
|
||||
- **Gap**: 1rem (16px) entre elementos
|
||||
|
||||
---
|
||||
|
||||
### Botones de Vista Previa
|
||||
|
||||
#### HTML Responsive
|
||||
|
||||
```html
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary active">
|
||||
<i class="bi bi-display"></i> Desktop
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-phone"></i> Mobile
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### CSS Responsive
|
||||
|
||||
```css
|
||||
@media (max-width: 576px) {
|
||||
/* Reducir tamaño de botones en mobile */
|
||||
.btn-group.btn-group-sm .btn {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
/* Opcional: full width */
|
||||
.btn-group.btn-group-sm {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Cards
|
||||
|
||||
#### HTML Responsive (Automático)
|
||||
|
||||
```html
|
||||
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
||||
<div class="card-body">
|
||||
<!-- Contenido -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### CSS Responsive
|
||||
|
||||
```css
|
||||
@media (max-width: 575px) {
|
||||
/* Reducir padding en cards */
|
||||
.card-body {
|
||||
padding: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* Reducir margen entre cards */
|
||||
.card {
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Contenedor Principal
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<div class="container-fluid py-4" style="max-width: 1400px;">
|
||||
<!-- Contenido -->
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS Responsive
|
||||
|
||||
```css
|
||||
/* Desktop: ancho máximo 1400px */
|
||||
@media (min-width: 1400px) {
|
||||
.container-fluid {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet: ancho completo con padding */
|
||||
@media (max-width: 991px) {
|
||||
.container-fluid {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: padding reducido */
|
||||
@media (max-width: 575px) {
|
||||
.container-fluid {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Vista Previa Responsive
|
||||
|
||||
### Simular Mobile en Preview
|
||||
|
||||
```javascript
|
||||
const btnMobile = document.getElementById('previewMobile');
|
||||
const preview = document.getElementById('componentPreview');
|
||||
|
||||
btnMobile.addEventListener('click', function() {
|
||||
// Simular ancho mobile (375px - iPhone SE)
|
||||
preview.style.maxWidth = '375px';
|
||||
preview.style.margin = '0 auto';
|
||||
|
||||
// Opcional: agregar border para visualizar límites
|
||||
preview.style.border = '1px solid #e9ecef';
|
||||
});
|
||||
```
|
||||
|
||||
### Simular Desktop en Preview
|
||||
|
||||
```javascript
|
||||
const btnDesktop = document.getElementById('previewDesktop');
|
||||
const preview = document.getElementById('componentPreview');
|
||||
|
||||
btnDesktop.addEventListener('click', function() {
|
||||
// Restaurar ancho completo
|
||||
preview.style.maxWidth = '100%';
|
||||
preview.style.margin = '0';
|
||||
|
||||
// Remover border
|
||||
preview.style.border = 'none';
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Anchos de Referencia para Dispositivos
|
||||
|
||||
| Dispositivo | Ancho (px) | Uso en Preview |
|
||||
|-------------|------------|----------------|
|
||||
| iPhone SE | 375 | Mobile pequeño |
|
||||
| iPhone 12/13 | 390 | Mobile estándar |
|
||||
| iPhone 14 Pro Max | 430 | Mobile grande |
|
||||
| iPad Mini | 768 | Tablet |
|
||||
| iPad Pro | 1024 | Tablet grande |
|
||||
| Desktop | 1200+ | Desktop estándar |
|
||||
|
||||
---
|
||||
|
||||
## Tipografía Responsive
|
||||
|
||||
### Headers
|
||||
|
||||
```css
|
||||
/* Desktop: tamaño completo */
|
||||
@media (min-width: 992px) {
|
||||
.tab-header h3 {
|
||||
font-size: 1.5rem; /* 24px */
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1rem; /* 16px */
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet: tamaño reducido */
|
||||
@media (max-width: 991px) {
|
||||
.tab-header h3 {
|
||||
font-size: 1.1rem; /* 17.6px */
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: tamaño mínimo */
|
||||
@media (max-width: 575px) {
|
||||
.tab-header h3 {
|
||||
font-size: 1rem; /* 16px */
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 0.9rem; /* 14.4px */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Espaciado Responsive
|
||||
|
||||
### Padding
|
||||
|
||||
```css
|
||||
/* Desktop: padding completo */
|
||||
@media (min-width: 992px) {
|
||||
.tab-header {
|
||||
padding: 1.5rem; /* 24px */
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem; /* 16px */
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: padding reducido */
|
||||
@media (max-width: 575px) {
|
||||
.tab-header {
|
||||
padding: 0.75rem !important; /* 12px */
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0.75rem !important; /* 12px */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Utilidades de Bootstrap para Responsive
|
||||
|
||||
### Display
|
||||
|
||||
```html
|
||||
<!-- Ocultar en mobile, mostrar en desktop -->
|
||||
<div class="d-none d-lg-block">Solo en desktop</div>
|
||||
|
||||
<!-- Mostrar en mobile, ocultar en desktop -->
|
||||
<div class="d-lg-none">Solo en mobile</div>
|
||||
|
||||
<!-- Mostrar en todos los tamaños -->
|
||||
<div class="d-block">Siempre visible</div>
|
||||
```
|
||||
|
||||
### Flex Direction
|
||||
|
||||
```html
|
||||
<!-- Columna en mobile, fila en desktop -->
|
||||
<div class="d-flex flex-column flex-lg-row">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text Alignment
|
||||
|
||||
```html
|
||||
<!-- Centrado en mobile, izquierda en desktop -->
|
||||
<p class="text-center text-lg-start">Texto</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Testing Responsive
|
||||
|
||||
### Checklist
|
||||
|
||||
- [ ] Probar en mobile (<576px)
|
||||
- [ ] Probar en tablet (768px)
|
||||
- [ ] Probar en desktop (≥992px)
|
||||
- [ ] Header del tab se adapta correctamente
|
||||
- [ ] Grid de 2 columnas se convierte en stack vertical
|
||||
- [ ] Cards mantienen legibilidad
|
||||
- [ ] Botones no se cortan
|
||||
- [ ] Vista previa funciona en todos los tamaños
|
||||
|
||||
### Herramientas
|
||||
|
||||
1. **Chrome DevTools**: F12 → Toggle Device Toolbar (Ctrl+Shift+M)
|
||||
2. **Firefox Responsive Design Mode**: F12 → Toggle Responsive Design Mode
|
||||
3. **Dispositivos reales**: Probar en iPhone, iPad, Android
|
||||
|
||||
---
|
||||
|
||||
## Volver al Índice
|
||||
|
||||
[← Volver al README](README.md)
|
||||
Reference in New Issue
Block a user