Se você assim como eu resolveu se aventurar recentemente pelo mundo do desenvolvimento web, existe uma possibilidade de que tenha escolhido começar a usar algum framework frontend, assim como o Foundation ou o Bootstrap.

Ambos são excelentes e te poupam uma boa parte do trabalho e do tempo necessário para criar algo bonito e funcional, porém vou falar somente sobre o Bootstrap.

O negócio começa a ficar um pouco confuso quando você tenta alterar o estilo atual definido pelo framework.

Várias considerações são feitas ao se aplicar estilo a um determinado elemento, a ordem de declaração, a herança de estilos, a especificidade dos estilos, etc. Isso pode ser um problema, por exemplo se você quiser sobreescrever a cor de algum elemento no Bootstrap somente usando CSS, você precisa tomar algumas precauções para que o seu estilo seja declarado de uma maneira mais específica que foi declarado no framework.

Cada estilo possui um “peso” e o mais relevante, vence.

A ideia do post não é explicar esse tipo de coisa, então no lugar de ficar falando por cima e poder dar a entender algo errado, prefiro que cada um faça a lição de casa e pesquise sobre isso, por curiosidade se quiser ver os valores de cada estilo: http://www.w3.org/TR/css3-selectors/#specificity.

Como eu disse antes, se você quiser sobreescrever os valores do Bootstrap somente com CSS, você vai acabar tendo alguns seletores gigantes pois vai precisar adicionar classes e elementos para obter um valor alto de especificidade para o browser considerar seu estilo.

Uma maneira de evitar isso é compilando seu próprio CSS usando os fontes do Bootstrap.

Compilar CSS?

O Bootstrap é desenvolvido usando um pre-processor chamado Less, ele adiciona diversos recursos ao CSS como variáveis, mixins, funções, entre outros.

Existem diversas maneiras de aproveitar o poder do Less no desenvolvimento com o Bootstrap, se você quer o jeito mais simples para desenvolvimento pode tentar dar uma olhada no link: http://lesscss.org/#client-side-usage.

Outro jeito é usar um compilador Less que, baseado nos fontes do Bootstrap vai gerar um CSS pra você.

Vamos seguir como o recomendado pela documentação do Bootstrap.

Preparação

Logo no Getting Started do Bootstrap existe a opção de baixar os fontes, e é isso que vamos fazer. Depois de baixar, descompacte numa pasta conveniente pra você.

Além do Less o pessoal do Bootstrap usa outra ferramenta chamada Grunt, ele serve para automatizar várias tarefas repetitivas que você teria que fazer na mão, entre elas a compilação.

Após instalar o node.js, você precisa instalar o Grunt: sudo npm install -g grunt-cli

Ah é, para esse post eu estou usando Linux.

Isso vai instalar o Grunt globalmente, depois navegue até a página com os arquivos fontes do Bootstrap, deve ter um package.json na pasta, e execute o comando: npm install

O que isso vai fazer é olhar no package.json e instalar localmente os pacotes necessários lá listados. Se sua internet for lenta como a minha, dá tempo de você ir tomar um café ou dois.

Ficando por dentro

Dentro do diretório que você extraiu do código do Bootstrap, tem um outro chamado /less, nesse diretório você vai encontrar diversos arquivos .less. Nesses arquivos estão o código de cada componente e arquivos auxiliares, como o variables.less por exemplo, que contém várias variáveis úteis para customizar o framework.

Depois de tudo instalado, você está pronto para começar.

De acordo com a documentação oficial, segue uma lista dos comandos e o que eles fazem:

Build - grunt O grunt irá executar os testes localmente e compilar o CSS e o JavaScript para o diretório /dist. Usa o Less e o UglifyJS.

Compilar CSS e JavaScript - grunt dist Cria o diretório /dist com os arquivos compilados. Também usa o Less e o UglifyJS.

Testes - grunt test Executa o JSHint e QUnit não visualmente no PhantomJS.

Observar - grunt watch Esse é um método bem conveniente, usando esse comando se algum arquivo for alterado e salvo, o grunt irá recompilar o Bootstrap automaticamente.

Para facilitar e exemplificar melhor o funcionamento, copie um dos templates do site do Bootstrap, cole num arquivo e altere a referencia de estilo para apontar para o diretório /dist, assim ficará fácil de ver as alteções que você fizer.

Customizando o Bootstrap

Para evitar que você fique tento que compilar manualmente a cada alteração, é melhor usar o seguinte comando: grunt watch

A cada alteração no arquivo o grunt vai recompilar os arquivos e colocalos na diretório /dist que você deve ter configurado no template anteriormente.

Desse jeito o fluxo de trabalho não fica muito diferente, você altera o arquivo e atualiza a página no browser para ver o efeito.

Exemplo

Depois que o grunt começar a observar os arquivos, qualquer alteração vai ser refletida no estilo.

Acesse o site Bootswatch, ele fornece vários estilos para o Bootstrap, escolha o que for de sua preferência e clique na seta do lado de Download e selecione o item variables.less.

Baixe e substitua o arquivo variables.less do diretório do Bootstrap por esse que acabou de baixar.

Ao salvar o grunt vai compilar novamente o Bootstrap e gerar os arquivos novamente no /dist.

Se você atualizar a página que estiver usando os arquivos compilados vai ver que várias coisas mudaram.

Conclusão

Dessa maneira, apesar de necessitar de uma configuração inicial e ferramentas adicionais eu achei que fica muito mais simples a maneira de customizar o framework.

E trocar as cores é apenas uma das possibilidades, é possível alterar o sistema de grid e muito mais, basta verificar o uso das variáveis e mixins dentro dos arquivos do diretório /less do fonte do Bootstrap.