Mi Framework Web

Componentes Frontend para Aplicaciones Web

Aquí encontraras una vista previa de los componentes y sus funcionalidades en el framework. Desarrollado bajo la filosofía vanilla-first (CSS y JavaScript puros sin dependencias externas), el sistema garantiza tiempos de carga ultrarrápidos, portabilidad absoluta y escalabilidad en entornos multi-inquilino (multi-tenant).

Pilares Clave de la Implementación:

Gestión Centralizada de Estilos: Uso estricto de variables CSS (:root) para el control de paletas de color de aplicación, estados de negocio (success, danger, warning, info) y un sistema adaptativo de tipografías basadas en rem para asegurar la accesibilidad visual.

Modo Oscuro Nativo e Inversión Dinámica: Persistencia asíncrona del tema visual (light-theme / dark-theme) mediante el ciclo de vida del DOM y acoplamiento con localStorage.

Componentes de Control de Flujo: Inclusión de modales reactivos, alertas con delegación de eventos, un editor de texto enriquecido e interactivo para comunicaciones, y un sistema auto administrable de notificaciones asíncronas duales (estilo Android Snackbar para interacciones con retorno de estado / Toast pasivo).

Adaptabilidad Táctica y Periférica: Un sistema responsivo móvil-primero (Mobile-First) integrado con layouts híbridos (Grid/Flexbox) y un Teclado Virtual Nativo (Virtual Keyboard) acoplable a cualquier nodo de entrada de datos, garantizando una usabilidad táctil impecable en terminales de Punto de Venta (POS) y dispositivos móviles.

Container

Configuración del Sistema

Administra los parámetros globales de operación.

Estatus de Ubicaciones

2 Activas

Certificados Digitales
Vigente (CSD)
Folios Consumidos

412 / 1000

Último Respaldo

Ayer, 11:45 PM

Accordion

Métodos de Pago Soportados
Soportamos pagos en efectivo, transferencias interbancarias (SPEI) y las principales tarjetas de crédito y débito a través de la pasarela de pagos integrada.
Configuración de Facturación Electrónica (SAT)
Para activar la facturación en México, necesitas cargar tu archivo .key, .cer y la contraseña de la Llave Privada de tu Certificado de Sello Digital (CSD) vigente.
Políticas de Inventario y Alertas
El sistema envía notificaciones automáticas cuando un producto alcanza su stock mínimo configurado, previniendo rupturas de inventario en tu punto de venta.
Soporte Técnico y Actualizaciones
Las actualizaciones del framework y del sistema base son completamente automáticas. El soporte técnico está disponible de lunes a viernes en horario comercial.

Alerts

Primary Alert
Primary Light Alert
Primary Dark Alert
Secondary Alert
Secondary Light Alert
Secondary Dark Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert

Avatar

Carlos
JC
Carlos
JC
Carlos
JC
Carlos
JC
CC
Carlos
MC
Carlos
+3

Badge

Activo
Cancelado
Pendiente
En Proceso
NUEVO
Stock: 15
Premium
Orange

Breadcrumb

Button

Button Group

Callout

Default Callout
Primary Callout
Secondary Callout
Success Callout
Danger Callout
Warning Callout
Info Callout
Light Callout
Dark Callout

Card

Header
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore at minus ducimus officiis ratione molestiae dicta impedit exercitationem officia harum eos aut amet libero quo, quos blanditiis, distinctio voluptates non!
Footer
Primary
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore at minus ducimus officiis ratione molestiae dicta impedit exercitationem officia harum eos aut amet libero quo, quos blanditiis, distinctio voluptates non!
Footer
Light
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore at minus ducimus officiis ratione molestiae dicta impedit exercitationem officia harum eos aut amet libero quo, quos blanditiis, distinctio voluptates non!
Footer
Without Header
Footer
Header
Without Footer
Whit Accordion and Full width
Métodos de Pago Soportados
Soportamos pagos en efectivo, transferencias interbancarias (SPEI) y las principales tarjetas de crédito y débito a través de la pasarela de pagos integrada.
Configuración de Facturación Electrónica (SAT)
Para activar la facturación en México, necesitas cargar tu archivo .key, .cer y la contraseña de la Llave Privada de tu Certificado de Sello Digital (CSD) vigente.
Políticas de Inventario y Alertas
El sistema envía notificaciones automáticas cuando un producto alcanza su stock mínimo configurado, previniendo rupturas de inventario en tu punto de venta.
Soporte Técnico y Actualizaciones
Las actualizaciones del framework y del sistema base son completamente automáticas. El soporte técnico está disponible de lunes a viernes en horario comercial.
Footer

Check

Code

1 2 3 4 
                                
                                    function saludar(nombre) {
                                        console.log("Hola " + nombre);
                                    }
                                    saludar("Carlos");

Colors

Primary Light Color
Primary Color
Primary Dark Color
Secondary Light Color
Secondary Color
Secondary Dark Color
Success Color
Danger Color
Warning Color
Info Color
White Color
Light Color
Gray 85 Color
Gray 65 Color
Gray Color
Gray 35 Color
Gray 15 Color
Dark Color
Black Color
Red Color
Orange Color
Yellow Color
Green Color
Blue Color
Purple Color
Pink Color

Collapse

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis facilis voluptatum optio sequi? Maxime praesentium veritatis nam distinctio alias delectus incidunt, totam sit, voluptate rem sed quas impedit doloremque assumenda. Mollitia tempora ratione similique corrupti porro alias nisi, consectetur dolorum laudantium aperiam. Cum eum tempore eveniet ut totam, molestias possimus, nisi ad architecto rem optio accusamus quod vel. In, voluptatibus. Incidunt dignissimos dolore illum dicta unde consectetur ea maxime eveniet ratione expedita quos excepturi ducimus reiciendis quo eos adipisci maiores vel quas obcaecati voluptates quis iusto, provident placeat necessitatibus? Iure! Mollitia est dolorem laborum nulla alias quas repellat quibusdam sint at saepe quis totam, minima delectus veniam culpa rerum suscipit sunt velit, distinctio reiciendis? Sequi impedit possimus sunt ipsa. Minus. Pariatur corrupti, accusamus itaque repellendus blanditiis sit non asperiores officia dolores ipsum sed nisi nesciunt maxime. Ducimus, quo facilis. Sint veniam obcaecati officia ad error exercitationem, id culpa a enim.

Divider

Divider
Divider

Dropdown

Mi Perfil Ajustes de Sistema
Descargar Excel (.xlsx) Descargar PDF (.pdf)

Form

Description
Description
Description
Description
Description
Description
Description
Description
Description
Description

Header

Title

Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, id maxime optio cumque, nulla dolores enim nemo a libero labore quibusdam iusto similique nostrum facere quisquam eligendi iure architecto amet. Voluptatibus, dolores debitis fugiat officia error, numquam quas consequuntur assumenda sequi porro laudantium reprehenderit ad quae illo a voluptatum sunt pariatur voluptate sapiente! Inventore magni autem vitae officiis doloribus a! Numquam nulla voluptas quae commodi veniam placeat, cupiditate provident accusamus officia ipsum officiis cumque quia. Suscipit quaerat adipisci soluta dolore temporibus porro ipsum ipsa, voluptatibus non ipsam in, repudiandae quasi.

Image

Image
Image Image Image Image Image
Image

Input

Description
Description
Description
Description
Description
Description
Description
Description
Description
Description

Input Group

$ MXN
Pzas

Input Float Label

List Description

Customer
Juan Lopéz
Address
Santa Ana, Sonora
Event
Cumpleaños
Date
22/05/2026
Payment
$ 1500 MXN

List Group

Customer
Address
Phone
Event
Date
Payment
Details

List Responsive

Avatar

Name

Position

Details

Avatar

Name

Position

Details

Avatar

Name

Position

Details

Avatar

Name

Position

Details

Avatar

Name

Position

Details

Avatar

Name

Position

Details

Avatar

Name

Position

Details

List Tooltip

Id User Name Email
Details
90 esanchez Emanuel Sanchez esanchez@email.com
Details
91 magana Alexis Magaña magana@email.com
Details
93 caraveo Ricardo Caraveo caraveo@email.com

Modal

Navbar

Nav

Active
Link
Link
Disabled
Active
Link
Link
Disabled
Active
Link
Link
Disabled

Offcanvas

Pagination

Registros por página:
X registros en Y páginas

Progress

20%
40%
60%
80%
100%

Radio Group

Método de Envío
¿Aplicar IVA en cajas?

Range

Select

Description
Description
Description
Description

Snackbar

Spinner

Variantes de Rotación
Variantes de Pulso (Grow)
Integración en Botones (Uso Real)

Switch

Table

Table with Lateral Displacement

Código Descripción del Producto Stock Precio Público Estatus
PROD-001 Refresco de Cola de 600ml NR 48 Pzas $18.50 MXN Disponible
PROD-002 Aceite Comestible de Soya 1Lt 12 Pzas $42.00 MXN Disponible

Self-Transforming Board into Blocks/Cards

Tenant (Empresa) Plan Contratado Facturas Emitidas Vencimiento
Abarrotes La Única SaaS Básico 142 / 500 05/Ene/2026
Ferretería Norte SaaS Premium 890 / Ilimitado 22/Mar/2026

Tab

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Textarea

Text Editor

Escribe tu texto aquí...

Typography

Jerarquía de Títulos

Título H1 (Dashboard / Ventas)

Título H2 (Sección Principal)

Título H3 (Encabezado de Tarjeta)

Título H4 (Bloque de Control)

Título H5 (Subsección)
Título H6 (Categoría / Meta)
Utilidades y Estados

Texto destacado para resúmenes de facturación.

Este es un párrafo de texto base (`16px`) común para descripciones o flujos informativos estándar.

Texto secundario/atenuado útil para notas al pie, marcas de tiempo o IDs únicos.

+14.5% -2.1% ID: tenant_3091

Virtual Keyboard