Get Started

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.


Autor: Federico Manzano

Cambios para la versión  5.8.0

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.

ID Módulo Descarga
1 Grilla Descarga
2 Utilitarios Descarga
3 Elementos Dinámicos Descarga
4 Show Code Descarga

Alineamiento

Este módulo se encarga de la distribución de los elementos en el sitio web en desarrollo, permite adaptar los diseños a todos los tamaños de pantalla brindando clases predefinidas para realizar los ajustes pertinentes y mostrar el contenido de manera precisa.

Es importante aclarar que cada funcionalidad de posicionamiento queda definida a partir de parámetros que ajustan el contenido según las circunstancias. Todas estas definiciones se verán en apartados posteriores de esta documentación.

 Utilitarios

Permiten gestionar los elementos en los diferentes tamaños de pantalla, la biblioteca se basa en el diseño responsive, por esta razón es tan importante este módulo que permite agregar y quitar bordes, permitir que un elemento se muestre o no en pantalla, que un determinado elemento se muestre de determinado ancho y alto en un dispositivo y en otro se vea completamente distinto, permite gestionar el texto (alineación, tamaño, grosor y color) y otras funcionalidades que las veremos a lo largo de la documentación.

 Dynamics-Tips

Es una dependencia creada por la misma persona que desarrolló la biblioteca Bodystyle, que permite incluir dentro del diseño objetos dinámicos informativos en los que puede incluirse código html con el fin de brindarle al usuario información del contenido de la página.

Repositorio

Dynamics-Tips 3.0.0

 Show Code

Dependencia realizada por el mismo desarrollador de Bodystyle que pretende poder colorear el código fuente dentro de una página web. Los lenguajes de programación admitidos por esta dependencia son:
Java, JavaScript, C, CSS, Html.

Repositorio

Show-Code 2.0.0

Descarga e Instalación

Vamos a ver las diferentes formas de disponer de la biblioteca a través de los diferentes medios según el proyecto en desarrollo.

Descarga de los Archivos

Descargar el procesado de la biblioteca con los archivos transpilados.

Bodystyle 6.0.0

CDN

Se puede agregar la plantilla que se encuentra a continuación para disponer de los estilos y de la lógica en JS de la biblioteca. Los archivos enlazados son los minificados de la bodystyle para mejorar el rendimiento de la utilización de la biblioteca.

Es importante aclarar que la incorporación de la biblioteca a través del CDN es para pruebas y para probar las funcionalidades aportadas. Si se trata del desarrollo de un proyecto las alternativas adecuadas para esta labor son: La descarga directa o incorporar la biblioteca a través de NPM.

CDN Estilos CSS

Lógica en JS

Plantilla

La otra opción es copiar y pegar una plantilla que pueden copiar desde el repositorio:

Plantilla
La etiqueta viewport que se encuentra en el header de la plantilla es necesaria y obligatoria para el correcto funcionamiento de la biblioteca.

Npm

Se puede agregar la biblioteca al proyecto a través del gestor de paquetes de NodeJs NPM. 

        # npm install bodyui2

Desarrollo

Para el desarrollo de la biblioteca se utilizó el entorno de ejecución NodeJs 22.20.0 y el gestor de paquetes 11.6.1.

Gestor de paquetes

NODE JS

v22.20.0
Sitio Oficial

NPM

v11.6.1
Sitio Oficial

JS

Las dependencias utilizadas para el desarrollo son WEBPACK para modularizar el código JS y BABEL para transpilar el código de JavaScript a ES5 compatible con todos los navegadores.

WEBPACK

v5.0.7
Sitio Oficial

BABEL

8.0.8
Sitio Oficial

Transpilar el código JS de Bodystyle

        // desde el prompt ejecutar 
        npm run build

Procesador de estilos

SASS

v3.9.3
Sitio Oficial