Boxy Style

Boxy Style es una librería de diseño modular de alto rendimiento enfocada en componentes UI reutilizables. Creada utilizando SASS/SCSS avanzado y delegación de eventos Vanilla JS, está estructurada especialmente para facilitar el desarrollo rápido de interfaces ágiles, elegantes e integrarse limpiamente con proyectos web modernos (sitios estáticos, Vue.js, Nuxt.js).

📦 Características Principales

• Arquitectura Basada en Atributos & Clases: Mezcla estratégicamente clases convencionales (.b-btn, .b-card) con custom attributes reactivos ([bg="primary"], [tx="danger"], [ripple]).
• Observador de DOM Integrado: El Javascript del framework incluye un MutationObserver super ligero que reacciona de inmediato si injectas elementos con componentes de estilos (como colores bg="success") en Single Page Applications (SPAs).
• Interacciones nativas: Menús laterales (.b-side), Navigations Bars responsivos (.b-header), ventanas emergentes y modales con apertura y cierre "out-of-the-box" sin necesidad de que tú programes la lógica del listener en el DOM.
• Build Cero Complicaciones: Procesado mediante la potencia en paralelo de esbuild, chokidar, y CLI oficial de sass.

📁 Estructura del Código Fuente

boxy-style/
├── src/
│   ├── scss/           # Todo el core del diseño (grid, layout, componentes, colores, mixins).
│   │   ├── boxy.scss   # Entrypoint principal de estilos.
│   │   ├── buttons/    # Componentes modulares de botones.
│   │   ├── modals/     # Estructura visual de popups/modals.
│   │   └── helpers/    # Utilidades (Background, border, margin).
│   └── js/             # Lógica Vanilla (modales, ripples, observadores).
│       └── boxy.js     # Entrypoint principal del Javascript.
├── dist/               # Carpeta generada. Contiene los CSS y JS listos para producción.
├── docs/               # Documentación y referencia de componentes específicos.
└── package.json        # NPM scripts de compilación.

🛠️ Instalación y Uso de Desarrollo Local

Tener Node.js (v18+) instalado.

1. Clonar el repositorio.
2. Instalar dependencias base:

   npm install

3. Iniciar el entorno de desarrollo (Compila y observa cambios en vivo):

   npm run watch

4. Para compilar la versión minificada de producción (dist/ formated y bundle final):

   npm run build

NOTA: Puedes integrar un script personalizado (ej. npm run copy:boxy) para enviar las compilaciones frescas al proyecto local destino (ej. tu app de Vue) automáticamente durante el deasarrollo.

🚀 Guía Rápida de Componentes

Botones y Ripples

Añade elegancia inmediata usando el atributo ripple junto al estilo nativo:

<button class="b-btn" bg="primary" ripple>Click Me</button>
<button class="b-btn" bg="danger" ripple>Delete</button>

Colores Dinámicos

Puedes colorear cualquier fondo o texto invocando variables primarias a través de los selectores HTML en lugar de modificar CSS:

<div bg="dark" tx="light">
  Este contenedor será oscuro de texto claro.
</div>

Boxy Style - Internal Design Ecosystem. Diseñado para simplificar e incrementar la estética de tu trabajo.