Mejores prácticas de personalización de Twitter Bootstrap [cerrado]

Estoy trabajando con Bootstrap 2.0.3 usando MENOS. 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 por completo. ¿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 hacer cambios en los archivos de origen cuando es posible. Dado que los cambios en bootstrap serán frecuentes, quiero poder extraer la última fuente y hacer 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 padre. Cambie el nombre de bootstrap.less a theme.less o lo que quiera. La estructura de directorios de su directorio debería verse así:

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

2. Actualice todas las referencias en theme.less para que apunten al subdirectorio bootstrap. Asegúrese de que su variables.less se haga referencia desde el padre y no desde el directorio de arranque 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 anulaciones CSS en el archivo theme.less inmediatamente después de donde se incluyen.

   ...
   // 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.

Siempre que salga una nueva versión, sus cambios deben 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 altamente el archivo variables.less con mis propios colores y configuraciones. Por otro lado, quiero cambiar los archivos Bootstrap lo más posible para facilitar el proceso de actualización.

Mi solución (por ahora) es crear un archivo LON addon e insertarlo en el bootstrap.lessarchivo después de importar 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 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 funcionó bien.

Por mi parte, solo tengo un archivo theme.lesscon una importación boostrap.less, y justo debajo anulo (incluso si parece malo usar MENOS, pero bueno, es más fácil de mantener) el valor de la variable que no quiero actualizar .

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

Después de eso compilo mi theme.lessarchivo en su lugarbootstrap.less

Ejemplo theme.less:

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

Un enfoque mucho mejor (en mi humilde opinión) es tomar el ejemplo del proyecto github Bootswatch llamado swatchmaker . Este proyecto está diseñado específicamente para construir y administrar las docenas de temas de Bootstrap en el sitio web.

En Makefilelas compilaciones del proyecto swatchmaker.less(puede cambiarle el nombre a algo 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 swatchcarpeta y los bootswatch.lessarchivos a lo que considere apropiado.

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

Como watchrbeneficio adicional, el .lessarchivo README también sugiere que instale la gema que construirá automáticamente el proyecto cuando cambie un archivo.

Si (Y SOLO SI) tiene el tiempo, puede hacerlo como yo. Mantengo mi propia versión modificada del marco (s) y con cada actualización del marco leo los documentos y compruebo la fuente en busca de 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 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 haya visto venir.

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

1. Me quito cada poquito, no necesito mantener cosas modulares y pequeñas
2. Utilizo mi marco para trabajos de clientes y quiero a) saber con qué estoy trabajando exactamente mientras 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. Uso mi marco en combinación con un CMS y no puedo simplemente soltar y olvidar un marco en un proyecto / comenzar desde cero

Llegué a la misma solución que Joel:

Archivos menos personalizados

Tal como se describió anteriormente: creo copias locales para todos los archivos Less que estoy personalizando: como: "variables-custom.less", "alert-custom.less", "buttons-custom.less". Entonces puedo usar algunos estándares y tener mis propias adiciones. La desventaja es: 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. La desventaja es: el archivo CSS compilado incluye todas las anulaciones. Algunos selectores CSS se definen dos veces. Por lo tanto, el navegador debe levantar un poco para descubrir 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 mejor flujo de trabajo 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 mixins Bootstrap como .gradiento .border-radiusdentro de sus propios estilos.