EMPEZAR
Instalación
Tres formas de usar deaf.css en tu proyecto:
/* npm */
npm install deaf-css
/* En tu CSS */
@import 'deaf-css';
/* CDN (sin instalar nada) */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/deaf-css/dist/deaf.css">
ACCESIBILIDAD
Alertas Visuales
El componente más importante del framework. Las alertas siempre combinan icono + color + borde, nunca dependen solo del color para comunicar el estado.
✅
Mensaje enviado
Tu formulario fue enviado correctamente.
⚠️
Atención
Verifica los datos antes de continuar.
❌
Error crítico
No se pudo conectar al servidor.
ℹ️
Información
El sistema estará en mantención el viernes.
<div class="deaf-alert deaf-alert--success">
<span class="deaf-alert__icon">✅</span>
<div class="deaf-alert__body">
<span class="deaf-alert__title">Mensaje enviado</span>
Tu formulario fue enviado correctamente.
</div>
</div>
Modificadores de animación
Agrega animaciones visuales para captar atención sin sonido:
🔴
.deaf-alert--flash Parpadea 3 veces para alertas urgentes
⚠️
.deaf-alert--shake Temblor para errores críticos
<!-- Parpadeo urgente -->
<div class="deaf-alert deaf-alert--error deaf-alert--flash">...</div>
<!-- Temblor en error -->
<div class="deaf-alert deaf-alert--error deaf-alert--shake">...</div>
<!-- Pulso continuo -->
<div class="deaf-alert deaf-alert--error deaf-alert--pulse">...</div>
COMPONENTES
Botones
Todos con foco visible fuerte y feedback visual al hacer clic.
<button class="deaf-btn deaf-btn--primary">Primario</button>
<button class="deaf-btn deaf-btn--secondary">Secundario</button>
<button class="deaf-btn deaf-btn--ghost">Ghost</button>
<button class="deaf-btn deaf-btn--danger">Peligro</button>
<!-- Tamaños -->
<button class="deaf-btn deaf-btn--primary deaf-btn--sm">Pequeño</button>
<button class="deaf-btn deaf-btn--primary deaf-btn--lg">Grande</button>
COMPONENTES
Badges y Estado
Los badges siempre usan icono + color para que el estado sea claro sin depender únicamente del color.
✅ Activo
⚠️ Pendiente
❌ Error
ℹ️ Info
— Sin estado
<span class="deaf-badge deaf-badge--success">✅ Activo</span>
<span class="deaf-badge deaf-badge--warning">⚠️ Pendiente</span>
<span class="deaf-badge deaf-badge--error">❌ Error</span>
En línea
Ocupado
Ausente
Sin conexión
<span class="deaf-dot deaf-dot--online">En línea</span>
<span class="deaf-dot deaf-dot--busy">Ocupado</span>
<span class="deaf-dot deaf-dot--away">Ausente</span>
<span class="deaf-dot deaf-dot--offline">Sin conexión</span>
ACCESIBILIDAD
Embeds de Lengua de Señas
Componentes para integrar videos en lengua de señas dentro del contenido.
↑ Botón para abrir video de señas inline
<!-- Botón inline para abrir video -->
<a href="#" class="deaf-sign-inline">
<span class="deaf-sign-inline__icon">🤟</span>
Ver en LSCh
</a>
<!-- Widget flotante -->
<div class="deaf-sign-widget">
<video class="deaf-sign-widget__video" autoplay muted loop>
<source src="seña.mp4" type="video/mp4">
</video>
<div class="deaf-sign-widget__label">🤟 LSCh</div>
</div>
COMPONENTES
Formularios
Inputs accesibles con labels siempre visibles, mensajes de error con icono, y validación visual clara.
👤
✅ Email válido
❌ Mínimo 8 caracteres
<div class="deaf-field">
<label class="deaf-label deaf-label--required">Nombre</label>
<input class="deaf-input" type="text" placeholder="Tu nombre">
</div>
<!-- Con error -->
<div class="deaf-field">
<input class="deaf-input deaf-input--error" type="password">
<span class="deaf-field-error">❌ Mínimo 8 caracteres</span>
</div>
<!-- Toggle -->
<label class="deaf-toggle">
<input type="checkbox">
<span class="deaf-toggle__track"></span>
Notificaciones visuales
</label>
COMPONENTES
Modal
Diálogos con animación visual al abrir. La variante --urgent parpadea para alertas críticas.
<div class="deaf-modal-overlay">
<div class="deaf-modal">
<div class="deaf-modal__header">
<span class="deaf-modal__title">ℹ️ Título</span>
<button class="deaf-modal__close">✕</button>
</div>
<div class="deaf-modal__body">Contenido...</div>
<div class="deaf-modal__footer">
<button class="deaf-btn deaf-btn--ghost">Cancelar</button>
<button class="deaf-btn deaf-btn--primary">Confirmar</button>
</div>
</div>
</div>
<!-- Urgente (parpadea) -->
<div class="deaf-modal deaf-modal--urgent">...</div>
ÚNICO SORDO 🤟
Flashbar
Barra de alerta fija en la parte superior de la pantalla con animación de parpadeo. Reemplaza alertas sonoras del sistema operativo.
<!-- Flashbar de error (parpadea 3 veces) -->
<div class="deaf-flashbar deaf-flashbar--error">
<div class="deaf-flashbar__content">
<span class="deaf-flashbar__icon">🚨</span>
<div class="deaf-flashbar__text">
<span class="deaf-flashbar__title">Conexión perdida</span>
<span class="deaf-flashbar__sub">Verifica tu red de internet</span>
</div>
</div>
<button class="deaf-flashbar__close">✕</button>
</div>
<!-- Flash de pantalla completa (emergencia) -->
<div class="deaf-screen-flash deaf-screen-flash--red"></div>
ÚNICO SORDO 🤟
Alto Contraste
Agrega la clase .deaf-high-contrast a cualquier contenedor para activar el modo de máximo contraste.
❌
Error en alto contraste Texto con máxima legibilidad
<!-- Aplicar a un div, sección, o al body completo -->
<div class="deaf-high-contrast">
... todo el contenido aquí tendrá máximo contraste
</div>
<!-- O activar globalmente -->
<body class="deaf-high-contrast">
<!-- Botón de toggle -->
<button class="deaf-contrast-toggle" onclick="toggleContrast()">
🔲 Alto contraste
</button>
LAYOUT
Grid / Columnas
Sistema de grillas responsivo con CSS Grid. Combina .deaf-grid con modificadores de columnas para layouts fluidos.
2 columnas
Col 1
Col 2
3 columnas
Col 1
Col 2
Col 3
4 columnas
Col 1
Col 2
Col 3
Col 4
Auto-fit (responsivo)
Auto
Auto
Auto
Auto
Auto
<!-- 2 columnas -->
<div class="deaf-grid deaf-grid--2">
<div>Col 1</div>
<div>Col 2</div>
</div>
<!-- 3 columnas -->
<div class="deaf-grid deaf-grid--3">...</div>
<!-- 4 columnas -->
<div class="deaf-grid deaf-grid--4">...</div>
<!-- Auto-fit responsivo (min 140px por columna) -->
<div class="deaf-grid deaf-grid--auto">...</div>
COMPONENTES
Cards
Tarjetas con hover animado, imagen, cuerpo y footer. Se adaptan automáticamente al número de columnas disponibles.
🤟
Lengua de Señas
Integra videos LSCh directamente en tu interfaz con un solo componente.
✅
Alertas Visuales
Nunca dependas solo del sonido para comunicar estados importantes.
🚨
Flashbar Urgente
Reemplaza alertas sonoras con animaciones de parpadeo y vibración visual.
<div class="deaf-card">
<div class="deaf-card__img deaf-card__img--blue">🤟</div>
<div class="deaf-card__body">
<div class="deaf-card__title">Título</div>
<p class="deaf-card__text">Descripción...</p>
</div>
<div class="deaf-card__footer">
<span class="deaf-badge deaf-badge--info">ℹ️ Nuevo</span>
<a href="#" class="deaf-btn deaf-btn--ghost deaf-btn--sm">Ver más</a>
</div>
</div>