por Marcelo PaesÉ consenso que o Bootstrap é um excelente ponto de partida para uma imensa variedade de sites. Resolvemos então começar nosso blog com 5 dicas para aumentarmos nossa produtividade com ele!
1 – Use temas prontos
Temas são uma excelente fonte de aprendizado e ajudam muito no início do desenvolvimento. Lembre-se sempre de revisar as licenças dos componentes utilizados e verificar a compatibilidade de todos itens com o seu stack.
Um site com diversos temas grátis: http://startbootstrap.com/
2 – Use LESS (ou SASS)
No início da febre Bootstrap praticamente todos a customização das classes era feita sobrescrevendo as regras da folha de estilo original em um outro arquivo CSS. Usando uma linguagem como LESS é possível customizar todos os aspectos do layout sem comprometer o CSS final, além dá fácil remoção dos componentes não utilizados.
Com o uso de LESS você pode extender as classes originais do bootstrap e tornar seu html muito mais semântico, usando a função “extend”. Isso será tema de próximos posts.
3 – Aprenda e Compartilhe
Em sites como http://bootsnipp.com/ podemos aprender com diversos exemplos, e compartilhar nossas próximas soluções. Antes de tentar uma solução nova, pesquise!
4 – Combine com o seu designer
Essa é bem básica, mas é muito comum hoje em dia o designer trabalhar todo o layout e a decisão de utilização de um framework venha após as telas fechadas.
Componentes para o designer:
http://www.designshock.com/bootstrap-3-psd/
Grid para o designer:
http://www.minimit.com/articles/tips-resources/bootstrap-3-responsive-grid-psd-templates
5 – Aprenda direito!
Por último, apesar do Bootstrap acelerar o processo de desenvolvimento é muito comum ver projetos inteiros terminados onde claramente se vê a falta de compreensão do framework por parte dos desenvolvedores. Para ajudar vai aí uma lista de bons recursos para aprender:
http://www.sitepoint.com/understanding-twitter-bootstrap-3/
Complementando a lista, um serviço muito útil para criar protótipos de layouts com bootstrap:
http://www.layoutit.com/