Frontend / UI de docs

• Selector de tema que no te falla: botón, desplegable y preferencia recordada
• Mega menú con CSS Grid: hover, focus, móvil y conceptos básicos de accesibilidad
• Espaciado fluido con CSS clamp(): relleno y márgenes que escalan naturalmente
• Soporte de movimiento reducido: prefers-reduced-motion bien implementado
• Casillas y botones de radio personalizados con CSS puro: patrones accesibles que no engañan
• Rejillas de tarjetas que ajustan columnas con auto-fit/minmax (sin media queries)
• Construye una tabla de precios SaaS que convierta sin romper tu frontend
• Elementos sticky sin dolor: barras laterales, cabeceras y por qué fallan
• CSS Grid vs Flexbox: reglas de decisión y recetas de diseño que resisten en producción
• Tooltips sin bibliotecas: posicionamiento, flecha y patrones compatibles con ARIA
• Estados de foco accesibles que no parecen basura
• CSS moderno :has() en UI real: selector padre para formularios, tarjetas y filtros
• Migas de pan + Navegación Anterior/Siguiente para Sitios de Documentación (Limpio, Rápido, Accesible)
• Maquetación Holy Grail moderna con CSS: encabezado, pie de página y barra lateral sin hacks
• Tokens de diseño para un tema de documentación: variables CSS, modo oscuro estilo X, movimiento reducido
• Paginación vs desplazamiento infinito: patrones de UI que no molestan a los usuarios
• Embebidos responsivos que no rompen el layout: YouTube, iframes y mapas en producción
• Modales solo con CSS que no te traicionan: :target, fondos y patrones de cierre
• Modo oscuro que no apesta: prefers-color-scheme + patrón de alternancia manual
• Un reset moderno de CSS para 2026: minimalista y seguro para formularios y multimedia
• Callouts de documentación que no te traicionan: variables CSS, modo oscuro y disciplina operativa
• Fichas de etiquetas y barras de filtros: manejo de desbordamiento, ajuste, desplazamiento, estados seleccionados
• Micro componentes de UI para posts técnicos: kbd, insignias, etiquetas, código en línea y botones de copiar
• Barra de progreso de lectura para artículos: CSS primero y JS mínimo que no afectará tu UX
• Mejor tipografía para documentación que los ingenieros sí leen
• Construir un TOC lateral derecho para documentación: sticky, scroll-margin y resaltado de sección activa
• Modal de búsqueda Cmd+K: listas de resultados, pistas de teclado y estados vacíos (enfoque HTML/CSS)
• Animaciones CSS que no destrozan el rendimiento: reglas y trampas de transform/opacity
• Formularios modernos de inicio de sesión y registro que no te fallan en producción
• Botones de copiar al portapapeles que no mienten: estados, tooltips y retroalimentación
• Estilos de formularios que sobreviven en producción: inputs, selects, checkboxes, radios, switches
• Bloques de llamada con iconos: SVG en línea + variables CSS (sin fuentes de iconos)
• CSS para contenido Markdown: valores predeterminados sensatos que no rompen producción
• Página de aterrizaje HTML/CSS puro: Hero, Funciones, Precios, FAQ (estilo documentación)
• Notificaciones Toast en la UI con CSS: Apilamiento, Animaciones y Variantes de Ubicación
• Tipografía responsiva que luce bien: clamp() bien hecho
• Tablas amigables para código: diseño fijo vs automático, ajuste y alineación numérica
• Pantallas esqueleto con CSS puro: shimmer, movimiento reducido y rendimiento
• Galerías con scroll-snap: contenido horizontal suave sin JS
• Diseño de documentación sin frameworks: barra lateral fija, contenido y TOC derecho con CSS Grid
• Gestión de imágenes para sitios rápidos: relación de aspecto, estilos de carga diferida y marcadores difuminados
• Tablas responsivas para documentación técnica que no fallan en producción
• Estilos de impresión para documentación que no te avergüencen
• Bloques de código estilo GitHub: barras de título, botones de copiar, números de línea y líneas resaltadas
• Guía práctica de Container Queries: Diseño responsivo centrado en componentes
• Cajón de navegación móvil para documentación que no falla: superposición, bloqueo de desplazamiento y foco
• Enlaces ancla que parecen sitios de documentación: iconos al pasar, offsets y encabezados clicables