Node.js / Personalizando una build de bootstrap

Bienvenidos sean a este post, hoy veremos una curiosidad sobre bootstrap.

Una buena razon para utilizar bootstrap, mas alla de lo visto en los posts anteriores que fue la posibilidad de poder transformar a nuestra aplicacion en una mas responsiva para adaptarse mas rapidamente a los distintos tipos de pantalla de dispositivos, es la posibilidad que nos permite personalizar su build facilmente permitiendo que modifiquemos el tema predeterminado por otro, si bien mediante stylesheet.css se puede hacer pero es mas recomendable y efectivo hacerlo mediante bootstrap, como los stylesheet son construidos mediante una descripcion dentro del archivo package.json, esto implica que la personalizacion de un build de bootstrap primero descarga el arbol del codigo fuente, trabaja las modificaciones, para finalmente usar el comando npm run dist para construir la distribucion pero sobre esto hablaremos al final.

Como bootstrap usa SASS, este es un preprocesador de CSS usado para facilitar el desarrollo de CSS, este posee un archivo (scss/_variables.scss) que contiene variables que usaremos en el resto de los archivos .scss en bootstrap donde si modificamos algunas de estas afectara automaticamente al resto de bootstrap, para comenzar con este tema vamos a utilizar el codigo que trabajamos en el post anterior, en caso de no poseerlo les dejo un link para descargarlo:

Una vez descargado el archivo simplemente extraigan el directorio en el pc y ya tenemos nuestra aplicacion lista para usar, nuestro primer paso sera ingresar al directorio notas y en este crearemos un nuevo directorio con el nombre de theme, ahora tenemos dos posibilidades:

• descargar manualmente el arbol del codigo fuente desde github
• utilizar un script para hacer esto

Si bien al bajar bootstrap mediante npm nos descarga SASS pero no lo aplica del todo bien y por esta razon usaremos la segunda opcion y para ello deben ingresar al directorio creado y crearemos un nuevo archivo con el nombre de package.json y a este archivo le agregaremos el siguiente codigo:

theme/package.json

{
  "scripts" : {
    "download": "wget -O - https://github.com/twbs/bootstrap/archive/v4.6.2.tar.gz | tar xvfz -",
    "postdownload" : "cd bootstrap-4.6.2 && npm install"
  }
}

Este tendra dos scripts basicos, el primero sera para descargar todo el codigo fuente de bootstrap en este nuevo directorio, esto lo haremos simplemente con wget y luego tenemos otro que se ejecutara inmediatamente despues de finalizar la descarga para ello ingresara al directorio y ahi ejecutara el comando npm install, con esto comentado pasemos a ejecutarlo y para ello en el directorio theme ejecutaremos el siguiente comando:

$ npm run download

Como dijimos anteriormente comenzara a descargarlo y una vez finalizada la descarga procede a instalarlo mediante postdownload, este puede entregar unas notificaciones pero no deberia devolver ningun error y cuando devuelva el prompt debemos volver al archivo package.json y lo modificaremos de la siguiente manera:

{
  "scripts" : {
    "download": "wget -O - https://github.com/twbs/bootstrap/archive/v4.6.2.tar.gz | tar xvfz -",
    "postdownload" : "cd bootstrap-4.6.2 && npm install",
    "clean": "rm -rf bootstrap-4.6.2",
    "build": "cd bootstrap-4.6.2 && npm run dist",
    "watch": "cd bootstrap-4.6.2 && npm run watch"
  }
}

En este caso creamos tres nuevos scripts que realizaran las siguientes tareas:

• clean, esta se encargara de eliminar el directorio que descargamos con el script download
• build, este se encarga de «construir» nuestro modulo bootstrap
• watch, este establece un proceso automatico que escanea los archivos y en caso de existir cambios procede a recompilarlo

Pero antes de continuar necesitamos crear un nuevo archivo en el directorio theme con el nombre de .gitignore y le agregaremos la siguiente linea:

theme/.gitignore

bootstrap-4.*

Este se encargara de evitar que el codigo fuente de bootstrap este en nuestro repositorio de git, porque no es necesario tener el codigo fuente de terceros especialmente desde que lo tenemos definido en nuestro archivo json, nuestro siguiente paso sera ejecutar el siguiente comando:

$ npm run build

Como mencionamos anteriormente este se encargara de construir nuestra aplicacion, este proceso tomara un tiempo y deberia terminarlo sin devolver algun error pero puede devolver algunas notificaciones sobre elementos deshechados, esto generara algunos elementos y otros directorios que no estan en el codigo fuente, entre todos los archivos que necesitamos nos debemos centrar en dos:

• bootstrap.scss, el cual se encarga de importar todos lo necesario
• _variables.scss, como mencionamos anteriormente contiene todas las variables predeterminadas

Hablemos primero sobre bootstrap.scss, como mencionamos esta importa todo lo necesario ya sea desde archivos hasta modulos, veamos como es el predeterminado ubicado en scss:

bootstrap-4.6.2/scss/bootstrap.scss

/*!
 * Bootstrap v4.6.2 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

Nuestro siguiente paso sera copiar este archivo desde su ubicacion al directorio theme, una vez copiado lo editaremos para agregar una nueva linea:

theme/bootstrap.scss

/*!
 * Bootstrap v4.6.2 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@import "custom";
@import "functions";
@import "variables";
.... resto del archivo

En este caso solo fue la linea resaltada, el resto debe quedar de la misma manera, esto lo usaremos para poder importar nuestro archivo personal, nuestro siguiente paso sera crearlo y para ello en theme deben crear un archivo con el nombre de _custom.scss y agregar el siguiente codigo:

theme/_custom.scss

$white: #fff !default;
$gray-900: #212529 !default;
$body-bg: $gray-900 !default;
$body-color: $white !default;

En este caso definimos algunas variables que sobreescribiran a las que se encuentran en _variables.scss y esto gracias al parametro !default que introducimos aqui y se encuentra en el archivo mencionado anteriormente, con esto tenemos dos archivos por fuera del codigo fuente de bootstrap pero ahora veremos porque necesitamos esto, nuestro siguiente paso sera ir al archivo package.json y lo modificaremos de la siguiente manera:

package.json

{
  "scripts" : {
    "download": "wget -O - https://github.com/twbs/bootstrap/archive/v4.6.2.tar.gz | tar xvfz -",
    "postdownload" : "cd bootstrap-4.6.2 && npm install",
    "clean": "rm -rf bootstrap-4.6.2",
    "build": "cd bootstrap-4.6.2 && npm run dist",
    "prebuild": "cp _custom.scss bootstrap.scss bootstrap-4.6.2/scss",
    "postbuild": "mkdir -p dist && cp -r bootstrap-4.6.2/dist .",
    "watch": "cd bootstrap-4.6.2 && npm run watch"
  }
}

En este caso agregamos dos scripts nuevos, los cuales se ejecutaran antes de build (prebuild) y otro despues de build (postbuild), en el caso de prebuild copiaremos nuestros archivos creados anteriormente en el directorio scss del codigo fuente de bootstrap, reemplazado a uno y agregando el otro, y para el caso de postbuild crea un directorio llamado dist en theme y copiara todo el contenido del dist del codigo fuente en el directorio anteriormente creado, con esto comentado nuestro siguiente paso sera volver a ejecutar el siguiente comando:

$ npm run build

Pero a diferencia de la compilacion anterior ejecutara los dos scripts que agregamos anteriormente, una vez que termine el directorio nos quedara de la siguiente manera:

$ ls -l
total 20
drwxr-xr-x 10 tinchicus tinchicus 4096 nov 27 22:29 bootstrap-4.6.2
-rw-r--r--  1 tinchicus tinchicus  936 nov 27 19:45 bootstrap.scss
-rw-r--r--  1 tinchicus tinchicus  113 nov 27 19:44 _custom.scss
drwxr-xr-x  4 tinchicus tinchicus 4096 nov 28 00:14 dist
-rw-r--r--  1 tinchicus tinchicus  458 nov 27 23:40 package.json
$

Nota:
Tengan en cuenta que las versiones se iran actualizando asi que adecuenlo a la del momento.

Con esto ya tenemos nuestro «tema» creado, nuestro siguiente paso sera implementarlo y para ello debemos hacer algunas modificaciones en nuestra aplicacion, la primea sera en el archivo app.mjs donde comentaremos o borraremos las siguientes dos lineas:

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

Y las reemplazaremos o agregaremos estas:

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

En este caso reapuntamos nuestro bootstrap al que creamos durante este post, la siguiente modificacion sera en el achivo index.hbs en el directorio views donde buscaremos la siguiente linea:

<a class="btn btn-lg btn-block btn-outline-dark"
        href="/notas/ver?clave={{ clave }}">{{ titulo }}</a>

De la siguiente manera:

<a class="btn btn-lg btn-block btn-outline-light"
        href="/notas/ver?clave={{ clave }}">{{ titulo }}</a>

Como pueden ver solamente cambiamos el tema que teniamos originalmente y el resto quedo de la misma forma, nuestra siguiente modificacion sera en el archivo vistanota.hbs en el directorio views y tomaremos el siguiente segmento de codigo:

<a class="btn btn-outline-dark"
        href="/notas/borrar?clave={{clavenota}}"
        role="buutton">Borrar</a>
<a class="btn btn-outline-dark"
        href="/notas/editar?clave={{clavenota}}"
        role="button">Editar</a>

Y lo modificaremos de la siguiente manera:

<a class="btn btn-outline-light"
        href="/notas/borrar?clave={{clavenota}}"
        role="buutton">Borrar</a>
<a class="btn btn-outline-light"
        href="/notas/editar?clave={{clavenota}}"
        role="button">Editar</a>

Al igual que en el caso anterior solamente cambiamos la clase que aplicaremos al boton, con esto comentado procedamos a ejecutarlo y ver como quedo con todas estas modificaciones

Se ajusto a los valores que informamos en _custom.scss y la modificacion de los botones fue por esta razon, por ultimo debemos limpiar el codigo fuente de nuestro proyecto y para ello debemos ir al directorio theme y ejecutar el siguiente comando:

$ npm run clean

Esto limpiara todo el directorio donde descargamos el codigo fuente de bootstrap dado que no es necesario porque como comentamos anteriormente tenemos el archivo package.json para descargarlo nuevamente en caso de ser necesario, y a partir de ahora si queremos realizar modificaciones en los temas o estilos de nuestra aplicacion debemos modificar el archivo _custom.scss y volver a compilarlo o construirlo mediante el npm y nuestro archivo package.json, antes de finalizar recuerden que se va actualizando y tengan en cuenta las distintas versiones que pueden surgir o actualizarse y para finalizar les dejo un archivo con todos los codigos del proyecto y los codigos finales trabajados en este post:

En resumen, hoy hemos visto como personalizar a nuestro bootstrap, desde como descargarlo hasta como construirlo, vimos un procedimiento para poder personalizar algunos valores de las variables y al momento de construirlo nuevamente se modifico, y dejando finalmente un archivo donde podemos modificar nuevamente a bootstrap todas las veces que necesitemos, 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.