Personalización de la plantilla CSS Bootstrap

Recién estoy comenzando con Bootstrap de Twitter y me pregunto cuáles son las 'mejores prácticas' para la personalización. Quiero desarrollar un sistema que aproveche todo el poder de una plantilla CSS (Bootstrap u otro), sea completa (y fácilmente) modificable, sea sostenible (es decir, cuando la próxima versión de Bootstrap sea lanzada desde Twitter, no ' No tengo que empezar de nuevo.

Por ejemplo, quiero agregar imágenes de fondo a la navegación superior. Parece que hay 3 formas de hacerlo:

1. Modifique las clases .topbar en bootstrap.css. No me gusta esto particularmente porque tendré muchos elementos .topbar y no necesariamente quiero modificarlos todos de la misma manera.
2. Crear nuevas clases con mis imágenes de fondo y aplicar ambos estilos (el nuevo y el bootstrap a mi elemento). Esto puede crear conflictos de estilo, que podrían evitarse eliminando la clase .topbar en clases separadas y luego solo usando las piezas que mi clase personalizada no pisa. Nuevamente, esto requiere más trabajo del que creo que debería ser necesario y, si bien es flexible, no me permitirá actualizar fácilmente bootstrap.css cuando Twitter publique la próxima entrega.
3. Utilice variables en .LESS para lograr la personalización. A primera vista, esto parece un buen enfoque, pero no habiendo usado .LESS me preocupa la compilación de CSS en el cliente y la sostenibilidad del código.

Aunque estoy usando Bootstrap, esta pregunta se puede generalizar a cualquier plantilla css.

Gracias de antemano por la entrada.

Lo mejor que puedes hacer es.

1. Bifurque twitter-bootstrap desde github y clone localmente.

están cambiando muy rápidamente la biblioteca / marco (divergen internamente. Algunos prefieren la biblioteca, yo diría que es un marco, porque cambia su diseño desde el momento en que lo carga en su página). Bueno ... la bifurcación / clonación le permitirá obtener fácilmente las próximas versiones nuevas.

2. No modifique el archivo bootstrap.css

Te va a complicar la vida cuando necesites actualizar bootstrap (y tendrás que hacerlo).

3. Cree su propio archivo css y sobrescríbalo siempre que desee material de arranque original

si establecen una barra superior con, digamos, color: black;pero la quieres blanca, crea un nuevo selector muy específico para esta barra superior y usa esta regla en la barra superior específica. Para una mesa, por ejemplo, lo sería <table class="zebra-striped mycustomclass">. Si declara su archivo css después bootstrap.css, esto sobrescribirá lo que quiera.

Actualización 2019 - Bootstrap 4

Estoy revisando esta pregunta de personalización de Bootstrap para 4.x, que ahora utiliza SASS lugar de LESS. En general, hay 2 formas de personalizar Bootstrap ...

1. Anulaciones de CSS simples

Una forma de personalizar es simplemente usar CSS para anular Bootstrap CSS. Para facilitar el mantenimiento, las personalizaciones de CSS se colocan en un custom.cssarchivo separado , de modo que bootstrap.cssno se modifique . La referencia a lo custom.csssiguiente después del bootstrap.csspara que las anulaciones funcionen ...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Simplemente agregue los cambios necesarios en el CSS personalizado. Por ejemplo...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

Antes ( bootstrap.css)

Después (con custom.css)

Al realizar personalizaciones, debe comprender la especificidad de CSS . Anula la custom.cssnecesidad de utilizar selectores que sean tan específicos comobootstrap.css .

Tenga en cuenta que no es necesario utilizar !importantel CSS personalizado, a menos que esté anulando una de las clases de la utilidad Bootstrap . La especificidad de CSS siempre funciona para que una clase de CSS anule a otra.

2. Personalizar usando SASS

Si está familiarizado con SASS (y debería usar este método), puede personalizar Bootstrap con el suyo custom.scss. Hay una sección en los documentos de Bootstrap que explica esto, sin embargo, los documentos no explican cómo utilizar las variables existentes en su custom.scss. Por ejemplo, cambiemos el color de fondo del cuerpo a #eeeeee, y cambiemos / anulemos el color primarycontextual azul a la $purplevariable de Bootstrap ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Esto también funciona para crear nuevas clases personalizadas . Por ejemplo, aquí añado purplea los colores del tema que crea toda la CSS para btn-purple, text-purple, bg-purple, alert-purple, etc ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

¡Con SASS debes @importar bootstrap después de las personalizaciones para que funcionen! Una vez que SASS se compila en CSS ( esto debe hacerse usando un compilador de SASS node-sass, gulp-sass, npm webpack, etc. ), el CSS resultante es el Bootstrap personalizado. Si usted es no familiarizado con SASS, puede personalizar Bootstrap usando una herramienta como esta constructor de temas que he creado.

Demostración personalizada de Bootstrap (SASS)

Nota: a diferencia de 3.x, Bootstrap 4.x no ofrece una herramienta de personalización oficial . Sin embargo, puede descargar la cuadrícula solo CSS o usar otra herramienta de compilación personalizada 4.x para reconstruir Bootstrap 4 CSS como desee.

Relacionado:
Cómo extender / modificar (personalizar) Bootstrap 4 con SASS
¿Cómo cambiar el color primario de Bootstrap ?
Cómo crear un nuevo conjunto de estilos de color en Bootstrap 4 con sass
Cómo personalizar Bootstrap

Creo que la forma oficialmente preferida ahora es usar Less, y anular dinámicamente bootstrap.css (usando less.js), o volver a compilar bootstrap.css (usando Node o el compilador Less).

Desde el documentos de Bootstrap , aquí se explica cómo anular los estilos de bootstrap.css dinámicamente:

Descargue la última versión de Less.js e incluya la ruta (y Bootstrap) en el <head> .

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Para recompilar los archivos .less, simplemente guárdelos y vuelva a cargar su página. Less.js los compila y los almacena en el almacenamiento local.

O si prefiere compilar estáticamente un nuevo bootstrap.css con sus estilos personalizados (para entornos de producción):

Instale la herramienta de línea de comando LESS a través de Node y ejecute el siguiente comando:

$ lessc ./less/bootstrap.less > bootstrap.css

Desde la respuesta de Pabluez en diciembre, ahora hay una mejor manera de personalizar Bootstrap.

Uso: Bootswatch para generar su bootstrap.css

Bootswatch crea el Bootstrap de Twitter normal a partir de la última versión (lo que sea que instale en el directorio de arranque), pero también importa sus personalizaciones. Esto facilita el uso de la última versión de Bootstrap, mientras mantiene CSS personalizado, sin tener que cambiar nada sobre su HTML. Simplemente puede influir en los archivos boostrap.css.

Puede usar la plantilla de arranque de

http://www.initializr.com/

que incluye todos los archivos bootstrap .less. Luego puede cambiar las variables / actualizar los archivos que desee y compilará automáticamente el css. Al implementar, compile el archivo less en css.

En mi opinión, la mejor opción es compilar un archivo LESS personalizado que incluya bootstrap.less, un archivo personalizado de variables.less y sus propias reglas:

1. Clone bootstrap en su carpeta raíz: git clone https://github.com/twbs/bootstrap.git
2. Cambiarle el nombre a "bootstrap"
3. Cree un archivo package.json: https://gist.github.com/jide/8440609
4. Cree un Gruntfile.js: https://gist.github.com/jide/8440502
5. Crea una carpeta "menos"
6. Copie bootstrap / less / variables.less en la carpeta "menos"
7. Cambie la ruta de la fuente: @icon-font-path: "../bootstrap/fonts/";
8. Cree un archivo style.less personalizado en la carpeta "menos" que importa bootstrap.less y su archivo personalizado variables.less: https://gist.github.com/jide/8440619
9. correr npm install
10. correr grunt watch

Ahora puede modificar las variables de la forma que desee, anular las reglas de bootstrap en su archivo style.less personalizado, y si algún día desea actualizar bootstrap, ¡puede reemplazar toda la carpeta de bootstrap!

EDITAR: Creé un boilerplate de Bootstrap usando esta técnica: https://github.com/jide/bootstrap-boilerplate

Recientemente escribí una publicación sobre cómo lo he estado haciendo en Udacity durante los últimos años. Este método ha significado que pudimos actualizar Bootstrap cuando quisiéramos sin tener conflictos de fusión, trabajo descartado, etc., etc.

La publicación profundiza más con ejemplos, pero la idea básica es:

• Mantenga una copia impecable de bootstrap y sobrescríbala externamente.
• Modifique un archivo (bootstrap's variables.less) para incluir sus propias variables.
• Haga que su archivo de sitio incluya @include bootstrap.less y luego sus anulaciones.

Esto significa usar MENOS, y compilarlo en CSS antes de enviarlo al cliente (del lado del cliente MENOS si es meticuloso, y generalmente lo evito) pero es EXTREMADAMENTE bueno para la capacidad de mantenimiento / actualización, y obtener la compilación MENOS es realmente muy fácil . El código de github vinculado tiene un ejemplo que usa gruñido, pero hay muchas formas de lograrlo, incluso GUI si eso es lo tuyo.

Con esta solución, su problema de ejemplo se vería así:

• Cambie el color de la barra de navegación con @ navbar-inverse-bg en sus variables.less (no bootstrap's)
• Agregue sus propios estilos de barra de navegación a su bootstrap_overrides.less, sobrescribiendo todo lo que necesite sobre la marcha.
• Felicidad.

Cuando llegue el momento de actualizar su bootstrap, simplemente cambie la copia de bootstrap prístina y todo seguirá funcionando (si bootstrap hace cambios importantes, deberá actualizar sus anulaciones, pero tendrá que hacerlo de todos modos)

La publicación del blog con un recorrido está aquí .

El ejemplo de código en github está aquí .

Use MENOS con Bootstrap ...

Aquí están los documentos de Bootstrap sobre cómo usar MENOS

(se han movido desde respuestas anteriores)