# Manual de uso — Skeleton 2.0.4 (para ARNES template)

> Fuente revisada: `https://github.com/getskeleton/Skeleton` (v2.0.4, 2014).

## 1) Qué es y cuándo usarlo
Skeleton es un boilerplate CSS ligero (no framework UI completo). Ideal para:
- paneles internos
- CRUDs
- prototipos rápidos
- apps server-rendered (Flask + Jinja)

No ideal para:
- diseño de componentes complejos
- design systems avanzados
- apps con alta complejidad visual

## 2) Archivos base
En este template se incluyen en:
- `defaults/flask-skeleton/static/css/normalize.css`
- `defaults/flask-skeleton/static/css/skeleton.css`
- `defaults/flask-skeleton/static/images/favicon.png`

Uso recomendado en HTML:
```html
<link rel="stylesheet" href="/static/css/normalize.css">
<link rel="stylesheet" href="/static/css/skeleton.css">
```

## 3) Grid (12 columnas)
Estructura:
```html
<div class="container">
  <div class="row">
    <div class="six columns">...</div>
    <div class="six columns">...</div>
  </div>
</div>
```

Clases comunes:
- `one` ... `twelve columns`
- `one-half column`
- `one-third column`
- `two-thirds column`

Offsets:
- `offset-by-one ... offset-by-eleven`

Breakpoints relevantes:
- `min-width: 400px`
- `min-width: 550px` (aquí se activa grid multi-columna)
- `750px`, `1000px`, `1200px`

## 4) Utilidades clave
- `u-full-width` → ancho 100%
- `u-max-full-width` → max-width 100%
- `u-pull-right`, `u-pull-left`
- `u-cf` (clear float)

## 5) Formularios y botones
Inputs/select/textarea ya traen estilo base.
Patrones recomendados:
- siempre usar `u-full-width` en formularios de app
- usar `.button` y `.button.button-primary`
- mantener labels visibles (`label` + `for`)

## 6) Tablas
Skeleton trae estilo mínimo. Para tablas largas:
- envolver en `.table-responsive` propia del proyecto
- controlar overflow horizontal en móviles

## 7) Limitaciones conocidas (por antigüedad)
- Sistema basado en **floats** (no flex/grid nativo)
- Tipografía por defecto antigua (Raleway de Google Fonts vía URL legacy)
- No incluye componentes modernos (modal, tabs, toast, etc.)
- No incluye tokens de diseño ni theming avanzado

## 8) Mejoras recomendadas en proyectos nuevos
Mantener Skeleton como base, pero añadir capa moderna propia:

1. **Layout helper CSS local**
   - utilidades flex (`.d-flex`, `.justify-between`, etc.)
   - spacing consistente (`.mb-1`, `.mb-2`, ...)

2. **Responsive wrappers**
   - `.table-responsive`
   - patrones mobile-first para filtros/toolbar

3. **Componentes mínimos reutilizables**
   - modal base
   - badges
   - pagination bar
   - alertas/confirmaciones

4. **Accesibilidad**
   - foco visible
   - contraste de colores
   - labels/aria en acciones icon-only

5. **No tocar upstream directamente**
   - dejar `skeleton.css` y `normalize.css` sin modificar
   - personalización en `custom.css` del proyecto

## 9) Regla de mantenimiento para ARNES
- Skeleton se trata como dependencia estática base.
- Cualquier override va en CSS del proyecto.
- Si un proyecto requiere UI compleja, considerar migración progresiva a capa de componentes propia.