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

285

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?

Joel Rodgers
fonte
Saudações do futuro! Bootstrap de personalização "melhores práticas" mudaram em SASS 3.x base e 4.x: stackoverflow.com/a/50410667/171456
Zim

Respostas:

180

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.

Joel Rodgers
fonte
Existe um motivo específico para o # 3? O que acontece se todo o seu CSS personalizado aparecer na parte inferior após todas as importações, em vez de ser misturado após cada importação?
AaronLS
2
@AaronLS: Isso deve funcionar também. Eu acho que o número 3 é para mantê-lo organizado.
Jonatan Littke
@joelrodgers Por que mixins.less não deve ser editado diretamente?
21813 Joe Isaacson
O que você acha de incluir um arquivo vazio de variable-custom.less (via @import) dentro do bootstrap.less? Todos poderão personalizar as variáveis ​​padrão do Bootstrap e atualizá-las com segurança. De qualquer forma, acho que esse recurso deve ser absolutamente incluído no Bootstrap.
adriendenat 31/07
36

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.

jstam
fonte
1
Boa solução. Foi exatamente isso que fiz com algumas mudanças. Olhe para a minha resposta. Demorou demais para comentar.
Joel Rodgers
Também gosto da sua solução, Joel. Boa separação do seu código versus o código da estrutura.
jstam
Como mixins faz referência a variáveis, eu precisaria de uma importação custom-variables.less adicional entre as variáveis.less e a importação mixins.less? Para que eu possa modificar variáveis ​​como @baseFontSize. Eu nem sei o suficiente para saber se isso vai me sufocar ao declarar uma variável com o mesmo nome novamente.
AaronLS
Eu achei que essa era a solução mais útil porque, por uma nova cópia do bootstrap, simplesmente precisamos adicionar uma linha novamente bootstrap.less, agarrando nosso arquivo personalizado VS potencialmente alterando muitas linhas, se os nomes principais dos arquivos menos, etc ... eu usei Nesta solução, recompilei meu JS minificado usando o grunhido e está tudo bem no bairro! Personalizações trabalhando sem nenhuma !importantdeclaração não amigável !
twknab
25

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;  
sam
fonte
1
Esta é a maneira de 1) ter uma cópia do código de inicialização que pode ser atualizada à vontade enquanto ainda 2) poder impor suas próprias configurações personalizadas. Consulte stackoverflow.com/questions/13809895/… para obter detalhes sobre a estrutura de pastas.
Jeromy French
Fiz questão de colocar isso antes do meu próprio código para garantir que o bootstrap não o substituísse.
Aram Kocharyan
Isso funcionou muito bem para mim. Eu apenas apontei o Koala para theme.less e ele compila toda vez que eu salvo.
precisa saber é
No caso de alguém está usando a versão SASS, atente para padrão!
prasanthv
5

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.

aleemb
fonte
4

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
Todos os bits iguais
fonte
Sim, eu entendo, mas para mim as coisas estão mudando tão rápido que toda essa tecnologia da Web está se tornando um pouco esmagadora para acompanhar.
Joel Rodgers #
1
Como mencionado: minha abordagem é apenas para aqueles que acompanham o desenvolvimento atual de várias estruturas. Faço isso porque tenho que me manter atualizado sobre o desenvolvimento e abordagens diferentes para os desafios técnicos. Eu acho que isso é mais adequado para desenvolvedores de framework do que para freelancers que apenas "querem fazer o trabalho".
Todos os bits Equal
4

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?

Frank Lämmer
fonte
1
Entendo que você é o ponto, mas você sempre pode executar um utilitário de limpeza CSS online ou localmente. Aqui está uma lista deles: stackoverflow.com/questions/135657/… Você provavelmente não quer menos um compilador sendo executado no produto.
Joel Rodgers
thx para a resposta, não estava ciente de que existem ferramentas de remoção de poeira. legal, eu vou cavar nele. Na verdade, eu uso um menos compilador localmente de qualquer maneira (CodeKit). Não quero compilar o css duas vezes.
Frank Lämmer
2

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.

Dallas
fonte