arnes/docs/skeleton-manual.md

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:

<link rel="stylesheet" href="/static/css/normalize.css">
<link rel="stylesheet" href="/static/css/skeleton.css">

3) Grid (12 columnas)

Estructura:

<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.