Biblioteca de estilos estáticos y dinámicos para la creación del Front-End WEB.
Tu caja de herramientas CSS para resolver cualquier problema UI con mínimo código
Utilidades granulares + Componentes interactivos opcionales. Sin dependencias. Sin build process necesario.
Bodystyle es una biblioteca de software libre diseñada para facilitar la creación del Front-End de sitios y aplicaciones web. Está conformada por cuatro módulos principales que constituyen su core, permitiendo agrupar y distribuir elementos de diferentes características de manera eficiente en toda la interfaz de usuario (UI).
Objetivo: Proporcionar herramientas poderosas a los desarrolladores para crear diseños innovadores y enfocarse en mejorar continuamente la experiencia de usuario (UX).
Versión actual:
v6.5.0- ♿ Con Accesibilidad WCAG 2.1
Para desarrolladores que quieren:
Bodystyle es perfecto para ti si:
p-*, m-*), colores (c-*, bg-*), tamaños (fz-*, fw-*)/* tu-estilos.css - Necesitas escribir todo */
.card {
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.card-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.card-button {
padding: 10px 20px;
background: blue;
color: white;
border-radius: 4px;
}
<!-- Reutiliza clases de utilidad directamente -->
<div class="p-5 bor-rad-8 shadow">
<h2 class="fz-24 fw-bold mb-3">Título</h2>
<button class="btn bg-blue c-white">Acción</button>
</div>
Beneficio: Menos CSS, más velocidad, sin cambiar de archivo.
| Aspecto | Bodystyle | Tailwind | Bootstrap |
|---|---|---|---|
| CDN Sin Build | ✅ | ❌ | ✅ |
| Utilidades Granulares | ✅ | ✅ | ❌ |
| Componentes Interactivos | ✅ | ❌ | ✅ |
| Sin Dependencias | ✅ | ✅ | ❌ |
| Curva de Aprendizaje | Baja | Media | Media |
| Personalizable con SASS | ✅ | Parcial | ✅ |
| Documentación en Español | ✅ | ❌ | ✅ |
| Tamaño Final (minificado) | ~35 KB | ~50+ KB | ~150+ KB |
<!-- Botón para abrir modal -->
<button class="btn bg-blue activar-modal" data-target="#miModal">
Abrir Modal
</button>
<!-- Modal con accesibilidad WCAG 2.1 -->
<div id="miModal" class="modal-fondo">
<div class="modal">
<!-- Cabecera -->
<div class="modal-cabecera">
<h2 class="modal-titulo">Título del Modal</h2>
<button class="modal-salir" aria-label="Cerrar modal"></button>
</div>
<!-- Contenido -->
<div class="modal-cuerpo">
<p>Tu contenido aquí...</p>
</div>
<!-- Pie (opcional) -->
<div class="modal-pie">
<button class="btn bg-gris">Cancelar</button>
<button class="btn bg-blue">Aceptar</button>
</div>
</div>
</div>
<!-- Inicializar -->
<script src="dist/js/bodystyle.min.js"></script>
<script>
BS.ModalInit()
</script>
Características:
📖 Ver documentación completa | 🎯 Ver ejemplos interactivos
La forma más rápida de empezar es usando el CDN:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Proyecto con Bodystyle</title>
<!-- Bodystyle CSS -->
<link rel="stylesheet" href="https://rawcdn.githack.com/FedeManzano/bodystyle/refs/heads/master/dist/css/bodystyle.min.css">
</head>
<body>
<h1 class="ta-c c-blue fz-50">¡Hola Bodystyle!</h1>
<div class="contenedor">
<button class="btn bg-blue">Mi Botón</button>
</div>
<!-- Bodystyle JS -->
<script src="https://rawcdn.githack.com/FedeManzano/bodystyle/refs/heads/master/dist/js/bodystyle.min.js"></script>
<script>
BS.ToolTipsInit();
</script>
</body>
</html>
npm install bodyui2
git clone https://github.com/FedeManzano/bodystyle
cd bodystyle
npm install
Bodystyle ahora incluye definiciones de tipos completas para TypeScript, proporcionando autocompletado, validación de tipos y mejor experiencia de desarrollo.
npm install bodyui2
Las definiciones de tipos se incluyen automáticamente. No necesitas instalar @types adicionales.
import 'bodyui2/dist/js/bodystyle.bundle.js'; // OBJETO GLOBAL BS => window.BS
import Waves from 'bodyui2/modulos/Waves';
import { slideUp, slideDown } from 'bodyui2/modulos/Animaciones';
// TypeScript proporciona autocompletado y validación de tipos
window.BS.Toast({
mensaje: 'Hola TypeScript!',
clases: ['bg-red', 'bor-rad-10', 'c-white'], // Color de fondo, radio de borde y color de texto
duracion: 3000,
cerrar: true // Permite cerrar el toast manualmente
});
// Inicializar waves con tipos
Waves.iniciar();
// Animaciones con tipos completos
const element = document.querySelector('.my-element') as HTMLElement;
slideDown(element, 300, () => {
console.log('Animación completada');
});
/******************************************************************************************************
* App.js Archivo del componente principal
*/
import { useEffect } from 'react';
function App() {
useEffect(() => {
// Inicializar Bodystyle después de que el componente se monte
if (window.BS) {
window.BS.ToolTipsInit();
window.BS.CommentInit();
}
}, []); // Array vacío = solo se ejecuta una vez al montar
return (
<div className="App">
<div className='container mt-3'>
<button
type="button"
className="com-trigger btn fd-bodyui"
data-info="Hello Soy un Tips !!"
>
Tips
</button>
</div>
</div>
);
}
export default App;
/********************************************************************
* Archivo index.js
*/
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// Importar CSS y JS de Bodystyle globalmente
import "bodyui2/dist/css/bodystyle.min.css";
import "bodyui2/dist/js/bodystyle.min.js";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Consulta los ejemplos en la carpeta ejemplos/ para ver casos de uso completos con TypeScript y JavaScript.
¿Vienes de Bootstrap? Tenemos guías completas para ayudarte a migrar tu proyecto a Bodystyle:
| Ventaja | Descripción |
|---|---|
| 🚀 Menor tamaño | ~30% más ligero que Bootstrap |
| 📦 Sin dependencias | No requiere Popper.js ni otras librerías externas* |
| 💪 TypeScript nativo | Tipos incluidos, sin necesidad de @types |
| ⚡ 100% Vanilla JS | Sin jQuery, mejor rendimiento |
| 🎨 Componentes únicos | Waves, Parallax, ScrollSpy y más |
| 🔧 Fácil migración | Sintaxis similar, curva de aprendizaje baja |
*Excepto
dynamics-tipsyshow-sintaxpara componentes específicos
<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">Click me</button>
<!-- Bodystyle -->
<button class="btn bg-blue fz-18">Click me</button>
Consulta las guías completas para ver mapeos detallados de todos los componentes, clases CSS y APIs de JavaScript.
Bodystyle está compuesto por cuatro módulos independientes que pueden descargarse por separado:
| Módulo | Versión | Descripción | Descarga |
|---|---|---|---|
| Grid | 6.5.0 | Sistema de grilla responsive para layouts | Descargar |
| Utils | 6.5.0 | Utilidades de texto, espaciado y Flexbox | Descargar |
| Dynamics | 3.0.0 | Componentes dinámicos e interactivos (dytips) | Descargar |
| Show-Code | 3.0.0 | Resaltado de sintaxis para código | Descargar |
Docs/
├── css/
│ └── bodystyle.min.css
├── imagenes/
│ └── [imágenes de la documentación]
├── js/
│ └── docs-body.js
├── paginas/
│ ├── alertas.html
│ ├── ancho_alto.html
│ ├── badges.html
│ ├── bordes.html
│ ├── botones.html
│ ├── breadcrumbs.html
│ ├── colecciones.html
│ ├── colores.html
│ ├── dropdown.html
│ ├── flexbox.html
│ ├── formularios.html
│ ├── get_started.html
│ ├── grid.html
│ ├── modal.html
│ ├── nav.html
│ ├── sidebar.html
│ ├── tablas.html
│ ├── tarjetas.html
│ ├── tooltips.html
│ └── [más componentes...]
├── index.html
└── logo.ico
# Versión sin minificar
sass sass/bodystyle.scss dist/css/bodystyle.css
# Versión minificada
sass -s compressed sass/bodystyle.scss dist/css/bodystyle.min.css
npm run build
npm test # Ejecuta la suite completa
npm test:watch # Ejecuta pruebas en modo watch
npm test:coverage # Genera reporte de cobertura
Los resultados se mostrarán en la consola y el reporte de cobertura se guardará en coverage/.
Esto generará dist/js/bodystyle.min.js con todo el código transpilado y optimizado.
Bodystyle es compatible con las versiones modernas de los principales navegadores:
| Navegador | Versión Mínima |
|---|---|
| Chrome | 60+ |
| Firefox | 60+ |
| Safari | 12+ |
| Edge | 79+ |
| Opera | 47+ |
Nota: Para navegadores más antiguos, se recomienda usar polyfills apropiados.
| Dependencia | Versión | Descripción | Estado |
|---|---|---|---|
| Webpack | 5.102.0 | Empaquetador de módulos | ✅ Activo |
| Babel | 6.23.0 | Transpilador de JavaScript | ✅ Activo |
| dytips | 3.0.0 | Sistema de tooltips y componentes | ✅ Activo |
| @bodystyle/show-code | 3.0.0 | Resaltado de código | ✅ Activo |
Implementación completa de estándares de accesibilidad en el componente Modal:
✅ Atributos ARIA Completos
role="dialog" - Identifica el elemento como diálogoaria-modal="true" - Indica que es modalaria-labelledby - Conecta con el título del modalaria-label - Botón de cerrar accesiblearia-hidden - Gestión de visibilidad para lectores de pantalla✅ Navegación con Teclado
✅ Gestión de Focus
✅ Indicadores Visuales
✅ Compatibilidad con Tecnologías Asistivas
Documentación: MODAL_ACCESIBILIDAD.md
✅ Migración Total a Vanilla JavaScript - ¡Proyecto 100% libre de jQuery!
@bodystyle/show-code v3.0.0 y dytips v3.0.0.✅ Suite de Testing Completa - 247 tests unitarios con Jest
✅ CI/CD con GitHub Actions - Pipeline automatizado
✅ Soporte TypeScript Mejorado - Definiciones de tipos completas
✅ Documentación Mejorada - Ejemplos y guías actualizadas
⚡ Reducción de dependencias - Menos código, mejor rendimiento
🚀 Optimización de módulos - Código refactorizado
Fase Completada: Grupo 1 - Input/Forms ✅
Fase Completada: Grupo 2 - Navigation ✅
Fase Completada: Grupo 3 - Visual Effects ✅
Progreso Total: 20/20 módulos migrados (100%) MIGRACIÓN COMPLETADA
¡Las contribuciones son bienvenidas! Si deseas contribuir a Bodystyle:
git checkout -b feature/NuevaCaracteristica)git commit -m 'Agregar nueva característica')git push origin feature/NuevaCaracteristica)Si encuentras un bug o tienes una sugerencia, por favor abre un issue en GitHub.
Este proyecto está licenciado bajo la Licencia MIT.
Federico Manzano
¿Te gusta Bodystyle? ¡Dale una ⭐ en GitHub!
Hecho con ❤️ por Federico Manzano
FAQs
Biblioteca de estilos estáticos y dinámicos para la creación del Front-End WEB.
The npm package bodyui2 receives a total of 29 weekly downloads. As such, bodyui2 popularity was classified as not popular.
We found that bodyui2 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.