Ir al contenido
English

Navegar

English

Escribe para buscar. Pulsa Escape para cerrar.

    Inicio

    Primeros pasos

    iVOLT se distribuye como CSS y JavaScript ya compilados. Con dos archivos basta: una hoja de estilo y un módulo. Sin paso de compilación, sin archivo de configuración y sin dependencias en ejecución; y esos dos archivos valen igual en HTML plano, WordPress, Astro o cualquier empaquetador.

    Versión: 1.0.0. Licencia: MIT. Motores probados: Chromium, Firefox, WebKit.

    El framework, funcionando en su propia páginafixtures/button/variants.htmlAbrir sola — El framework, funcionando en su propia página
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary" type="button">Primary</button>
  <button class="iv-button iv-button--secondary" type="button">Secondary</button>
  <button class="iv-button iv-button--ghost" type="button">Ghost</button>
  <button class="iv-button iv-button--danger" type="button">Danger</button>
  <button class="iv-button" type="button">Neutral</button>
  <a class="iv-button iv-button--secondary" href="#docs">Link as button</a>
</div>

    Instalar desde npm

    Un solo comando y ninguna dependencia que resolver.

    npm install @intervolutions/ivolt

    Fija la versión exacta en producción. Desde 1.0 el paquete sigue SemVer: qué es público y cómo puede cambiar está escrito en estabilidad.

    Compila el paquete

    Desde un clon, los mismos archivos que sirve el registro.

    git clone https://github.com/iNTERVOLUTIONS-Labs/iVOLT
cd iVOLT
npm ci
npm run build          # escribe packages/ivolt/dist

    HTML plano, sin Node

    Copia packages/ivolt/dist junto a tu página y enlaza los archivos.

    Añade la clase iv-root allí donde deba aplicarse la tipografía base: en <html> para una página entera, o en un contenedor cuando lo integres en un sitio existente.

    <!DOCTYPE html>
<html lang="es" class="iv-root" data-iv-theme="system">
<head>
  <link rel="stylesheet" href="ivolt/css/ivolt.min.css">
  <script type="module" src="ivolt/js/auto.js"></script>
</head>

    ¿Prefieres un script clásico? ivolt/js/ivolt.iife.min.js expone un único global, IVOLT, y no inicializa nada hasta que llamas a IVOLT.init().

    Módulos ES con un empaquetador

    Los exports del paquete son la API pública; las rutas profundas dentro de dist/ no lo son.

    import "@intervolutions/ivolt/css/ivolt.css";
import { init, Dialog } from "@intervolutions/ivolt";
import { setTheme } from "@intervolutions/ivolt/theme";

init(document);                       // explícito e idempotente
const dialog = Dialog.get(document.querySelector("#signup"));

    Importar @intervolutions/ivolt no tiene efectos secundarios; solo @intervolutions/ivolt/auto inicializa al cargar. Los módulos nunca tocan document en el momento de importarlos, así que son seguros en renderizado en servidor.

    Elige el CSS que necesitas

    ArchivoContiene
    css/ivolt.cssTodo, organizado en capas de cascada iv.reset, iv.tokens, iv.base, iv.layout, iv.components, iv.utilities, iv.overrides.
    css/ivolt.flat.cssLas mismas reglas sin @layer, para sitios cuyo CSS no está en capas y tiene que seguir compitiendo por especificidad.
    css/core.cssSolo tokens, base y maquetación.
    css/components/*.cssUn archivo por componente, sin capa. Impórtalo después de core.css y asígnale tú la capa si lo usas: @import url("…/components/button.css") layer(iv.components);
    css/reset.cssNormalización opcional. No lleva capa: impórtalo con @import url("…/reset.css") layer(iv.reset), o enlaza css/reset.layer.css, que ya viene envuelto.

    Las dos hojas están en el escenario de arriba: el control hoja plana cambia la hoja en capas por la hoja sin capas en una página que ya está funcionando.

    Convivir con tu CSS

    Las capas de cascada ordenan las reglas propias de iVOLT; no lo aíslan. Cualquier regla normal (sin !important) fuera de una capa gana a todas las reglas en capas, sea cual sea su especificidad. Por eso una regla de tema como button { background: red } sobrescribe .iv-button en ivolt.css. Hay dos salidas: usar ivolt.flat.css, o envolver la hoja heredada en una capa declarada antes que las de iVOLT: @import url("theme.css") layer(legacy);. Los estilos de elemento solo se aplican dentro de .iv-root, así que los títulos, enlaces y campos que estén fuera quedan intactos.

    Navegadores admitidos

    Diseñado para Chrome y Edge 111+, Firefox 113+, Safari e iOS 16.4+, Samsung Internet 22+. La compilación apunta a esas versiones; las consultas de contenedor y popover son mejoras progresivas. Sin Internet Explorer. Las pruebas automáticas se ejecutan en Chromium, Firefox y WebKit a través de Playwright, que no es lo mismo que probar en cada dispositivo físico.