Twitter Bootstrap – Layout bonito em menos tempo

Quem nunca usou o Twitter Bootstrap, tá perdendo tempo, existe ferramentas similares, porém o nível de crescimento da comunidade em torno dele tem sido grande, nesse post irei mostrar alguns motivos pra usar o Twitter Bootstrap, você pode até ter os mesmos motivos pra usar outro, mas mesmo assim tem que experimentar as coisas que ele te oferece.

Sobre o Twitter Bootstrap

Praticamente é um framework pra desenvolvimento web, em outras palavras, é um kit de ferramentas para te ajudar e acelerar na criação de sites com HTML, CSS. Obviamente pelo nome já se sabe que foi que desenvolveu o bonitinho, rsrs. Para agilizar, principalmente, o desenvolvimento o CSS é feito com LESS(que nada mais é que um compilador de CSS, muito bom), veja essa matéria do TableLess(em português) que fala um pouco mais sobre.

Caso queira saber mais detalhes, visite o Twitter Bootstrap(wikipedia – em inglês) e Twitter Bootstrap(página oficial)
O Grande Alexandre Magno(Globo.com) , fez a tradução da documentação do Twitter Bootstrap em português para quem ainda não é tão familiarizado com o Inglês, vale a leitura.

1) Trabalha com LESS

Esse ponto é muito importante, pelo fato de você ganhar tempo no desenvolvimento, mas também na manutenção de seu código CSS, pois quando precisar mudar bordas arredondas e afins, basta alterar o arquivo LESS, compilar e pronto, que será aplicado em todas as partes que usam aquele classe.

2) “As feias que me desculpem, mas beleza é fundamental” – Vinicius de Moraes

Uma coisa que podemos afirmar é que o visual fica muito melhor do que quando fazemos o nosso próprio, eu digo por mim mesmo, algumas pessoas me consideram um ótimo programador/desenvolvedor, porém eu sempre falo que nunca fui bom designer, sempre fiz umas coisas feias e nunca ficam bonitinhas, contudo, olha que maravilha, quando uso o Bootstrap, o padrão de cores e layout já ta todo praticamente definido, agora os clientes já falam que ficou muito bonito, e não como era antigamente(muitos anos atrás), cliente: “Ah, tá bom, dá pra usar” e eu: “:(” . Então posso dizer que o UX Designer já tá praticamente pronto, mas que beleza, hein?!

3) Totalmente Open Source e no GitHub

Essa podemos dizer que é uma das melhores, e talvez até o motivo de ser tão popular. Ele é Open Source, e pra deixar ainda melhor está disponível no GitHub que usa o sistema de controle de versão Git, quem está acostumado a desenvolver usando Git sabe como é bom.

4) Layout Responsive

Ele já é feito pensando em layout responsive, então pra que se preocupar com isso, se o Twitter Bootstrap já faz? A-ham, te peguei né?!  Eu sinceramente ainda não tenho testado nada com Layout Responsive, mas tem sido muito usado, o fato de eu não usar é que moro atualmente no interior, e o povo não liga muito pra nada, o que é muito triste. Porém vamos levando a vida como dá.

5) CSS Grid

Qual seria o motivo de você achar que ele não teria CSS Grid? Aff, que coisa feia garoto(a), obviamente ele já tem e uma coisa que acho muito legal é facilidade de usar, e caso já tenha seu layout todo em CSS Grid, mas precisa mudar para um layout responsive, simples só alterar a class: “container” e/ou “row” para “container-fluid” e/ou “row-fluid” eu amo isso, claro que em alguns casos não será tao simples assim, vai depender mais de como seu layout foi montado também.

6) Iconizar conquista clientes

Certa vez ouvi isso e com o passar dos anos desde que comecei a programar em Visual Basic 6(é comecei por ai, depois que fui pra WEB, o mundo da voltas, hehehe), fui percebendo que quando tem ícones e “imagenzinhas”(cliente adora fazer no diminutivo), isso vende mais, o usuário em geral é preguiçoso e quando colocamos ícones ele já nem lê mais, já vai direto no ícone que ta acostumado. Então falei isso tudo, só pra dizer que o Twitter Bootstrap já tem ícones também, eles usam o Glyphicons. Eu acho os ícones básicos e bonitos que se adaptam a qualquer layout, por serem “monocromáticos”.

7) Vai um tema aí, tio

Esse você tem que gostar, ops, olha eu dando ordem ai, hehehe. O mas legal que acho é que certa vez precisei de algo diferente pra um layout de um sistema administrativo, não gosto de usar sempre o mesmo layout, de tempos em tempos gosto de inovar, mudar, evoluir, então pensei posso será que tem templates feitos com twitter bootstrap, nossa pra minha surpresa apareceu muita coisa boa, e pra melhorar ainda achei uma coisa muito legal, que o {wrap}bootstrap que é um site só com temas feitos em twitter bootstrap, poxa o legal é que você pode fazer um layout todo seu usando twitter bootstrap e vender por meio desse site, agora quando eu conseguir isso(fazer meu layout mega bonito), devo ganhar um dólar, hehehe.

Então caso tenha ficado interessado no {wrap}bootstrap faz uma visita e veja os vários layouts legais que tem que lá. Caso não queira vender seus temas, pelo menos serve como inspiração pois são simples e legais.

8) Javascript

Para que você não perca tempo procurando plugins jquery e afins de galerias e outras pequenas coisas, o Twitter Bootstrap já vem com algumas muito legais como Tooltip, Galeria de imagens, Modals, e várias outras coisas que te fazem ganhar um tempo bom, sem precisar ficar correndo atrás de plugins que as vezes nem funciona principalmente por incompatibilidade, não sofrerá com isso se já usar o do próprio bootstrap. Óbvio que ele não tem tudo, mas já tem os principais pra uma aplicação/site “Cool”

Conclusão

Eu poderia continuar falando sobre as várias coisas que o twitter bootstrap e com certeza não coloquei todas as coisas legais que ele oferece, contudo deixo aqui a dica pra você testar e analisar tudo de bom que ele oferece. Com toda certeza tem pessoas bem melhores que eu pra te ajudar a fazer um trabalho muito melhor pra seu cliente ou empresa, porém eu podendo te ajudar, tamo ai pra isso também.

Caso não queira usar tudo que o Twitter Bootstrap oferece, você pode também baixar uma versão customizada com somente o que você precisa pra evitar carregar conteúdo que não usará, e pra isso basta usar o Customize do boostrap que ele irá gerar os arquivos com o que você selecionou.

Então é isso, galera.

Abraços (nos macho),
Abraços e beijos(nas gatinhas, se for nerd melhor hehehe)