Componentes responsive para proyectos Impulsa

Que es el CDN

Impulsa Material es un framework CSS/JS consumible desde links CDN. Los proyectos consumidores cargan material.css, material.js y, si usan formularios validados, material-validaciones.js. La interfaz se construye con clases im-* y atributos data-* ya definidos; no copies estilos inline ni recrees componentes desde cero.

Instalacion basica

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://material.impulsagroup.com/css/material.css">

<script src="https://material.impulsagroup.com/js/material.js" defer></script>
<script src="https://material.impulsagroup.com/js/material-validaciones.js" defer></script>

Instrucciones para IA / Codex

• Usar siempre clases existentes del framework antes de crear CSS nuevo.
• Preferir componentes documentados: botones, tarjetas, tablas, dialogs, bottom sheets, tabs, steppers, form fields, chips, badges, snackbar, toolbar, sidenav, progress, spinner, grid list y expansion.
• Usar prefijo im- para cualquier extension nueva.
• No inventar clases sin revisar material.css.
• No usar estilos inline salvo casos excepcionales.
• No duplicar logica JS si ya existe mediante atributos data-*.
• Mantener accesibilidad basica: type="button", aria-label, aria-expanded, role y labels reales en formularios.

Mapa de componentes

Formularios y validaciones

Cargar material-validaciones.js cuando el formulario use validacion declarativa. Cada campo validable necesita un contenedor con data-im-campo="tipo", un control interno, opcionalmente required y un nodo small o [data-im-error] para mensajes.

Tipos soportados: email, whatsapp, cuit, dni, nombre, generico, importe, genero, autocomplete, checkbox, radio, toggle, slider, textarea, fecha, hora, password, confirmarPassword, cantidad.

<form class="im-formulario" data-im-validar>
  <label class="im-campo im-campo-material" data-im-campo="email">
    <span>Correo</span>
    <input type="email" name="email" placeholder="nombre@dominio.com" required>
    <i class="im-campo__icono material-symbols-rounded" aria-hidden="true">mail</i>
    <small data-im-error>Email requerido.</small>
  </label>

  <label class="im-campo im-campo-material" data-im-campo="cuit">
    <span>CUIT</span>
    <input type="text" name="cuit" placeholder="20-12345678-3" required>
    <small data-im-error>CUIT requerido.</small>
  </label>

  <label class="im-campo im-campo-material" data-im-campo="importe">
    <span>Importe</span>
    <input type="text" name="importe" placeholder="1250365,25" required>
    <b class="im-campo__prefijo" aria-hidden="true">$</b>
    <small data-im-error>Importe requerido.</small>
  </label>

  <label class="im-campo im-campo-material" data-im-campo="fecha">
    <span>Fecha</span>
    <input type="text" name="fecha" placeholder="dd/mm/aaaa" inputmode="numeric" required>
    <button class="im-campo__boton-icono material-symbols-rounded" type="button" data-im-datepicker aria-label="Abrir calendario">calendar_month</button>
    <small data-im-error>Fecha requerida.</small>
  </label>

  <label class="im-campo im-campo-material" data-im-campo="password">
    <span>Password</span>
    <input type="password" name="password" required>
    <small data-im-error>Password requerido.</small>
  </label>
  <label class="im-campo im-campo-material" data-im-campo="confirmarPassword" data-im-confirmar="password">
    <span>Confirmar password</span>
    <input type="password" name="confirmarPassword" required>
    <small data-im-error>Confirmacion requerida.</small>
  </label>

  <label class="im-campo im-campo-material im-campo--ancho" data-im-campo="textarea" data-im-max="255">
    <span>Descripcion</span>
    <textarea name="descripcion" rows="4" required></textarea>
    <small data-im-error>Descripcion requerida.</small>
    <em class="im-campo__contador" data-im-contador>0/255</em>
  </label>
</form>

Personalizacion visual

Personalizar desde variables CSS, sin editar componentes ni usar estilos inline. Variables frecuentes: --im-color-principal, --im-color-principal-suave, --im-color-secundario, --im-color-fondo, --im-color-superficie, --im-color-texto, --im-color-borde, --im-radio, --im-sombra-1, --im-sombra-2, --im-tipografia.

:root {
  --im-color-principal: #112c4e;
  --im-color-secundario: #2eb3ba;
}

Ejemplos minimos de uso

<button class="im-boton im-boton--principal" type="button">Guardar</button>

<article class="im-tarjeta">
  <div class="im-tarjeta__cabecera">
    <div><h3>Proyecto</h3><p>Estado general</p></div>
    <span class="im-chip im-chip--exito">Activo</span>
  </div>
</article>

<div class="im-tabla-contenedor">
  <table class="im-tabla">
    <thead><tr><th>Nombre</th><th>Estado</th></tr></thead>
    <tbody><tr><td>CDN</td><td>Activo</td></tr></tbody>
  </table>
</div>

<button class="im-boton im-boton--principal" type="button" data-abrir-dialog>Abrir dialog</button>
<button class="im-boton im-boton--tonal" type="button" data-abrir-bottom-sheet>Abrir bottom sheet</button>

<div class="im-tabs" data-tabs>
  <button class="activo" type="button">Resumen</button>
  <button type="button">Detalle</button>
</div>
<div class="im-tab-panel activo">Resumen</div>
<div class="im-tab-panel">Detalle</div>

<label class="im-campo im-campo-material" data-im-campo="email">
  <span>Email</span>
  <input type="email" name="email" required>
  <small data-im-error>Email requerido.</small>
</label>

Buenas practicas

• Cargar CSS antes del HTML visible.
• Cargar JS al final del body o con defer.
• No mezclar nombres de clases de otros frameworks.
• Mantener estructura semantica y labels reales.
• Verificar mobile y scroll interno en tablas.
• Usar material-symbols-rounded para iconos.
• Mantener textos accesibles y botones con type="button".

Checklist para publicar CDN

• Confirmar rutas finales de CSS y JS.
• Versionar URLs cuando haya cambios importantes.
• Probar en proyecto externo limpio.
• Probar responsive.
• Probar formularios validados.
• Probar navegacion por hash.
• Probar overlays: dialog, bottom sheet y snackbar.
• Mantener esta seccion sincronizada con material.css y JS.