O Bootstrap é onipresente, mas nem sempre a opção mais adequada. Exploraremos algumas alternativas excelentes!
Ao analisar o código-fonte de front-end de muitos sites atualmente, é provável que encontre o Bootstrap. Conceitos como container-fluid, row, col-sm-6 tornaram-se tão comuns que é difícil imaginar outras abordagens de desenvolvimento front-end. Assim, ao iniciar um novo projeto, a nossa primeira escolha é muitas vezes o Bootstrap. No entanto, a sua popularidade não significa que seja a melhor solução para todos os projetos.
Para interfaces de utilizador mais simples, o carregamento de todo o CSS e JavaScript do Bootstrap pode gerar um grande inchaço no código.
Este artigo tem como objetivos:
- Apresentar alternativas viáveis ao Bootstrap.
- Explicar as razões pelas quais poderá preferir estas alternativas em relação ao Bootstrap.
Acredito que a explicação é fundamental, pois muitas vezes as pessoas não percebem que o Bootstrap pode estar a limitar o seu trabalho. Importa salientar que este artigo não é uma crítica ao Bootstrap. Sou fã do Bootstrap 4 e uso-o sempre que possível. No entanto, como desenvolvedor individual, preciso ponderar qual a solução mais adequada e, como não sou um especialista em design de interface de utilizador, não me preocupo com alguns aspetos na construção dos meus front-ends.
Dito isto, vamos explorar algumas alternativas.
Flexbox Grid
Reflita um pouco: a principal razão pela qual começou a usar o Bootstrap, e continua a usá-lo, é o seu sistema de grelha. É certo que levou algum tempo para se habituar às classes row, col-md-6, etc., mas agora é natural pensar em layouts em termos de linhas, colunas e deslocamentos.
Se for honesto consigo próprio, perceberá que o resto do Bootstrap é um pouco pesado de usar. Existem inúmeras classes para memorizar, quer esteja a criar formulários, navegação, botões, tabelas ou qualquer outro elemento. Se for como eu, provavelmente ainda não se habituou a todas as classes e as suas funções, e utiliza o Bootstrap apenas pela grelha, escrevendo o resto do CSS manualmente.
Nesse caso, o Flexbox Grid pode ser uma solução muito melhor.
O Flexbox Grid, como o próprio nome indica, é um sistema de grelha baseado nas propriedades Flexbox do CSS. A complexidade é abstraída, permitindo que se concentre em posicionar os elementos como pretende. A melhor parte é que os nomes de classes imitam os do Bootstrap 4, facilitando a transição entre as duas ferramentas. Por exemplo, observe o código para o “espaço ao redor” no Flexbox Grid:
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
O arquivo CSS reduzido deste sistema de grelha tem apenas 10,7 KB, economizando várias centenas de KB no tamanho final do download. Atualmente, o Flexbox Grid é o meu favorito, pois permite personalizar o layout sem os obstáculos do Bootstrap. Prefiro começar com elementos básicos e estilizar usando o Flexbox Grid quando necessário.
Aprenda mais sobre Flexbox online.
PureCSS
Não seria ótimo se o Bootstrap fosse modular, permitindo importar apenas o necessário?
O PureCSS fez exatamente isso: é um conjunto de módulos que abrangem diferentes áreas funcionais de um site. Pode baixar apenas um módulo ou todos eles, e o tamanho do download não ultrapassará os 3,7 KB!
Sim, leu bem.
Todos os módulos juntos e comprimidos têm apenas 3,7 KB, embora individualmente sejam maiores. O módulo de grelha tem apenas 0,8 KB, enquanto o módulo Base tem 1,0 KB. A equipa por trás do PureCSS afirma que foi construído a pensar nos dispositivos móveis, pelo que cada linha de CSS foi cuidadosamente analisada quanto à sua eficiência.
Suponha que precise apenas dos módulos de grelha e formulários. Basta baixar estes dois (juntamente com o módulo Base), e terá menos de 3,4 KB! Não precisa de incluir o CSS dos módulos de botões, tabelas e menus, se não os utilizar.
O PureCSS utiliza as suas próprias classes, e o código resultante não imita o Bootstrap, com o qual pode estar habituado:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>
Como pode ver, não existe mais uma grelha de 12 colunas. O PureCSS tem um sistema próprio que especifica a largura que uma coluna deve ter. Assim, pure-u-lg-1-4 significa que este elemento deve ocupar 1/4 ou 25% da largura disponível em ecrãs grandes. Também estão disponíveis larguras como múltiplos de 1/5.
Em suma, o PureCSS é uma ferramenta de CSS flexível e poderosa que pode usar quando necessário. No entanto, requer um investimento de tempo e alguma curva de aprendizagem, pois terá de aprender uma nova forma de fazer as coisas. Além disso, o PureCSS tem as suas próprias classes e estilo padrão, pelo que não é muito diferente do Bootstrap.
Zimit
O framework Zimit é um pouco peculiar nesta lista. Sim, é um framework para construir interfaces de utilizador, mas focado em tipos específicos: protótipos.
Há momentos em que precisa de desenvolver o front-end para mostrar como um produto funciona. A melhor forma de o fazer seria envolver um designer/desenvolvedor de interface de utilizador e criar os protótipos numa das ferramentas avançadas de wireframing (Moqups, Balsamiq, etc.). As páginas seriam perfeitas em termos de pixels, com esquemas de cores elegantes e bem escolhidos, e estariam abertas a comentários e críticas.
No entanto, a vida real não é perfeita, e muitas vezes é o único responsável por todas as tarefas. Nesses momentos, precisa de um framework que:
- Permita codificar em HTML/CSS
- Seja leve
- Possua uma vasta coleção de componentes básicos
- Tenha uma linguagem de estilo consistente
- Se possível, assemelhe-se ao tom “cinzento” do design de wireframe
- Seja fácil de aprender
- Tenha um pré-processador CSS integrado
O Zimit preenche todos esses requisitos. Tem apenas 84 KB e uma ampla variedade de componentes. Aqui estão alguns exemplos que achei muito úteis, pois codificá-los manualmente levaria muito tempo.
Vista em árvore
Migalhas de pão
Separadores
Há muito mais para explorar. Veja-os aqui.
Vamos ver o código. Eis como usaria o sistema de grelha no Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 colunas</div>
<div class="c4">4 colunas</div>
</div>
<div class="row">
<div class="c4">4 colunas</div>
<div class="c4">4 colunas</div>
</div>
</div>
</div>
O “c” significa “coluna”, então “c4” significa uma coluna que abrange quatro unidades (a grelha é de tamanho 12, tal como a do Bootstrap). Muito semelhante ao Bootstrap, e bastante intuitivo, na minha opinião.
Em resumo, o Zimit é um framework completo e fácil de usar para desenvolver rapidamente protótipos de interface de utilizador responsivos e com bom aspeto. É melhor do que o Bootstrap (quando se trata de prototipagem) porque o Bootstrap é um download muito maior e o design resultante é, bem, pouco elegante.
HTML KickStart
Na maioria dos projetos, a velocidade é fundamental. O maior obstáculo para acelerar o desenvolvimento web é o front-end, e o maior “atraso” no desenvolvimento de front-end é a necessidade de codificar componentes interativos e com bom aspeto. Como existem várias formas de um componente se comportar e muitos tamanhos de ecrã para gerir, codificar e gerir componentes pode tornar-se um pesadelo para o desenvolvedor.
O HTML KickStart oferece uma alternativa.
É uma coleção de componentes realmente elegantes que pode simplesmente adicionar aos seus projetos e reduzir drasticamente o tempo de desenvolvimento. Aqui estão alguns componentes interessantes que encontrei:
Listas suspensas
Botões
Separadores (centralizados e com ícones)
Materialize
Se aprecia o Bootstrap por ter uma solução pronta para todos os problemas comuns de design web, mas é fã do estilo Material Design, deve experimentar o Materialize.
O Materialize é semelhante ao Bootstrap: sistema de grelha de 12 pontos, deslocamentos e componentes familiares como formulários, cartões, etc. No entanto, possui algumas vantagens que podem ser atraentes para muitos.
Empurrar e puxar
O recurso push/pull do Materialize CSS permite reordenar as colunas. Isto é semelhante ao novo padrão CSS Grid, onde o layout é diferente da ordem dos elementos.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">Este div tem 7 colunas de largura e foi empurrado para a direita por 5 colunas.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5 colunas de largura e foi puxado para a esquerda por 7 colunas.</span></div>
</div>
Isto resulta no seguinte:
As colunas trocam de lugar, algo que talvez seja impossível no CSS tradicional baseado no Bootstrap.
Extras em JavaScript
Existem alguns recursos e efeitos em JavaScript que fazem parte do Materialize. Dicas de ferramentas, brindes (notificações efémeras semelhantes ao Android), Paralaxe, Pushpin, etc., são alguns deles. Um efeito realmente interessante é o FeatureDiscovery, que permite destacar um elemento na página num determinado evento (por exemplo, pressionar um botão) para chamar a atenção do utilizador para esse elemento. É difícil descrevê-lo completamente, por isso visite https://materializecss.com/feature-discovery.html para ver o que quero dizer.
Em suma, o Materialize é uma excelente alternativa ao Bootstrap para quem pretende adotar um framework Material CSS completo.
Conclusão
O Bootstrap é sinónimo de design responsivo. Foi o Bootstrap que popularizou o termo “design mobile-first” e mostrou como isso poderia ser feito. Mas, embora o Bootstrap funcione na maioria das vezes, apenas funcionar nem sempre é suficiente. Se sentir que o Bootstrap o está a limitar e que as suas necessidades são especiais, uma das opções aqui listadas pode ser útil. 🙂