@blashstar/kiosko-css

Sistema de diseño CSS para kioscos multimedia. Preprocesado con Stylus + PostCSS, adaptativo al viewport, con tipografía responsive y orientación automática.

Caracteristicas

• Metodologia BEM — selectores semanticos y mantenibles
• CSS Cascade Layers (@layer) — control de especificidad por capas
• Variables CSS — todo el tema personalizable sin recompilar
• Orientacion adaptativa — letterboxing (vBarras / hBarras) y scroll automatico via ResizeObserver
• Tipografia responsive — escala tipografica con clamp() relativa al viewport
• Paleta neutra — fondos oscuros con AccentColor del sistema operativo como color primario
• Reset moderno — basado en normalize + sanitize para interfaces tactiles
• Sin runtime — solo CSS estatico (JS opcional para orientacion)

Instalacion

npm install @blashstar/kiosko-css

Uso basico

CSS estatico

Importa el CSS compilado en tu proyecto:

// ESM / bundlers
import '@blashstar/kiosko-css/src/css/kiosko.css';

// O el minificado
import '@blashstar/kiosko-css/src/css/kiosko.min.css';

O directamente en HTML:

<link rel="stylesheet" href="/node_modules/@blashstar/kiosko-css/src/css/kiosko.min.css">

Estructura HTML

<div class="kiosko">
  <div class="kiosko__aplicacion">
    <div class="kiosko__escena">
      <div class="kiosko__escena__capa kiosko__escena__capa--fondo">
        <!-- fondo -->
      </div>
      <div class="kiosko__escena__capa kiosko__escena__capa--contenido">
        <h1>Titulo</h1>
        <p>Texto del kiosco</p>
        <button class="kiosko__boton">Accion</button>
      </div>
    </div>
  </div>
</div>

JS de orientacion (opcional)

Para habilitar letterboxing y scroll adaptativo automatico, importa el modulo:

import '@blashstar/kiosko-css/src/kiosko-orientacion.js';

Este script observa el contenedor .kiosko y aplica clases dinamicas:

| Clase | Condicion | |-------|-----------| | .kiosko__aplicacion--vBarras | Viewport mas estrecho que el aspect-ratio ideal | | .kiosko__aplicacion--hBarras | Viewport mas ancho que el aspect-ratio ideal | | .kiosko__aplicacion--scroll | Viewport menor al 50% del ancho o alto ideal |

Variables CSS personalizables

Todas las variables usan el namespace --kiosko-* y se pueden sobrescribir desde tu propio CSS:

Layout

| Variable | Default | Descripcion | |----------|---------|-------------| | --kiosko-escala | 1 | Factor de escala de la aplicacion | | --kiosko-ancho | 1080 | Ancho ideal de referencia (sin unidad) | | --kiosko-alto | 1920 | Alto ideal de referencia (sin unidad) |

Paleta de color

| Variable | Default | Descripcion | |----------|---------|-------------| | --kiosko-color-fondo | #0a0a0a | Fondo del contenedor principal | | --kiosko-color-superficie | #141414 | Fondo de botones y superficies | | --kiosko-color-borde | #262626 | Color de bordes | | --kiosko-color-primario | AccentColor | Color de acento (del sistema operativo) | | --kiosko-color-texto | #f5f5f5 | Texto principal | | --kiosko-color-texto-secundario | #737373 | Texto secundario |

Tipografia

| Variable | Default | Uso | |----------|---------|-----| | --kiosko-h1-tamano | clamp(1.5rem, 6vh, 8rem) | h1, titulos principales | | --kiosko-h2-tamano | clamp(1.25rem, 5.5vh, 7rem) | h2, .kiosko__titulo | | --kiosko-h3-tamano | clamp(1.125rem, 5vh, 6rem) | h3 | | --kiosko-h4-tamano | clamp(1rem, 4.5vh, 5rem) | h4 | | --kiosko-h5-tamano | clamp(0.875rem, 4vh, 4rem) | h5 | | --kiosko-h6-tamano | clamp(0.875rem, 3.5vh, 3rem) | h6 | | --kiosko-body-tamano | clamp(0.75rem, 3vh, 2.5rem) | p, .kiosko__texto, botones | | --kiosko-small-tamano | clamp(0.625rem, 2.5vh, 2rem) | small |

Otros

| Variable | Default | Descripcion | |----------|---------|-------------| | --kiosko-radio-borde | 1rem | Radio de bordes | | --kiosko-espaciado-base | 1rem | Espaciado base | | --kiosko-duracion-transicion | 150ms | Duracion de transiciones |

Ejemplo de override

:root {
  --kiosko-color-primario: #ff6600;
  --kiosko-ancho: 720;
  --kiosko-alto: 1280;
  --kiosko-h1-tamano: clamp(2rem, 8vh, 10rem);
}

Componentes BEM

.kiosko

Contenedor raiz. Ocupa todo el viewport (100vw x 100vh).

Modificadores

| Modificador | Efecto | |-------------|--------| | .kiosko--depurar | Dibuja outlines en todos los elementos anidados para depuracion |

.kiosko__aplicacion

Contenedor de la aplicacion. Mantiene aspect-ratio relativo a las variables ideales.

Modificadores (aplicados por JS)

| Modificador | Efecto | |-------------|--------| | .kiosko__aplicacion--vBarras | Altura dominante, ancho automatico (barras verticales) | | .kiosko__aplicacion--hBarras | Ancho dominante, alto automatico (barras horizontales) | | .kiosko__aplicacion--scroll | Anula aspect-ratio, habilita overflow-y: auto |

.kiosko__escena

Escena interna con sistema de capas (--fondo y --contenido).

.kiosko__boton

Boton estilizado. Soporta estados --presionado y --deshabilitado.

.kiosko__titulo / .kiosko__texto

Elementos de texto con user-select: none y tamanos responsive.

Scripts de desarrollo

npm run dev      # Servidor Vite con HMR
npm run build    # Compila Stylus -> CSS -> minificado
npm run watch    # Observa cambios en Stylus
npm run demo     # Build + servidor estatico
npm test         # Ejecuta la suite de tests (Vitest)

Testing

El proyecto incluye tests unitarios con Vitest + jsdom:

• Logica pura de kiosko-orientacion.js (ratios, limites, clasificacion)
• Aplicadores de DOM (clases CSS, variables inline)
• Build de CSS (compilacion sin errores)

npm test

Arquitectura CSS

@layer reset      -> normalizacion base
@layer base       -> variables, .kiosko, .kiosko__aplicacion, tipografia
@layer componentes -> botones, titulos, textos, escena
@layer utilidades  -> flex, items-center, etc.

Las capas garantizan que un utilitario nunca gane a un componente, y que el reset no sobreescriba estilos intencionales.

Licencia

MIT