link - Buenas prácticas de personalización de Twitter Bootstrap

link bootstrap

Question

Estoy trabajando con Bootstrap 2.0.3 usando LESS. Quiero personalizarlo ampliamente, pero quiero evitar hacer cambios en 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 compilación en su totalidad. ¿Cuáles son algunas de las mejores prácticas para trabajar con marcos basados ​​en LESS o LESS?

Answer 1

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

Mi solución (por ahora) es crear un archivo LESS adicional e insertarlo en el archivo bootstrap.less después de que se hayan importado las variables y los mixins. Así que 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 manera, si quiero restablecer los colores de Bootstrap, las fuentes o agregar mixins adicionales, puedo. Mi código está separado, pero se compilará dentro del resto de las importaciones de Bootstrap. No es perfecto, pero es un recurso provisional que me ha funcionado bien.

Answer 2

Llegué a la misma solución que Joel:

Archivos personalizados menos

Al igual que 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". Así que puedo usar algunos estándares y tener mis propias adiciones. El inconveniente es que: cuando Bootstrap se actualizará, es realmente difícil migrar.

Pero hay algo más:

Anular estilos

Cuando busco flujos de trabajo, a menudo veo personas que sugieren simplemente anular los estilos. Por lo tanto, primero importa los archivos Less 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 compilado incluye todas las anulaciones. Algunos selectores de CSS se definen dos veces. Así que el navegador debe hacer un levantamiento para saber qué aplicar en realidad. Eso no es 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 esté perdiendo aquí?

Answer 3

Mi solución es similar a la de jstam, pero evito hacer cambios en los archivos de origen cuando sea posible. Dado que los cambios en bootstrap serán frecuentes, quiero poder extraer 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. Renombra bootstrap.less a theme.less o lo que quieras. La estructura del directorio de su directorio debe verse así:

   /Website            
        theme.less
        variables.less
        /Bootstrap
        ...

2. Actualice todas las referencias en theme.less para que apunte al subdirectorio bootstrap. Asegúrese de que se hace referencia a sus variables.less desde el padre y no al directorio de rutina de arranque, de esta forma:

   ...
   // 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 anulaciones de CSS en el archivo theme.less inmediatamente después de incluirlas.

   ...
   // 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, sus cambios deben ser seguros. También debe hacer una diferencia entre sus archivos de arranque personalizados cada vez que salga una nueva versión. Variables e importaciones pueden cambiar.

Answer 4

Por mi parte, solo tengo un archivo llamado theme.less con una importación de boostrap.less , y justo debajo de la anulación (incluso si parece estar mal usando LESS, pero bueno, es más fácil de mantener) el valor de la variable No 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 de theme.less :

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

Answer 5

Si (Y SOLO SI) tienes el tiempo, puedes hacerlo como yo. Mantengo mi propia versión modificada del (de los) marco (s) y con cada actualización del marco leo los documentos y reviso la fuente para ver si hay modificaciones.

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

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

1. Me quito todo lo que no necesito para mantener cosas modulares y pequeñas
2. Utilizo mi marco de trabajo para los trabajos del cliente y quiero a) saber exactamente con qué estoy trabajando yb) poseer todo lo que le vendo al cliente. No solo copio y uso marcos, sino que trato de entenderlos y recrearlos.
3. Utilizo mi marco en combinación con un CMS y no puedo simplemente soltar y olvidar un marco en un proyecto / empezar de cero

Answer 6

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

Answer 7

Un enfoque mucho mejor (IMHO) es seguir el ejemplo del proyecto de Bootswatch Bootswatch llamado swatchmaker . Este proyecto está específicamente diseñado para crear y administrar docenas de temas de Bootstrap en el sitio web.

El Makefile en el proyecto genera 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 los archivos bootswatch.less a lo que encuentre apropiado.

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

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