Continuando con la personalización de Bootstrap dentro de Laravel quisiera mostrarles una segunda forma de hacerlo, la cual requiere tener conocimientos en el manejo de Sass ya que Bootstrap 4 lo utiliza como preprocesador CSS. Existen numerosas ventajas al utilizar esta herramienta como por ejemplo la re-utilización de código y la mejor organización de las hojas de estilo lo que permite que nuestro proyecto escale de mejor forma. Veamos cómo trabajar de esta manera:
Requisitos
Para personalizar Bootstrap haremos uso del preprocesador CSS Sass, que viene incluido por defecto en Laravel.
Si no estás familiarizado con el uso de Sass, en Styde contamos con un excelente curso que nos muestra su funcionamiento: Curso de Sass
Adicionalmente, es necesario conocer acerca de Laravel Mix, el cual se encuentra implementado dentro de Laravel desde su versión 5.5.
Puedes conocer más acerca del tema en Compila JS y CSS con Laravel Mix y Instalación y configuración de Laravel Mix
Preparación del proyecto
Para empezar a trabajar debemos instalar todas las dependencias frontend que trae por defecto Laravel y que son suficientes para el propósito de este tutorial.
En este caso utilizaremos la instalación con la que trabajamos en el post anterior: https://www.styde.net/personalizar-bootstrap-4-en-laravel-sobrescribiendo-sus-clases.
Para ello nos ubicamos en nuestra terminal dentro del directorio de nuestro proyecto de Laravel y ejecutamos el comando npm install.
La instalación de todos los paquetes puede durar un tiempo dependiendo de la conexión a Internet que poseas.
Puedes revisar cuáles son todos los paquetes que trae Laravel para trabajar el frontend en el archivo package.json que se instalan al ejecutar el comando.
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.17"
}
Si estas siguiendo usando el proyecto del ejemplo anterior https://styde.net/personalizar-bootstrap-4-en-laravel-sobrescribiendo-sus-clases debes desabilitar el llamado del archivo custom.css en app.blade.php.
Una vez finalizado, nos ubicamos nuevamente en la terminal y ejecutamos el comando npm run watch. Este comando viene con Laravel Mix y se encarga de transpilar los archivos CSS y JS que se encuentran en el directorio resources y lleva la versión transpilada al directorio public.
Además, este comando mantiene la terminal en un estado de observación esperando por cambios en cualquiera de los archivos JS y CSS asociados para realizar el proceso de transpilación nuevamente.
Puede ver todos los comandos disponibles para ejecutar en el archivo
package.jsonen el objeto descripts
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
}
Personalizar Bootstrap
Ahora bien, si abrimos el archivo _variables.scss que se encuentra en el directorio resources/sass/_variables.scss podemos notar que ya existen una serie de variables predefinidas. Estas corresponden a las variables que por defecto Laravel establece sobre Bootstrap para de esta forma mostrarlo de manera más personalizada.
// Body $body-bg: #f8fafc; // Typography $font-family-sans-serif: "Nunito", sans-serif; $font-size-base: 0.9rem; $line-height-base: 1.6; // Colors $blue: #3490dc; $indigo: #6574cd; $purple: #9561e2; $pink: #f66D9b; $red: #e3342f; $orange: #f6993f; $yellow: #ffed4a; $green: #38c172; $teal: #4dc0b5; $cyan: #6cb2eb;
Cabe destacar, que aparte de ya traer variables para los colores, también muestra variables para el manejo de las tipografías y el color de fondo de body. Tú puedes agregar en este archivo tus propias variables Sass y utilizarlas en el proyecto.
El llamado de _variables.scss puede verse reflejado en el archivo app.scss ubicado en el directorio resources/sass/app.scss. Allí por ejemplo, podemos ver el llamado de la clase navbar-laravel que muestra un color de fondo blanco y una sombra con un color negro que maneja una opacidad de 0.04.
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
.navbar-laravel {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
Por ahora, probemos cambiando el color de fondo de navbar-laravel por cualquiera de las variables ya definidas en el archivo _variables.scss.
.navbar-laravel {
background-color: $teal;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
Esto, traerá como resultado un cambio en el color de fondo de la barra de navegación. Podemos verlo si accedemos al enlace de Login o Register.
Ya vimos cómo cambiar el diseño que trae por defecto la barra de navegación que nos muestra Laravel, sin embargo, veamos ahora cómo podemos modificar las variables que trae Bootstrap en su núcleo.
Si indagamos un poco dentro de la documentación de Bootstrap, podemos notar que frecuentemente hacen uso de varias clases para hacer referencia a los colores: primary, secondary, success, info, warning, danger, light y dark.
Los colores CSS correspondientes a cada uno son los siguientes:
primary: #007bff; secondary: #6c757d; success: #28a745; info: #17a2b8; warning: #ffc107; danger: #dc3545; light: #f8f9fa; dark: #343a40;
Esto puede verse con mayor claridad en el llamado de las variables CSS en los archivos core de Bootstrap que se encuentran en el directorio node_modules/bootstrap/scss/_variables.scss
$primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-800 !default;
Ahora bien, la forma más rápida de personalizar estas variables sería declararlas en nuestro archivo de variables y ponerles el color que deseamos según sea el caso.
Por ejemplo, vamos a agregar los siguientes colores:
$primary: #0cbdc4; $secondary: #044a4d; $success: #059117; $info: #079fb9; $warning: #9b8c04; $danger: #960f0a; $light: #bdbebe; $dark: #1e1e1f;
Ahora procedamos a cambiar el color de los textos que trae por defecto Bootstrap. La variable que se encarga de manejar esto se llama $body-color y solo es necesario ubicarla en nuestro archivo _variables.scss y ponerle el color que sea de nuestro agrado.
Ahora si quisiéramos cambiar el tamaño de fuente por defecto que trae Bootstrap el cual corresponde a 1rem lo que es equivalente a 16px solo es necesario agregar en nuestro archivo de variables $font-size-base y cambiar su valor.
Agregando nuestras variables personalizadas en nuestro archivo _variables.scss :
$primary: #0cbdc4; $secondary: #044a4d; $success: #059117; $info: #079fb9; $warning: #9b8c04; $danger: #960f0a; $light: #bdbebe; $dark: #1e1e1f; $body-color: #a3a393; $font-size-base: 1.2rem;
Y dirigiéndonos por ejemplo al Login de nuestro proyecto, podremos ver el cambio.
De esta forma, podemos personalizar el framework Bootstrap que trae Laravel en su instalación e ir adaptando los colores, tamaños y demás elementos que posee el framework para que se muestre como queremos.
Material relacionado
- Agregar estilos de Bootstrap 4 al formulario en Laravel
- Compila JS y CSS con Laravel Mix
- Curso de Sass
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
