Bodystyle es una librería con licencia MIT info para la creación del los elementos del front-end en sitios, páginas y/o aplicaciones web. Entre las diversas funcionalidades encontramos la generación de formularios, alertas, tips dinámicos, grilla, flexbox etc.
Código fuente de la librería Boodystyle.
bodystyle
| dist
| css
| bodystyle.css
| bodystyle.min.css
| grillaSolo.css
| grillaSolo.min.css
|utilitarios.css
|utilitarios.min.css
|tema-claro.css
|tema-claro.min.css
|tema-oscuro.css
|tema-oscuro.min.css
| js
| bodystyle.js
| bodystyle.min.js
| bodystyle.bundle.js
| bodystyle.bundle.min.js
| sass
| globales
| _variables.scss (Las variables globales de la librería)
| tema-oscuro.scss
| tema-claro.scss
| utilitarios.scss
| bodystyle.scss
| js
| src
| modulos
| (modulos).js
| app.js
Para clonar la librería desde el repositorio de github:
git clone https://github.com/FedericoManzano/bodystyleArchivos pre-compilados no incluye código sass ni los módulos js por separado.
bodystyle
| dist
| css
| bodystyle.css
| bodystyle.min.css
| grillaSolo.css
| grillaSolo.min.css
|utilitarios.css
|utilitarios.min.css
|tema-claro.css
|tema-claro.min.css
|tema-oscuro.css
|tema-oscuro.min.css
| js
| bodystyle.js
| bodystyle.min.js
| bodystyle.bundle.js
| bodystyle.bundle.min.js
| LICENSE
| README.md Para conocer todas las funcionalidades de la librería acudir a su documentación en:
https://bodystyle.000webhostapp.com
- Inicio
- Introducción
- Alineamiento
- CSS
- JS
- Componentes
- Formularios
- Utilitarios
La forma más rápida y sencilla de disponer de la librería es a través del CDN que enlaza con el código de los archivos minificados.
La forma de utilizar estos enlaces es agregandolos dentro de la etiqueta <head>...</head> de nuestro documento html.
<link rel="stylesheet" href="https://rawcdn.githack.com/FedericoManzano/bodystyle/58a25e885718d0b2db6675c502ce6a41a45f373c/dist/css/bodystyle.min.css"><script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://rawcdn.githack.com/FedericoManzano/bodystyle/58a25e885718d0b2db6675c502ce6a41a45f373c/dist/js/bodystyle.min.js"></script>A través de estos repositorios podemos acceder a la grilla y a los utilitarios de la librería unicamente.
Dejamos una plantilla para copiar y pegar para poder cargar la librería con lo que mencionamos antes.
<!DOCTYPE html>
<html>
<head>
<!-- META obligatorio para poder utilizar la libreria -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link con el CDN de los estilos css -->
<link rel="stylesheet" href="https://rawcdn.githack.com/FedericoManzano/bodystyle/58a25e885718d0b2db6675c502ce6a41a45f373c/dist/css/bodystyle.min.css">
</head>
<body>
<h1>Hola Mundo !!! <span class="badge badge-rojo">New</h1>
<script src="https://rawcdn.githack.com/FedericoManzano/bodystyle/58a25e885718d0b2db6675c502ce6a41a45f373c/dist/js/bodystyle.min.js"></script>
</body>
</html>Podemos disponer de la librería a través de su código fuente, el archivo pre-compilado o instalarla como una dependencia de nuestro proyecto con los gestores de paquetes de Node.
Ingresar por el terminal los siguientes comandos para instalar la dependencia de la librería.
$ npm i body-ui
$ yarn add body-ui
$ npm install @federicomanzano/[email protected]
- Capacidad deresaltar el código fuente de
html,js,css,java,c. - Dependencia dynamics-tips para los tooltips, comentarios y dropdown.
- Mejoramiento de las barras de navegación.
- Dropdown refactorizado y depurado respecto versiones anteriores.
- Archivo bodystyle.bundle.js con todos los archivos de estilo y módulos de js en un sólo archivo.
- Se incorporan íconos de fuente para añadirle a los elementos.
Se eliminaron las funcionalidades de resaltar el código fuente y se los reemplazó con una dependecia show-code-v1.1.1.
MIT
bodystyle (c) 2020