Práticas recomendadas para personalização do Twitter Bootstrap [fechado]

Estou trabalhando com o Bootstrap 2.0.3 usando LESS. Quero personalizá-lo extensivamente, mas quero evitar fazer alterações na fonte sempre que possível, pois as alterações nas bibliotecas são frequentes. Eu sou novo no LESS, então não sei como sua compilação funciona totalmente. Quais são algumas das melhores práticas para trabalhar com estruturas baseadas em LESS ou LESS?

Minha solução é semelhante ao jstam, mas evito fazer alterações nos arquivos de origem quando possível. Dado que as alterações no bootstrap serão frequentes, desejo poder buscar a fonte mais recente e fazer alterações mínimas mantendo minhas modificações em arquivos separados. Claro, não é completamente à prova de balas.

1. Copie o bootstrap.less e o variable.less no diretório pai. Renomeie bootstrap.less para theme.less ou o que você quiser. Sua estrutura de diretórios de diretório deve ficar assim:

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

2. Atualize todas as referências em theme.less para apontar para o subdiretório de autoinicialização. Certifique-se de que o seu variables.less seja referenciado pelo pai e não pelo diretório de autoinicialização da seguinte maneira:

   ...
   // 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. Adicione suas substituições de CSS no arquivo theme.less imediatamente após o local em que elas estão incluídas.

   ...
   // 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. Link para theme.less em vez de bootstrap.less nas suas páginas HTML.

Sempre que uma nova versão for lançada, suas alterações deverão ser seguras. Você também deve fazer uma diferença entre os arquivos de inicialização personalizados sempre que uma nova versão for lançada. Variáveis ​​e importações podem mudar.

Isso é algo com o qual eu lutei também. Por um lado, quero personalizar altamente o arquivo variables.less com minhas próprias cores e configurações. Por outro lado, desejo alterar os arquivos do Bootstrap o mínimo possível para facilitar o processo de atualização.

Minha solução (por enquanto) é criar um arquivo MENOS adicional e inseri-lo no diretório bootstrap.less arquivo após a importação das variáveis ​​e mixins. Então, algo como isto:

...

// 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";

...

Dessa forma, se eu quiser redefinir as cores, fontes do Bootstrap ou adicionar mixins adicionais que puder. Meu código é separado, mas será compilado no restante das importações do Bootstrap. Não é perfeito, mas é uma pechincha que funcionou bem para mim.

Do meu lado, eu apenas tenho um arquivo nomeado theme.lesscom uma importação boostrap.lessdele, e logo abaixo eu substituo (mesmo que pareça ruim usando LESS, mas bem, é mais fácil de manter) o valor da variável que não quero atualizar .

Isso funciona bem para ter valores personalizados para variáveis ​​em variables.less

Depois disso, compilei meu theme.lessarquivobootstrap.less

Exemplo theme.less:

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

Uma abordagem muito melhor (IMHO) é seguir o exemplo do projeto github Bootswatch chamado swatchmaker . Este projeto foi especificamente desenvolvido para criar e gerenciar as dezenas de temas do Bootstrap no site.

O Makefileno projeto cria swatchmaker.less(você pode renomeá-lo para algo como customizations.less). Este arquivo contém um monte de importações:

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

Você pode renomear a swatchpasta e os bootswatch.lessarquivos para o que achar apropriado.

Isso faz sentido, pois você pode atualizar o Bootstrap sem afetar seus próprios arquivos. De fato, o Makefiletambém contém comandos para buscar a versão mais recente do Bootstrap. Veja o README na página do projeto para obter mais informações.

Como bônus, o README também sugere que você instale a watchrgema que criará automaticamente o projeto quando um .lessarquivo for alterado.

Se (E SOMENTE SE) você tiver tempo, poderá fazê-lo como eu. Eu mantenho minha própria versão modificada da (s) estrutura (s) e, a cada atualização da estrutura, leio os documentos e verifico a fonte quanto a modificações.

Esta solução pode parecer menos ideal à primeira vista, mas tenho minhas razões para fazê-lo. Eu não trabalho com um, mas com um amálgama de muitas estruturas, práticas recomendadas, redefinições / folhas de estilo de normalização etc. e sempre tenho certeza de que nenhuma atualização jamais mudará os projetos existentes da maneira que eu não esperava.

Estou trabalhando e com minha própria estrutura personalizada pelos seguintes motivos.

1. Eu tiro tudo, não preciso manter coisas modulares e pequenas
2. Uso minha estrutura para trabalhos do cliente e quero a) saber exatamente com o que estou trabalhando enquanto b) possuir tudo o que vendo para o cliente. Eu simplesmente não copio e uso estruturas, mas tento entendê-las e recriá-las
3. Eu uso minha estrutura em combinação com um CMS e não posso simplesmente esquecer e esquecer uma estrutura em um projeto / começar do zero

Eu vim para a mesma solução que Joel:

Menos arquivos personalizados

Assim como descrito acima: eu crio cópias locais para todos os arquivos Menos que estou personalizando: Como: "variáveis-custom.less", "alertas-custom.less", "botões-custom.less". Para que eu possa usar alguns padrões e ter minhas próprias adições. A desvantagem é: quando o Bootstrap será atualizado, é realmente difícil migrar.

Mas há algo mais:

Substituir estilos

Ao procurar por fluxos de trabalho, muitas vezes vejo pessoas sugerindo simplesmente substituir estilos. Então você importa os arquivos Less padrão primeiro e depois adiciona suas declarações personalizadas na parte inferior. A vantagem aqui é: é mais fácil atualizar para uma versão mais recente. A desvantagem é: O arquivo CSS compilado inclui todas as substituições. Alguns seletores de CSS são definidos duas vezes. Portanto, o navegador precisa fazer alguns levantamentos para descobrir o que aplicar realmente. Isso não é realmente limpo.

Gostaria de saber por que os pré-processadores não são inteligentes o suficiente para resolver essas declarações duplas? Existe algum fluxo de trabalho melhor que estou faltando aqui?

Basta adicionar @import "../../styles.less";(ou onde quer que sua folha de estilo esteja) ao bootstrap.less na parte inferior. Isso permite que você use os mixins do Bootstrap como dentro .gradientou .border-radiusdentro de seus próprios styles.less.