Quando usar Bootstrap para seu Tema em WordPress(E Quando Não)

Se você fizer uma busca por 'Temas em Wordpress com Bootstrap' você terá milhares de resultados.  Eles incluem guias te dizendo como você deve usar Bootstrap para construir os seus temas tanto um tema comercial ou para disponibilização gratuitamente usando Bootstrap framework.

Procure por 'Bootstrap' no repositório de temas WordPress e você obterá 199 resultados. São muitas as opções.

Parece que o desenvolvimento de temas WordPress usando Bootstrap esta a todo vapor. Mas essa é a melhor abordagem para o seu fluxo de trabalho de desenvolvimento do tema?

Aqui eu vou olhar para os prós e contras do uso de Bootstrap para temas em WordPress e irei ajudá-lo a identificar quando Bootstrap vai ajuda-lo no fluxo de trabalho e quando ele não vai.

O que é Bootstrap?

No site do Bootstrap ele é descrito como:

O framework HTML, CSS e JS mais popular para desenvolvimento de projetos responsivos e mobile first na web.

Isto nos diz varias coisas:

• Bootstrap é responsivo e mobile first.
• Utiliza HTML, CSS e JavaScript.

Se você estiver prestando atenção, você vai perceber que isso não inclui PHP. Enquanto Bootstrap é um framework de aplicações, não é como um framework de tema: ele não disponibiliza nenhum arquivo de template, você precisa criar esses arquivos se você quiser aproveitá-lo em um tema. Em vez disso, o que ele faz é dar-lhe um framework de estilo e scripts que tornará mais fácil para você obter um site responsivo funcionando e adicionado interações e eventos com JavaScript.

Bootstrap foi originalmente criado como uma estrutura para ajudar os desenvolvedores do Twitter a trabalharem de forma mais eficiente e consistente. Seu primeiro nome era Twitter Blueprint, que foi alterado mais tarde para Bootstrap depois que mais desenvolvedores se juntaram ao projeto e projeto começou a crescer.

Foi lançado como um framework de código aberto em 2011 e desde então foram usados para alimentar uma variedade de aplicações, incluindo temas em WordPress.

No primeiro momento do Bootstrap, seu ponto principal foi a sua capacidade de resposta ao design responsivo em momento em que um monte de desenvolvedores web (incluindo o desenvolvedores WordPress) apanhavam com web design responsivo. Originalmente não era responsivo: isto foi adicionado em 2012 e o framework se tornou mobile-first em 2013.

Se você fazer download do Bootstrap, você percebera que ele consiste em um conjunto de folhas de estilo (incluindo a versão minificada), Arquivos JavaScript e glyphicons, que estão incluídos nos arquivos fonte. Estes não substitui os arquivos do seu tema: ao invés você pode chamá-los em sua folha de estilo e arquivo de funções conforme necessário.

Eu não irei me aprofundar explicando como usar o Bootstrap com o seu tema WordPress aqui: isto é coberto em detalhes neste tutorial. Ao invés disso eu olharei como Bootstrap pode ajudar ou dificultar seu fluxo de trabalho no desenvolvimento de temas WordPress em quais situações em que você deve ou não usá-lo.

Benefícios de Criar Temas Com Bootstrap

A própria popularidade do Bootstrap como um framework de temas WordPress indica que ele definitivamente tem seu lugar. Então vamos da uma olhada em alguns dos benefícios de utilizar o Bootstrap.

É Responsivo e Mobile-First

Bootstrap automaticamente te dar um estilo responsivo e mobile-first para o seu tema. Se você está lutando para se familiarizar com o desenvolvimento de tema responsivo, ele vai lhe poupar o trabalho duro de aprender a fazer suas próprias folhas de estilo responsivas e criar suas media queries.

Bootstrap utiliza um sistema baseado em grid, layout de 12 colunas com classes de grid que você pode utilizar elementos no seu arquivo de template para poder fazer o seu conteudo se encaixar no grid.

Benefícios dessa abordagem incluem:

• Se você não estiver familiarizado com media queries, você não precisará escreve-las.
• O sistema baseado em grid utiliza CSS orientada a objetos, o que lhe dá muita flexibilidade para estilizar os elementos em seu tema e em suas páginas.
• A abordagem  mobile-first significa que seu CSS é mais limpo e mais eficiente do que uma folha de estilo de desktop-first.

Ele Utiliza um Design Moderno, Limpo e Atraente

Na minha opinião, o layout e tipografia que você inicia com Bootstrap é muito bom. Ele não vai ganhar nenhum prêmio de design, mas vai ajudá-lo a construir um tema moderno, fácil de interagir e legível. Existem algumas características de estilo que eu particularmente gosto:

• o uso do <small> elemento de texto secundário dentro dos cabeçalhos.
• o estilo para blockquotes e citações
• estilo de tabela, que é muito mais agradável do que o que eu tenho visto em muitos temas WordPress

Ele Funciona Muito Bem Com HTML5

Bem como a introdução de suas próprias classes de estilo, Bootstrap também inclui um estilo para toda a infinidade de elementos em HTML5 que você poderá usar em seu tema. Estilizando tudo isso do zero pode ser um verdadeiro aborrecimento, isso te poupa muito trabalho, bem como fica mais fácil para você usar marcação semântica no seu tema.

Te Permite Acesso Fácil aos Scripts

Em vez de ter que usar plugins ou scripts de outros lugares, Bootstrap oferece uma boa variedade de scripts que irá ajudá-lo a adicionar animações e as interações mais utilizadas na web. Isto incluí:

• transitions
• modals
• dropdowns
• tooltips
• popovers
• buttons

... e mais. Isso pode acelerar o seu desenvolvimento, e também garante que todos os seus scripts funcionem bem uns com os outros. Se você estiver usando mais de um ou mais de dois desses elementos, Bootstrap pode tornar o desenvolvimento do seu tema muito mais fácil; no entanto somente poderá ser utilizado um ou talvez dois, pode haver uma abordagem mais eficiente, com menos código adicionado.

Desvantagens de Criar Temas Com Bootstrap

No entanto, eu não acredito que Bootstrap é a ferramenta certa para todos os desenvolvedores de tema em Wordpress. Aqui estão algumas das desvantagens de usar Bootstrap para desenvolver os seus temas.

Há Muito a Aprender

Eu estou me referindo ao sistema de grid responsivo das folhas de estilo do Bootstrap e a multiplicidade de classes que você tem que usar no seu tema. Isso é ótimo se você está preparado para se familiarizar com essas classes e coloca-las em pratica no seu tema. No entanto, se você não precisa de um layout tão complicado e só for utilizar alguns dos estilos, você pode achar que você gasta uma quantidade desproporcionalmente grande de tempo e trabalho através das classes e que precisará usar.

A folha de estilo inclui 155 linhas de código apenas para o grid do layout a menor largura de tela: é muita coisa para lidar se você quiser obter o máximo dele e é mais do que a maioria dos temas precisam.

Além disso, há classes para os glyphicons, botões (buttons), e muito mais.

Se o tema for usar uma proporção significativa dos estilos (ou você estiver usando Bootstrap em vários temas), então vale a pena aprender a como trabalhar com estilos no Bootstrap.  Mas se você só precisa de um par de colunas e um design responsivo, então ele pode ser um exagero.

Ele Usa Media Queries Fixas

As media queries usadas no Bootstrap são baseadas na hipotese sobre largura da tela do dispositivo, o que está se tornando ultrapassada.

Estas são as media queries:

1

/* Extra small devices (phones, less than 768px) */

2

/* No media query since this is the default in Bootstrap */

3

4

/* Small devices (tablets, 768px and up) */

5

@media (min-width: @screen-sm-min) { ... }

6

7

/* Medium devices (desktops, 992px and up) */

8

@media (min-width: @screen-md-min) { ... }

9

10

/* Large devices (large desktops, 1200px and up) */

11

@media (min-width: @screen-lg-min) { ... }

Nos ultimos anos o desenvolvimento responsivo foi se afastando dos breakpoints predefinidos para media queries e para breakpoints baseado no projeto. Enquanto esses meios forem baseados em media queries, certamente irá trabalhar com Bootstrap design (por isso não deve causar nenhum problemas em qualquer um dos dispositivos ou navegadores forem suportados), ele não te dará a flexibilidade que você teria se estivesse programando o seu próprio código.

Se você decidisse adicionar uma media query intermediaria em sua folha de estilo, então você teria que pegar as 155 limhas de estilo do layout do sistema de grid e adaptar para os seu novo breakpoint que eu vejo como tarefa extra.

Isso Acrescenta Algumas Dúvidas

Sim, eu acho que você estava esperando por isso em resposta as ações de qualquer desenvolvedor web cético para um novo framework ou ferramenta.

Bootstrap inegavelmente dá-lhe um monte de funcionalidade e estilo que você pode usar em seu tema, e isso é uma grande coisa. No entanto, se você está usando só uma fração do que está provido, isso significa que você está adicionando todo esse código extra por nada.

Os arquivos são minificados? ... São, mas não ajudam muito, a questão é, você realmente precisa de todo esse código não utilizado em seu tema?

Ele Pode Desencorajar o Design Imaginativo

Adicione Bootstrap ao seu tema, chame a folha de estilo a partir de sua folha de estilos do tema e bumm! Você tem um layout pre-feito, responsivo que parece bom. A maioria de nós estaria tentado a deixar por isso mesmo, acrescentando alguns ajustes de cor, talvez, mas não muito mais.

Isso significa que seu projeto vai ser baseada no que Bootstrap fornece, e não sobre no que é necessário para o seu site. Eu trabalho com vário clientes e antes mesmo de começar a discutir o projeto do seu site eu pergunto sobre o objetivo do site, público alvo e muito mais. Tudo isto irá compor o desenho do site, tanto em termos de efeitos visuais, como em termos da interface do usuário.

O perigo dos temas que usam Bootstrap é que vão acabar com vários temas que essencialmente parecem os mesmos. Desenvolvedores de tema Wordpress fizeram um grande trabalho em desvincular da ideia dos temas 'serem parecidos com o WordPress' nesses últimos anos e por causa disso iremos querer que todos os nossos temas se 'pareçam com Bootstrap'?

Bootstrap e WordPress São Muito Diferentes

Ultimante eu penso que o fator mais significativo que poderia deixá-lo de fora para usar o Bootstrap é o fato de que ele nunca foi projetado para trabalhar com o WordPress, e que ele funciona de forma diferente.

Um framework de tema WordPress, muitas vezes te dará tudo que você precisa para você não começar do zero e de uma forma muito mais alinhada com o modo de como os desenvolvedores do WordPress trabalham. Não precisa ser caro ou ter uma imensa base de código: a maravilha do fluxo de tema é ser de graça open source e incluir um sistema de grid responsivo (como o Bootstrap, mas menos massante) e uma biblioteca de funções e ganchos que você não vai querer com Bootstrap.

Um exemplo de como Bootstrap e WordPress não são compatíveis está no projeto de menus de navegação. Seu menu do WordPress não irá funcionar legal com Bootstrap habilitado: em vez disso você terá que criar um menu personalizado. Isso não é difícil de fazer se você se sente confortável com código, mas isso adicionará mais um passo no seu desenvolvimento do tema.

Resumo

Bootstrap definitivamente tem seus benefícios. Se você precisa de um layout atraente, limpo e ágil para o seu site terá acesso a uma infinidade de efeitos de JavaScript, então ele pode te ajudar a acelerar o seu processo de desenvolvimento do tema.

No entanto, se você está quer obter o máximo do Bootstrap, você precisará gastar algum tempo aprendendo como usálo. Há muito o que aprender com Bootstrap, mas se você não quiser fazer uso de tudo que ele oferece então não valerá a pena.

Para concluir eu recomendo usar Bootstrap em uma série de circunstâncias:

• se você estiver preparado em gastar seus esforços para aprender a usar Bootstrap
• se você estiver usando um monte de recursos do Bootstrap, tais como o sistema de grid e os scripts
• se você não tem um designer que trabalha com você (ou você faz as coisas por você mesmo) e quer um projeto pronto
• se você quiser desenvolver um tema responsivo, mas não sabe como criar as suas media queries

Mas eu não aconselho a usá-lo nessas circunstâncias:

• se você quiser mais flexibilidade em relação aos breakpoints, no design ou no layout
• se você só estiver usando apenas um script ou você não vai usar o sistema de grid
• se você quiser uma coisa rápida—Bootstrap não é a solução
• se há um framework de tema em WordPress ou start theme que faz o trabalho que você precisa e te da mais funções e ganchos
  

Em última análise, a decisão é sua!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!