1.6. Creando temas para Bootstrap (Bootstrap 4, el manual oficial)

En Bootstrap 3, los temas se creaban redefiniendo el valor de las variables en los archivos LESS y añadiendo algo de código CSS propio. En Bootstrap 4, los temas se crean de una forma ligeramente diferente.

Los temas en Bootstrap 4 se crean con variables Sass, mapas Sass y código CSS propio. No existe una hoja de estilos especial para crear temas, como sucedía en Bootstrap 3. Se recomienda utilizar los archivos Sass incluidos en Bootstrap para reutilizar todas las variables, mapas y mixins que puedas.

1.6.1. Estructura de archivos

Siempre que puedas, no modifiques los archivos propios de Bootstrap. En su lugar, crea un archivo Sass nuevo e importa todos los archivos Bootstrap cuyos contenidos quieres modificar. Suponiendo que utilizas un gestor de paquetes como npm, la estructura de archivos será parecida a esta:

tu-proyecto/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Si has bajado los archivos de Bootstrap a mano, en vez de node_modules/ tendrás un directorio llamado bootstrap/ con los mismos contenidos.

1.6.2. Importando los estilos de Bootstrap

En el archivo custom.scss se definen todos los estilos propios de tu tema. Desde ese archivo puedes importar los archivos originales de Bootstrap. Puedes importar todo o solamente los archivos de aquellos componentes que necesites.

// Custom.scss
// Opción A: incluir todo Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Opción B: incluir solamente las partes de Bootstrap que necesites

// Siempre tienes que añadir estos tres archivos
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// El resto es opcional. Añade solo lo que necesites
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Ahora ya puedes modificar en custom.css el valor de cualquier variable o mapa de Sass definido por Bootstrap.

1.6.3. Valores por defecto de las variables de Bootstrap

Todas las variables Sass de Bootstrap 4 (que se definen en el archivo scss/_variables.scss) incluyen el valor !default para que puedas modificar sus valores sin tener que tocar los archivos originales de Bootstrap. Así que puedes redefinir fácilmente el valor de cualquier variable dentro del archivo CSS de tu tema.

Lo único que debes tener en cuenta es que debes redefinir el valor de las variables antes de importar los archivos de Bootstrap que utilizan esas variables. Por ejemplo, para cambiar los colores por defecto del elemento <body>, haz lo siguiente:

// Primero redefine el valor de las variables
$body-bg: #000;
$body-color: #111;

// Después importa los archivos de Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

1.6.4. Mapas

Bootstrap 4 también utiliza muchos mapas de Sass, que son pares clave-valor que guardan información relacionada, como por ejemplo los colores. Todos los mapas incluyen el valor !default, así que puedes redefinir sus valores igual que se ha explicado antes para las variables.

1.6.4.1. Modificando un mapa

Añade lo siguiente en tu hoja de estilos para modificar cualquier color del mapa $theme-colors:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

1.6.4.2. Añadiendo elementos a un mapa

Para añadir un nuevo color al mapa $theme-colors, haz lo siguiente:

$theme-colors: (
  "mi-color": #900
);

1.6.4.3. Eliminado elementos del mapa

Usa la función map-remove() para eliminar elementos de un mapa, como por ejemplo un color del mapa $theme-colors:

// No olvides importar esto antes de usar la función map-remove()
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

1.6.4.4. Claves obligatorias

Bootstrap supone que algunas determinadas claves de algunos determinados mapas siempre están definidas. Así que si eliminas alguna de esas claves, verás un mensaje de error.

Por ejemplo las claves primary, success y danger del mapa $theme-colors son obligatorias porque las usamos en los enlaces, botones, etc. Puedes modificar sus valores, pero si las eliminas, verás errores de compilación.

1.6.5. Funciones

Bootstrap define varias funciones Sass que te pueden facilitar la creación del tema. En primer lugar, existen tres funciones (color($key: "blue"), theme-color($key: "primary") y gray($key: "100")) para seleccionar colores:

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Otra función interesante es theme-color-level() que permite seleccionar el nivel o variedad de un mismo color (los niveles negativos crear colores más claros y los niveles positivos crean colores más oscuros):

.custom-element {
  // el primer argumento es el nombre del color; el segundo argumento es su nivel
  color: theme-color-level(primary, -10);
}

Por último, otra función útil es color-yiq(), que utiliza el espacio de color YIQ para devolver un color claro (#fff) u oscuro (#111) que consiga el máximo contraste respecto al color que se le pasa. Resulta ideal para seleccionar por ejemplo el mejor color de texto posible en función del color de fondo que se le pase:

.custom-element {
  color: color-yiq(#000); // en este caso devuelve '#fff'

  // también puedes pasar un color seleccionado a partir de un mapa
  // color: color-yiq(theme-color("dark"));
}

1.6.6. Opciones Sass

Las variables llamadas $rnable-* (que son nuevas en Bootstrap 4) permiten activar/desactivar globalmente algunas opciones CSS. Todas ellas las puedes encontrar en el archivo scss/_variables.scss de Bootstrap.

Variable	Posibles valores	Descripción
`$spacer`	`1rem` (por defecto) o cualquier valor positivo	Define el espaciado base que se utiliza para generar todos los demás espaciados (como se verá más adelante)
`$enable-rounded`	`true` (por defecto) o `false`	Aplica el `border-radius` por defecto en varios componentes
`$enable-shadows`	`true` o `false` (por defecto)	Aplica el `box-shadow` por defecto en varios componentes
`$enable-gradients`	`true` o `false` (por defecto)	Aplica los gradientes por defecto mediante `background-image` en varios componentes
`$enable-transitions`	`true` (por defecto) o `false`	Aplica el `transition` por defecto en varios componentes
`$enable-hover-media-query`	`true` o `false` (por defecto)	Esta opción ya no se utiliza
`$enable-grid-classes`	`true` (por defecto) o `false`	Genera las clases CSS relacionadas con la rejilla (`.container`, `.row`, `.col-md-1`, etc.)
`$enable-caret`	`true` (por defecto) o `false`	Enables pseudo element caret on `.dropdown-toggle`.
`$enable-print-styles`	`true` (por defecto) o `false`	Genera los estilos CSS para que se vea bien la página al imprimirla
`$enable-validation-icons`	`true` (por defecto) o `false`	Muestra iconos mediante `background-image` en los campos de formulario para mostrar su estado

1.6.7. Color

Todos los colores que utiliza Bootstrap 4 se definen en un mapa Sass dentro del archivo scss/_variables.scss. En próximas versiones este mapa se va a dividir en varios para crear paletas de colores, tal y como sucede hoy en día con la paleta de grises.

$blue

$indigo

$purple

$pink

$red

$orange

$yellow

$green

$teal

$cyan

Para utilizar estos colores en tu hoja de estilos:

// puedes indicar el nombre de la variable directamente...
.alpha { color: $purple; }

// ...y también puedes obtener el color mediante la función `color()`
.beta { color: color("purple"); }

1.6.7.1. Los colores base del tema

De todos los colores anteriores, Bootstrap selecciona unos pocos y genera una paleta especial que es la que se utiliza en el tema. Esta paleta también define variables para que puedas utilizarla en tus propios temas.

$primary

$secondary

$success

$danger

$warning

$info

$light

$dark

1.6.7.2. Paleta de grises

Debido a la popularidad de los grises en el diseño web, Bootstrap define una paleta de colroes especial con varios tonos de grises.

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-000

1.6.8. Componentes

La mayoría de componentes de Bootstrap se basan en un estilo base (ej. .btn) que se modifica para crear diversas variantes (ej. .btn-danger, .btn-primary, etc.) El nombre de esas variantes se crea a partir de los nombres de los colores del tema (definidos en el mapa $theme-colors).

Por ejemplo, así se generan las variantes del componente .alert:

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

Además de los colores, Bootstrap también utiliza los valores del mapa $grid-breakpoints para generar estilos alternativos para cada tamaño de dispositivo, desde móviles pequeños hasta ordenadores grandes.

1.6.9. Variables CSS

Bootstrap 4 define (dentro del archivo _root.scss) las siguientes variables CSS para que puedas modificar fácilmente en el propio navegador valores comunes como los colores del tema, los puntos de ruptura, las fuentes, etc.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Las variables CSS ofrecen una flexibilidad parecida a las variables Sass, pero con la ventaja de que puedes cambiar sus valores dinámicamente en el propio navegador, sin tener que recompilar tus estilos. Ejemplo:

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

El único lugar en el que no se pueden usar estas variables CSS es en las instrucciones @media:

/* esto NO FUNCIONA en Bootstrap 4 */
@media (min-width: var(--breakpoint-sm)) {
  /* ... */
}