Bodystyle biblioteca de Software libre para la creación del
Front-End de sitios y aplicaciones
web conformada, como se analizará en apartados posteriores, por cuatro módulos que conforman el core de
la biblioteca. A partir del core se podrán agrupar elementos de diferentes características y
distribuirlos
de manera correcta por toda la
interfaz
de usuario UI.
El objetivo de este trabajo es brindarle herramientas a los desarrolladores para que puedan crear
diseños innovadores y se enfoquen en la mejora continua de la
experiencia
de usuario UX.
Bodystyle NO es un framework cerrado ni un conjunto de componentes predefinidos.
Es una BASE DE CONSTRUCCIÓN modular y flexible.
Proporciona los bloques fundamentales: Grid responsivo, Utilitarios CSS, Dynamics (posicionamiento), Show Syntax (highlighting)
Tú decides cómo combinarlos: No impone patrones ni estructuras rígidas
Tú creas diseños únicos: Los elementos son herramientas, no soluciones finales
Máxima libertad creativa: Combina, personaliza y crea sin limitaciones
A diferencia de otros frameworks populares que te obligan a seguir su estructura,
Bodystyle te empodera para crear tus propios diseños usando una base sólida y bien construida.
Core de Bodystyle
El core de bodystyle lo conforman cuatro módulos principales que se pueden descargar por separado
para disponer de lo que proveen, pero que son integrados en esta biblioteca para tener a disposición
el conjunto completo de funcionalidades para el desarrollo y diseño de la interfaz de usuario.
Para poder agregar Bodystyle a nuestro proyecto con los archivos procesados directamente lo haremos a través de la
descarga directa, que permitirá simplemente el agregado del archivo de estilos y de lógica (JavaScript) al html en desarrollo.
Todo esto lo podemos realizar en tres sensillos pasos:
Enlace de Descarga
A través del botón que figura abajo descargamos el archivo zip que contendrá todo Bodystyle en su última versión.
Otra forma sencilla de agregar Bodystyle a nuestro proyecto es a través de un CDN (Content Delivery
Network), que nos permitirá enlazar los archivos directamente desde un servidor externo sin necesidad
de descargarlos y alojarlos localmente.
Estilos
JS
-->
Información
Una vez que se hayan agregado los enlaces de CSS y JS al proyecto, se podrá comenzar a utilizar
todas las funcionalidades que Bodystyle ofrece para el desarrollo de la interfaz de usuario.
NPM
Bodystyle también se puede instalar y gestionar a través de NPM (Node Package Manager), lo que facilita la
integración de la biblioteca en proyectos basados en Node.js y permite una gestión más eficiente de los
recursos provistos por Bodystyle.
Instalación
npm install bodyui2
Importación
Una vez instalado, Bodystyle se puede importar en los archivos JavaScript del proyecto de la siguiente manera:
/*=== Importar Bodystyle en el proyecto global ===*/
import 'bodyui2/dist/css/bodystyle.min.css'; // Importar estilos CSS
import 'bodyui2/dist/js/bodystyle.min.js'; // Importar
/*=== Importar Bodystyle en el proyecto individual ===*/
// Es posible solo importar los módulos necesarios según las necesidades del proyecto
import Alerta from 'node_modules/bodyui2/src/modulos/Alertas'; // Importar solo el módulo de Alertas
import Animaciones from 'node_modules/bodyui2/src/modulos/Animaciones'; // Importar solo el módulo de Animaciones
import BotonInicio from 'node_modules/bodyui2/src/modulos/BotonInicio'; // Importar solo el módulo de BotonInicio
import CodigoC from 'node_modules/bodyui2/src/modulos/CodigoC'; // Importar solo el módulo de CodigoC
import CodigoHtml from 'node_modules/bodyui2/src/modulos/CodigoHtml'; // Importar solo el módulo de CodigoHtml
import CodigoJs from 'node_modules/bodyui2/src/modulos/CodigoJs'; // Importar solo el módulo de CodigoJs
import CodigoCss from 'node_modules/bodyui2/src/modulos/CodigoCss'; // Importar solo el módulo de CodigoCss
import CodigoJava from 'node_modules/bodyui2/src/modulos/CodigoJava'; // Importar solo el módulo de CodigoJava
import Coleeciones from 'node_modules/bodyui2/src/modulos/Coleeciones'; // Importar solo el módulo de Colecciones
import ComentarioDinamico from 'node_modules/bodyui2/src/modulos/ComentarioDinamico'; // Importar solo el módulo de Comentarios
import ColeccionFlotante from 'node_modules/bodyui2/src/modulos/ColeccionFlotante'; // Importar solo el módulo de ColeccionFlotante
import Dropdown from 'node_modules/bodyui2/src/modulos/Dropdown'; // Importar solo el módulo de Dropdown
import Desactivado from 'node_modules/bodyui2/src/modulos/Desactivado'; // Importar solo el módulo de Desactivado
import EfectoScroll from 'node_modules/bodyui2/src/modulos/EfectoScroll'; // Importar solo el módulo de EfectoScroll
import Imagenes from 'node_modules/bodyui2/src/modulos/Imagenes'; // Importar solo el módulo de Imagenes
import ImputHandler from 'node_modules/bodyui2/src/modulos/ImputHandler'; // Importar solo el módulo de InputHandler
import Modal from 'node_modules/bodyui2/src/modulos/Modal'; // Importar solo el módulo de Modales
import Navigation from 'node_modules/bodyui2/src/modulos/Navigation'; // Importar solo el módulo de Navigation
import Personalizado from 'node_modules/bodyui2/src/modulos/Personalizado'; // Importar solo el módulo de Personalizado
import Paralax from 'node_modules/bodyui2/src/modulos/Paralax'; // Importar solo el módulo de Paralax
import SidebarDrop from 'node_modules/bodyui2/src/modulos/SidebarDrop'; // Importar solo el módulo de SidebarDrop
import Range from 'node_modules/bodyui2/src/modulos/Range'; // Importar solo el módulo de Input Range
import Select from 'node_modules/bodyui2/src/modulos/Select'; // Importar solo el módulo de Select
import ScrollSpy from 'node_modules/bodyui2/src/modulos/ScrollSpy'; // Importar solo el módulo de ScrollSpy
import Tabs from 'node_modules/bodyui2/src/modulos/Tabs'; // Importar solo el módulo de Tabs // Devuelve una instacia de clase
import Toast from 'node_modules/bodyui2/src/modulos/Toast'; // Importar solo el módulo de Toast
import ToolTips from 'node_modules/bodyui2/src/modulos/ToolTips'; // Importar solo el módulo de ToolTips
import Waves from 'node_modules/bodyui2/src/modulos/Waves'; // Importar solo el módulo de Waves
Información
Después de importar Bodystyle, es posible inicializar los módulos necesarios en el proyecto
utilizando las funciones de inicialización proporcionadas por la biblioteca.
Todos los módulos tienen la funcion iniciar() y
destroy().
Advertencia
Cuando utilizamos la función destroy() para desvincular los eventos de los diferentes elementos eliminamos
el funcionamiento asociado pero no la visual de los elementos, solo el BotonInicio se elimina
completamente ya que es 100% dinámico.
Ejemplo
// Global a través del OBJETO BS
BS.NavigationInit("#nav"); // Inicializar el módulo de navegación
BSNavigationDestroy(); // Desvincular los eventos del módulo de navegación
// Individual a través de la clase
import Navigation from 'node_modules/bodyui2/src/modulos/Navigation';
Navigation.iniciar("#nav"); // Inicializar el módulo de navegación
Navigation.destroy(); // Desvincular los eventos del módulo de navegación
Primeros Pasos
La manera más sencilla de agregar a bodystyle al proyecto en desarrollo es a través de la plantilla
proporcionada en el README.md del repositorio, utilizandola
se podrán realizar todas las pruebas convenientes para aprender y testear la diferentes funcionalidades
que ofrece la biblioteca.
Es importante recalcar que la plantilla es solo un punto de partida y que se pueden realizar
modificaciones y adaptaciones según las necesidades específicas del proyecto en desarrollo.
Sin embargo, contaremos únicamente con las funcionalidades básicas. Para realizar modificaciones y adaptar a bodystyle
al proyecto en desarrollo las opciones antes vistas (Descarga Directa y NPM) son las recomendadas.
Navegadores
Los navegadores soportados por Bodystyle son los siguientes:
Nombre
Versión Mínima
Google Chrome
60 +
Mozilla Firefox
60 +
Microsoft Edge
79 +
Safari
12 +
Opera
47 +
FAQ
Para la nueva versión de Bodystyle se está trabajando en una sección de preguntas frecuentes (FAQ)
que ayudará a resolver las dudas más comunes que puedan surgir durante el uso de la biblioteca.
ScrollSpy vs Reveal
Desde la versión de bodystyle 6.5.0 se añadió el módulo Efecto Scroll (Reveal) que permite mostrar
elementos de manera gradual a medida que el usuario navega por la página.
Ambos módulos no pueden utilizarse a la vez, ya que el scrollspy se volvería loco y no funcionaría correctamente.
Por lo tanto, se recomienda utilizar uno u otro según las necesidades del proyecto en desarrollo.
Fuente Nueva
Desde la versión 6.5.0 se cambió la fuente a Inter
descargada de el sitio oficial de Google Fonts.
Esta fuente es moderna, legible y optimizada para pantallas digitales, lo que mejora la experiencia de usuario en la mayoría de los dispositivos.
Angular / React
A partir de la versión 6.0.0 Bodystyle es compatible con frameworks modernos como Angular y React.
Se pueden integrar los módulos de Bodystyle en proyectos desarrollados con estos frameworks, permitiendo aprovechar
las funcionalidades de la biblioteca en aplicaciones web dinámicas y reactivas.
No hace falta ejecutar las funciones de inicialización de los módulos en el método del ciclo de vida correspondiente a después
de la carga del DOM, ya que Bodystyle se encargará de inicializar los módulos automáticamente.
"styles": [
"src/styles.scss",
"node_modules/bodyui2/dist/css/bodystyle.min.css"
],
"scripts": [
"node_modules/bodyui2/dist/js/bodystyle.min.js"
]
/****************//////////////////////*********************/
declare var BS: any; // Declarar el Objeto global BS
// Luego para utilizar el Objeto gloabal BS
ngOnInit() {
BS.ToolTipsInit();
BS.CommentInit();
// Otros módulos según sea necesario
}
Porque Bodystyle?
La mayoría de los frameworks actuales para frontend están orientados a generar y aportar componentes
predefinidos para el desarrollo web, pero no brindan herramientas para la creación de diseños únicos
y personalizados.
A partir de esta biblioteca aprenderemos a como crear estilos desde una base sólida para la personalización
y para volcar en cada las ideas de diseño que le parezcan interesantes a cada desarrollador.
Bodystyle está pensado para que cada desarrollador pueda crear su propio estilo y diseño, partiendo de una base.