Mejores prácticas de personalización de Twitter Bootstrap

Estoy trabajando con Bootstrap 2.0.3 usando LESS. Quiero personalizarlo extensamente, pero quiero evitar hacer cambios a la fuente siempre que sea posible ya que los cambios en las bibliotecas son frecuentes. Soy nuevo en LESS, así que no sé cómo funciona su comstackción. ¿Cuáles son algunas de las mejores prácticas para trabajar con marcos basados ​​en LESS o LESS?

Mi solución es similar a jstam, pero evito realizar cambios en los archivos fuente cuando sea posible. Dado que los cambios al bootstrap serán frecuentes, deseo poder desplegar la última fuente y realizar cambios mínimos manteniendo mis modificaciones en archivos separados. Por supuesto, no es completamente a prueba de balas.

  1. Copie bootstrap.less y variables.less en el directorio principal. Cambia el nombre de bootstrap.less a theme.less o lo que quieras. La estructura del directorio de tu directorio debería verse así:

    /Website theme.less variables.less /Bootstrap ... 
  2. Actualice todas las referencias en theme.less para apuntar al sub-directorio bootstrap. Asegúrese de que su variables.less se hace referencia desde el padre y no el directorio bootstrap de la siguiente manera:

     ... // CSS Reset @import "bootstrap/reset.less"; // Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "bootstrap/mixins.less"; // Grid system and page structure @import "bootstrap/scaffolding.less"; @import "bootstrap/grid.less"; @import "bootstrap/layouts.less"; 

  3. Agregue sus modificaciones de CSS en el archivo theme.less inmediatamente después de donde están incluidas.

     ... // Components: Nav @import "bootstrap/navs.less"; @import "bootstrap/navbar.less"; // overrides .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { border-radius: 0 0 0 0; padding: 10px; } .nav-tabs, .nav-pills { text-transform: uppercase; } .navbar .nav > li > a { text-shadow: none; } ... 
  4. Enlace a theme.less en lugar de bootstrap.less en sus páginas HTML.

Cada vez que sale una nueva versión, tus cambios deberían ser seguros. También debe hacer una diferencia entre sus archivos de arranque personalizados cada vez que sale una nueva versión. Las variables y las importaciones pueden cambiar.

Esto es algo con lo que he luchado también. Por un lado, quiero personalizar al máximo el archivo variables.less con mis propios colores y configuraciones. Por otro lado, quiero cambiar los archivos de Bootstrap un poco para facilitar el proceso de actualización.

Mi solución (por ahora) es crear un archivo LESS de complemento e insertarlo en el archivo bootstrap.less después de que se hayan importado las variables y mixins. Entonces algo como esto:

 ... // CSS Reset @import "reset.less"; // Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; // Custom Addons @import "addon-file.less"; // < --- My custom LESS addon // Grid system and page structure @import "scaffolding.less"; ... 

De esta forma, si quiero restablecer los colores de Bootstrap, las fonts o agregar mixins adicionales, puedo hacerlo. Mi código está separado pero se comstackrá dentro del rest de las importaciones de Bootstrap. No es perfecto, pero es una solución provisional que me ha funcionado bien.

Por mi parte, acabo de tener un archivo llamado theme.less con una importación de boostrap.less en él, y justo debajo anulo (incluso si parece ser malo usar LESS, pero bueno, es más fácil de mantener) el valor de la variable Quiero actualizar

Esto funciona bien para tener valores personalizados para variables en variables.less

Después de eso, compilo mi archivo theme.less lugar de bootstrap.less

Ejemplo theme.less :

 @import "path/to/my/bootstrap.less"; @linkColor: #MyAwesomeColor; 

Un enfoque mucho mejor (en mi humilde opinión) es inspirarse en el proyecto Bootswatch github llamado swatchmaker . Este proyecto está específicamente diseñado para la construcción y administración de docenas de temas de Bootstrap en el sitio web.

El Makefile en el proyecto crea swatchmaker.less (puede cambiarle el nombre a algo así como customizations.less ). Este archivo contiene un montón de importaciones:

 @import "bootstrap/less/bootstrap.less"; @import "swatch/variables.less"; @import "swatch/bootswatch.less"; @import "bootstrap/less/utilities.less"; 

Puede cambiar el nombre de la carpeta de swatch y de los archivos de bootswatch.less a lo que considere apropiado.

Esto tiene sentido ya que puede actualizar Bootstrap sin afectar sus propios archivos. De hecho, el Makefile también contiene comandos para recuperar la última versión de Bootstrap. Vea el archivo README en la página del proyecto para más.

Como .less archivo README también sugiere que instale la gem watchr que construirá automáticamente el proyecto cuando un archivo .less cambie.

Si (Y SÓLO SI) tiene tiempo, puede hacerlo como yo. Guardo mi propia versión modificada del (de los) marco (s) y con cada actualización del marco de trabajo leo los documentos y verifico el origen de las modificaciones.

Esta solución puede sonar menos ideal a primera vista, pero tengo mis razones para hacerlo. No trabajo con uno, sino con una amalgama de muchos frameworks, mejores prácticas, resets / hojas de estilo de normalización, etc. y estoy seguro de que ninguna actualización cambiará los proyectos existentes de ninguna manera que no haya visto venir.

Estoy trabajando en y con mi propio marco personalizado por las siguientes razones.

  1. Me despojo cada poco que no necesito para mantener cosas modulares y pequeñas
  2. Utilizo mi framework para trabajos de clientes y quiero saber a) con exactitud con qué estoy trabajando, mientras que b) ser dueño de todo lo que vendo al cliente. No solo copio y uso marcos, sino que trato de comprenderlos y recrearlos
  3. Utilizo mi marco en combinación con un CMS y no puedo simplemente dejar caer y olvidar un marco en un proyecto / comenzar desde cero

Llegué a la misma solución que Joel:

Personalizar menos archivos

Tal como se describió anteriormente: creo copias locales para todos los archivos Less que estoy personalizando: tales como: “variables-custom.less”, “alerts-custom.less”, “buttons-custom.less”. Entonces puedo usar algunos estándares y tener mis propias adiciones. El inconveniente es: cuando se actualice Bootstrap, es muy difícil migrar.

Pero hay algo más:

Sobrescribir estilos

Cuando busco flujos de trabajo, a menudo veo a la gente sugiriendo que simplemente anule los estilos. Entonces, primero importa los archivos Menos estándar y luego agrega sus declaraciones personalizadas en la parte inferior. La ventaja aquí es: es más fácil actualizar a una versión más nueva. El inconveniente es: el archivo CSS comstackdo incluye todas las anulaciones. Algunos selectores de CSS se definen dos veces. Entonces, el navegador necesita levantar algo para averiguar qué aplicar en realidad. Eso no está realmente limpio.

Me pregunto por qué los preprocesadores no son lo suficientemente inteligentes como para resolver tales declaraciones dobles. ¿Hay algún flujo de trabajo mejor que me falta aquí?

Simplemente agregue @import "../../styles.less"; (o donde sea que esté su hoja de estilo) a bootstrap.less en la parte inferior. Esto le permite usar .gradient Bootstrap como .gradient o .border-radius dentro de sus propios styles.less.