Bootstrap 3 sucintamente Personalizando Bootstrap 3

Y, finalmente, llegamos al último tutorial de la serie, que le mostrará cómo crear conjuntos de colores personalizados..

Si recuerdas al principio, cuando estábamos pasando por los cambios más importantes, 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 utilizado el aspecto plano predeterminado de BS3, pero si descarga la versión precompilada de BS3 de JavaScript desde el sitio web de Bootstrap, encontrará un nuevo archivo dentro del archivo que descargó llamado bootstrap-theme.css. 

Si vincula este archivo en su proyecto inmediatamente después de la inclusión del archivo bootstrap.css principal, descubrirá que a pesar de que ahora está utilizando el nuevo BS3, el aspecto de su aplicación sigue pareciéndose al de BS2..

Los autores se dieron cuenta de que una de las principales barreras para la adopción de BS3 en nuevas aplicaciones era la incapacidad de diseñarlo de forma personalizada, pero con facilidad..

Si era usuario de LESS, o incluso Sass (ya que BS3 ahora tiene enlaces Sass), esto no fue un problema. Simplemente abrió las fuentes LESS, modificó las variables y los Mixins que necesitaba, y corrió a través del compilador LESS para obtener su nuevo script CSS.

Desafortunadamente, no todos usaron MENOS; de hecho, muchos desarrolladores y diseñadores solo tenían la capacidad de descargar e incluir los archivos CSS y JavaScript precompilados y sencillos, por lo que había que encontrar una mejor manera.

El primer cambio fue abrir todas las fuentes Less a una herramienta de personalización en la página directamente en el sitio principal de Bootstrap, pero esto no es algo nuevo; Usted pudo usar esta página antes de una manera limitada. Sin embargo, con BS3, la herramienta de personalización Menos ha tenido una revisión completa, y ahora puede redefinir todo que usa BS3, desde los tipos de letra y las fuentes, hasta los tamaños de cuadrícula, los puntos de activación y los conjuntos de colores contextuales básicos.

De hecho, ahora no hay nada que no pueda cambiarse antes de que decida descargar su nuevo CSS personalizado, como muestra la siguiente imagen:

Captura de pantalla de la mitad superior de la nueva herramienta de personalización.

Debido al gran tamaño de la herramienta, es imposible mostrar todo en este tutorial, pero es bastante fácil de acceder. Simplemente vaya al sitio web de Bootstrap y haga clic Personalizar En la barra de menú superior. También verá que tiene muchas otras opciones, como los complementos de JavaScript y los kits de herramientas que debe incluir, los componentes que debe incluir y el estilo base que quizás no desee..

Por ejemplo, si todo lo que desea utilizar es el sistema de cuadrícula y nada más, simplemente puede seleccionar solo el sistema de cuadrícula y deseleccionar todos los demás componentes.

El sitio de BS3 generará solo el código requerido para incluir, y no más. Esto es una bendición para aquellas personas que se quejan de que todos los sitios de Bootstrap tienen el mismo aspecto, ya que significa que su sitio no tiene por qué ser igual que el resto; solo puede usar los bits que necesita y usar sus propias cosas para todo lo demas.

Hay otras dos formas en que puedes personalizar tu compilación. La primera es tomar la hoja de estilo CSS 'bootstrap-theme' adicional, hacer una copia y luego cambiar los estilos como mejor le 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 y configuraciones de clase que querrá cambiar para sellar su 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. desea cambiar, y luego vincular en su copia del tema BS2.

Si está usando Node y algo como Bower, se vuelve aún más fácil, ya que puede usar la recarga en vivo, luego simplemente observe cómo cambia su página de muestra casi en tiempo real a medida que ajusta su 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 BS3, viene en dos tipos: personalizaciones ligeras y personalizaciones pesadas.

Un ejemplo de una personalización ligera es agregar una clase de color contextual al elemento de botón. Por ejemplo, si quisieras agregar btn-sky junto al btn-info, btn-primaria, clases, etc., puede definir una sola hoja de estilo para contener las siguientes reglas:

.btn-sky, .btn-sky: hover, .btn-sky: active color: # 000000; text-shadow: 0 -1px 0 rgba (0, 0, 0, 2); color de fondo: # AAD4FF; borde: 1px negro sólido;  .btn-sky repetición de fondo: repetir-x; imagen de fondo: gradiente lineal (arriba, # 00FFFF 0%, # FFFF00 100%);  .btn-sky: hover background-position: 0 -10px; 

Cuando se agrega y se vincula correctamente, debería verse algo como esto: 

Salida del ejemplo de código, cuando se usa con el ejemplo de personalización

Cuando se usa con una etiqueta de botón normal de la siguiente manera:

Mi botón del cielo 

La parte más difícil de usar este método es ir a través de las hojas de estilo CSS básicas para encontrar los nombres que desea anular; No es exactamente difícil, solo tiene mucho aliento..

Una vez que tenga uno como el botón de arriba, o haya encontrado y copiado una alerta, un panel, una lista u otra clase, entonces puede crear fácilmente una plantilla que pueda reutilizarse cada vez que quiera agregar una clase personalizada. tipo.

Las personalizaciones pesadas no son muy diferentes de las personalizaciones ligeras; La principal diferencia es que anulas a toda la clase..

Así, por ejemplo, encuentras todas las clases relacionadas con btn, Cópialos, modifícalos e inclúyelos por separado..

La nueva arquitectura dentro del marco BS3 ahora significa que una vez que conozca los selectores de destino y sus hermanos, crear un reemplazo es fácil. Como ya he señalado, el archivo bootstrap-theme ya contiene mucho de lo que podría querer modificar de todos modos, y si esa no es una opción, pruebe sitios como Bootswatch.com:

Captura de pantalla del tema dulce y cereza de Bootswatch.com

Muchos otros tienen miles de temas para elegir, tanto gratuitos como de pago, por lo que no hay excusa para que su sitio de Bootstrap tenga el mismo aspecto que los demás..

Conclusión

Espero que haya disfrutado de esta serie y que le ayude a convertirse en un mejor desarrollador utilizando Bootstrap 3. En este nuevo mundo de diseño web sensible, BS3 es un marco que no debe tomarse a la ligera. Representa mucha investigación por parte de uno de los las mayores compañías de redes sociales que existen, y se utiliza para impulsar la mayoría de sus sitios públicos.

Si desea comunicarse conmigo y hacerme alguna pregunta sobre el libro, generalmente me pueden encontrar en Twitter como @shawty_ds. En general, también puedes encontrarme en LinkedIn o en el grupo de usuarios de Linked.NET (Lidnug) que ayudo a ejecutar allí..

Hasta la próxima, mantén la calma y continúa..

Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion.