() translation by (you can also view the original English article)
Y así, finalmente llegamos al último tutorial de la serie, que te mostrará cómo crear conjuntos de colores personalizados.
Si recuerdas el principio, cuando estábamos pasando por los grandes cambios, mencioné que los autores de BS habían proporcionado un archivo adicional para hacer que BS3 se pareciera a BS2, en lugar de usar su aspecto plano.
A lo largo de esta serie, hemos usado el aspecto plano predeterminado de BS3, pero si descargas la versión preconstruida de JavaScript de BS3 del sitio web de Bootstrap, encontrarás un nuevo archivo dentro del archivo que descargas llamado bootstrap-theme.css.
Si enlazas este archivo en tu proyecto inmediatamente después de incluir el archivo bootstrap.css del núcleo, verás que aunque ahora estés usando el nuevo BS3, el aspecto de tu aplicación sigue siendo parecido al BS2.
Los autores se dieron cuenta de que una de las principales barreras para la adopción de BS3 en las nuevas aplicaciones era la imposibilidad de darle un estilo personalizado, pero con facilidad.
Si eras un usuario de LESS, o incluso de Sass (ya que el BS3 tiene ahora enlaces con Sass), entonces esto no era un problema. Simplemente abriste las fuentes de LESS, ajustaste las variables y mixins que necesitabas, y ejecutaste las cosas a través del compilador LESS para obtener tu nuevo script CSS.
Desafortunadamente, no todos usaron LESS; de hecho, muchos desarrolladores y diseñadores solo tenían la capacidad de descargar e incluir los viejos archivos CSS y JavaScript precompilados, así que había que encontrar una forma mejor.
El primer cambio fue abrir todas las fuentes de Less a una herramienta de personalización de la página directamente en el sitio principal de Bootstrap, pero esto no es nuevo; antes podías usar esta página de forma limitada Sin embargo, con BS3, la herramienta de personalización Less ha sido completamente revisada, y ahora puedes redefinir todo lo que utiliza BS3, desde los tamaños de fuente y los tipos de letra, hasta los tamaños de cuadrícula, puntos de activación y conjuntos de colores contextuales básicos.
De hecho, ahora no hay nada que no pueda ser cambiado antes de que decidas descargar tu nuevo CSS personalizado, como muestra la siguiente imagen:
Debido al tamaño de la herramienta, es imposible mostrarlo todo en este tutorial, pero es bastante fácil de acceder. Solo tienes que ir a la página web de Bootstrap y hacer clic en Customize (Personalizar) en la barra de menú superior. También verás que tienes muchas otras opciones, como qué plugins y kits de herramientas de JavaScript incluir, qué componentes incluir y el estilo base que no quieras.
Por ejemplo, si todo lo que quieres usar es el sistema de cuadrículas, y nada más, entonces puedes simplemente seleccionar solo el sistema de cuadrículas, y deseleccionar todos los demás componentes.
El sitio BS3 generará entonces solo el código requerido para incluir, y nada más. Esto es una ventaja para aquellas personas que se quejan de que todos los sitios de Bootstrap se ven igual, porque significa que tu sitio no tiene por qué verse igual al resto: puedes usar los bits que necesites y usar tus propias cosas para todo lo demás.
Hay otras dos maneras en las que puedes personalizar tu construcción. La primera es tomar la hoja de estilo CSS adicional "bootstrap-theme", hacer una copia, y luego cambiar los estilos según te parezca. Esto no es tan fácil como usar las herramientas de personalización, pero tampoco es tan difícil como la alternativa.
La mayoría de los nombres de clase y ajustes que querrás cambiar para estampar tu marca personal en BS3 ya están separados en el tema BS2, por lo que la forma más rápida de experimentar es simplemente armar una página de prototipos con los principales controles y elementos que quieres cambiar, y luego enlazarla en tu copia del tema BS2.
Si estás usando Node y algo como Bower, se hace aún más fácil, porque puedes usar la recarga en vivo, y luego solo tienes que ver cómo cambia la página de muestra casi en tiempo real mientras ajustas tu versión personalizada de la hoja de temas.
La segunda forma es un poco más complicada, y como se describe en los documentos de la BS3, viene en dos sabores: personalizaciones ligeras y personalizaciones pesadas.
Un ejemplo de personalización de la luz es añadir una clase de color contextual al elemento botón. Por ejemplo, si deseas añadir btn-sky junto con las clases btn-info, btn-primaria, etc., puedes definir una única hoja de estilo que contenga las siguientes reglas:
1 |
.btn-sky, .btn-sky:hover, .btn-sky:active |
2 |
{
|
3 |
color: #000000; |
4 |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 2); |
5 |
background-color: #AAD4FF; |
6 |
border: 1px solid black; |
7 |
}
|
8 |
|
9 |
.btn-sky
|
10 |
{
|
11 |
background-repeat: repeat-x; |
12 |
background-image: linear-gradient(top, #00FFFF 0%, #FFFF00 100%); |
13 |
}
|
14 |
|
15 |
.btn-sky:hover |
16 |
{
|
17 |
background-position: 0 -10px; |
18 |
}
|
Cuando se agrega y se enlaza correctamente, debería verse algo así:
Cuando se usa con una etiqueta de botón normal de la siguiente manera:
1 |
<button class="btn btn-sky">My Sky Button</button> |
La parte más difícil de usar este método es pasar por las hojas de estilo CSS de base para encontrar los nombres que deseas anular; no es exactamente difícil, solo largo.
Una vez que tengas uno como el botón de arriba, o hayas encontrado y copiado una alerta, un panel, una lista u otra clase, entonces puedes hacer fácilmente una plantilla que puede ser reutilizada siempre que quieras añadir una clase personalizada de ese tipo.
Las personalizaciones pesadas no son muy diferentes de las personalizaciones ligeras; la mayor diferencia es que se anula toda la clase.
Así, por ejemplo, encuentras todas las clases relacionadas con btn, las copias, las modificas y las incluyes por separado.
La nueva arquitectura dentro del framework del BS3 significa que una vez que conoces a los selectores de objetivo, y a sus hermanos, crear una anulación es fácil. Como ya he señalado, el archivo temático de bootstrap ya contiene mucho de lo que podrías querer modificar de todos modos, y si eso no es una opción, entonces prueba sitios como Bootswatch.com:
Muchos otros tienen miles de temas para elegir, tanto gratuitos como de pago, así que no hay excusa para que tu sitio Bootstrap tenga el mismo aspecto que los demás.
Conclusión
Espero que hayas disfrutado de esta serie y que te ayude a ser un mejor desarrollador usando Bootstrap 3. En este nuevo mundo de diseño web sensible, BS3 es un framework que no debe tomarse a la ligera, representa una gran cantidad de investigación de una de las mayores empresas de medios sociales existentes, y se utiliza para impulsar la mayoría de sus sitios de cara al público.
Si quieres contactarme y hacerme alguna pregunta sobre el libro, generalmente me pueden encontrar en Twitter como @shawty_ds. También puedes encontrarme generalmente en LinkedIn, o en el grupo de usuarios de Linked.NET (Lidnug) que ayudo a dirigir allí.
Hasta la próxima vez, mantén la calma y sigue adelante.
Este tutorial representa un capítulo de Bootstrap 3 Succinctly, un libro electrónico gratuito del equipo de Syncfusion.
