Node.js / Temas de bootstrap

Bienvenidos sean a este post, hoy veremos otra forma de personalizar a bootstrap.

En internet se aplica mucho la siguiente frase:

¿ Por que reinventar la rueda ?

Anonimo

Si lo visto en el post anterior les parecio demasiado complicado para simplemente establecer un nuevo tema para bootstrap, internet ofrece muchas posibilidades de terceros para poder hacer lo mismo de una manera mas sencilla, para esta ocasion vamos a utilizar uno de bootswatch, este es una coleccion de multiples temas basados y creados para bootstrap, denominado Minty, para ello utilizaremos el codigo de la aplicacion Notas pero sin el tema pesonalizado, les dejo un link con el codigo a continuacion:

Una vez descargado el archivo, extraigan el directorio en el PC y ya tenemos nuestra aplicacion lista para ser usada, nuestro primer paso sera ir al archivo package.json que esta en notas, dentro de este archivo modificaremos la seccion scripts de la siguiente manera:

  "scripts": {
    "start": "cross-env DEBUG=* node ./app.mjs",
    "server1": "cross-env DEBUG=* PORT=3001 node ./app.mjs",
    "server2": "cross-env DEBUG=* PORT=3002 node ./app.mjs",
    "dl-minty": "mkdir -p minty && npm run dl-minty-css && npm run dl-minty-min-css",
    "dl-minty-css": "wget https://bootswatch.com/4/minty/bootstrap.css -O minty/bootstrap.css",
    "dl-minty-min-css": "wget https://bootswatch.com/4/minty/bootstrap.min.css -O minty/bootstrap.min.css"
  },

Observen que agregamos tres lineas de script al final de la seccion las cuales comienzan con dl-minty, la primera se encargara de crear un directorio llamado minty en notas y luego llamara a los siguientes dos scripts, el segundo script se encarga de descargar el achivo bootstrap.css y lo guarda en el directorio minty con ese nombres y el tercero hace lo mismo pero con bootstrap.min.css, nuestro siguiente paso sera ejecutar el siguiente comando:

$ npm run dl-minty

Este hara todo lo comentado anteriormente y ya tendriamos listo nuestro tema pero todavia nos resta un par de temas mas para implementarlo, el primero sera ir al archivo app.mjs y buscaremos las siguientes lineas:

app.use('/assets/vendor/bootstrap', express.static(
        path.join(__dirname, 'node_modules', 'bootstrap','dist')));

Estas pueden comentarlas o eliminarlas, les sugiero la primera opcion, y a continuacion agregaremos las siguientes:

app.use('/assets/vendor/bootstrap/js', express.static(
        path.join(__dirname, 'node_modules', 'bootstrap', 'dist', 'js')));
app.use('/assets/vendor/bootstrap/css', express.static(
        path.join(__dirname, 'minty')));

Como «eliminamos» el bootstrap debemos establecerlo a mano, para ello en las primeras dos lineas le especificaremos donde esta la parte de js de bootstrap, en las siguientes dos lineas le especificaremos cual es el css que debe utilizar, en este caso el de minty, este cambio es en lo referente a app.mjs pero ahora debemos pasar a nuestro siguiente cambio que es en el archivo header.hbs del directorio partials donde primero buscaremos esta linea:

<span class="navbar-text col">{{ title }}</span>

La cual modifficaremos de la siguiente manera:

<span class="navbar-text text-dark col">{{ title }}</span>

Este es para asignarle una nueva clase para que el texto sea oscuro y luego buscaremos la siguiente linea:

<a class="nav-item nav-link btn btn-light col-auto"

La cual modificaremos de la siguiente forma:

<a class="nav-item nav-link btn btn-dark col-auto"

Aqui modificaremos la clase del boton para que deje de ser claro y sea oscuro, veamos como quedo ahora nuestra pagina:

Si lo comparamos con el post anterior es notablemente mas rapido y sencillo, si tienen curiosidad por mas temas para bootstrap les dejo el link desde donde visualizarlos:

https://bootswatch.com/

Y como siempre antes de finalizar les dejo un link con todos los archivos del proyecto y los trabajados en este post:

En resumen, hoy hemos visto como podemos implemetar temas de terceros en bootstrap, como hacer los scripts para descargarlos en nuestra aplicacion, asi como implementarlo y por ultimo aplicarlo de una manera muy sencilla, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50