Bootstrap está em toda parte, mas nem sempre é a ferramenta certa para o trabalho. Aqui estão algumas ótimas alternativas!
Se você verificar o código-fonte do front-end de um site aleatoriamente nos dias de hoje, é provável que encontre o Bootstrap abaixo. Estamos todos tão acostumados com conceitos como container-fluid, row, col-sm-6, etc., que é difícil imaginar que qualquer outro estilo de desenvolvimento front-end seja possível. E assim, quando temos que construir o próximo projeto, buscamos o Bootstrap inconscientemente. Dito isto, a popularidade não faz do Bootstrap uma boa opção para todos os projetos e necessidades.
Na verdade, para frontends realmente enxutos, carregar todos os CSS de inicialização e JS pode causar grande inchaço.
Este artigo tem dois propósitos:
Acho que a parte da explicação é muito importante porque, na maioria dos casos, as pessoas nem percebem que têm um problema ou que estão dificultando seu trabalho ao pegar o Bootstrap. Por fim, observe que este não é um post anti-Bootstrap de forma alguma. Eu amo o Bootstrap 4 e uso sempre que posso. Mas, então, sou um desenvolvedor individual que precisa pensar em usar a solução mais popular; além disso, não sou um desenvolvedor de interface do usuário em si, então não me preocupo com muitas coisas ao construir meus front-ends.
E com isso, vamos dar uma olhada nas alternativas que temos.
últimas postagens
Grade Flexbox
Pense nisso por um minuto: a maior razão pela qual você começou a usar o Bootstrap e ainda está usando é o seu sistema de grade. Claro, demorou um pouco para se acostumar com as classes row, col-md-6, etc., mas agora é uma segunda natureza pensar em um layout em termos de linhas, colunas, deslocamentos etc.
E se você for honesto consigo mesmo, descobrirá que todo o resto no Bootstrap é um pouco trabalhoso para se trabalhar. Há toneladas de classes para lembrar, esteja você fazendo formulários, navegação, botões, tabelas ou qualquer outra coisa. Se você é como eu, você ainda não se acostumou com todas as classes e o que elas fazem, e muitas vezes você usa Bootstrap apenas para a grade e escreve todos os outros CSS você mesmo.
Se sim, você poderia fazer muito melhor com Grade Flexbox.
O Flexbox Grid, como o nome sugere, é um sistema de grid baseado no CSS Flexbox propriedades. No entanto, ao contrário da técnica CSS, toda a complexidade é bem abstraída para que você se concentre apenas em colocar os elementos da maneira que deseja. A melhor parte é que todos os nomes de código e classe imitam o que você deseja no Bootstrap 4, o que significa que alternar entre essas duas ferramentas requer zero atrito mental. Por exemplo, veja como é 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 para este sistema de grade tem apenas 10,7 KB, economizando várias centenas de KB no tamanho final do download. Atualmente, o Flexbox Grid é o meu favorito, pois não quero lutar contra o Bootstrap para personalizá-lo totalmente. Eu gosto de começar com elementos vanilla e estilizá-los eu mesmo, usando o Flexbox Grid sempre que preciso.
Aprender Flexbox aqui, online.
PureCSS
Não seria bom se o Bootstrap fosse dividido em módulos e você pudesse importar apenas o módulo necessário?
Nós iremos, PureCSS foi em frente e fez exatamente isso — é um conjunto de módulos que cobrem diferentes áreas funcionais de um site. Você pode optar por baixar um ou todos, e ainda assim o tamanho do download não excederá 3,7 KB!
Sim, você leu certo.
Todos os módulos quando agrupados e compactados são 3,7 KB, embora individualmente sejam mais. O módulo de grade tem apenas 0,8 KB, enquanto o módulo Base tem 1,0 KB. A equipe por trás do PureCSS diz que ele foi construído inteiramente com dispositivos móveis em mente e, portanto, cada linha de CSS foi cuidadosamente examinada quanto à eficiência antes de ser incluída.
Então, digamos que você precise apenas do módulo de grade e formulários. Bem, basta baixar esses dois (junto com o módulo Base), e você terminaria em menos de 3,4 KB! Não há necessidade de incluir o CSS dos módulos Botões, Tabelas e Menus se você não for usá-los.
O PureCSS tem suas classes, porém, e o código resultante não imita o Bootstrap com o qual você pode estar muito acostumado:
<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>
Você notará que não há mais grade de 12 colunas. PureCSS tem seu sistema de grade que especifica quanta largura uma coluna deve ter. Portanto, pure-u-lg-1-4 significa que esse elemento deve ocupar 1/4 ou 25% da largura disponível em telas grandes. Larguras como múltiplos de 1/5 também estão disponíveis.
Em suma, PureCSS é uma ferramenta (framework) de CSS libertadora e incrível que você pode escolher conforme necessário. Dito isto, ele vem com uma boa quantidade de buy-in e curva de aprendizado, pois você precisa aprender uma nova maneira (um pouco diferente) de fazer as coisas.
PureCSS também tem suas próprias classes e estilo padrão, portanto, não é muito diferente do Bootstrap.
Zimit
o Zimit framework é meio estranho nesta lista. Sim, é um framework para construir UIs, mas é voltado para tipos específicos de UI: mockups.
Há momentos em que você precisa desenvolver o front-end para mostrar o funcionamento do produto. A maneira ideal de fazer isso, é claro, seria envolver um designer/desenvolvedor de interface do usuário e criar os modelos em uma das ferramentas avançadas de wireframing (Moqups, Blasmic, etc., vêm à mente). As páginas seriam perfeitas em pixels, o esquema de cores elegante e bem escolhido, e as páginas seriam abertas para participação, críticas, comentários, etc.
Mas a vida real não é ideal, e muitas vezes você é o único homem no trabalho e deve usar todos os chapéus e fazer o trabalho. Nesses momentos, você quer uma estrutura que:
- Permite codificar em HTML/CSS
- É leve
- Possui uma extensa coleção de componentes fundamentais
- Tem uma linguagem de estilo decente e consistente
- Se possível, assemelha-se ao tom “acinzentado” do design de wireframe
- É fácil de aprender
- Tem algum pré-processador CSS embutido
Zimit verifica todas essas caixas. Tem apenas 84 KB de tamanho e uma ampla variedade de componentes para escolher. Aqui estão alguns exemplos que achei realmente atraentes, pois codificá-los por conta própria levará muito tempo.
Vista em árvore
Migalhas de pão
Abas
Há muito mais guloseimas para explorar. Confira-os aqui.
Vejamos como é o código. Veja como você usaria o sistema de grade no Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
O “c” aqui significa “coluna”, então “c4” significa uma coluna que abrange quatro unidades (a grade é de tamanho 12, assim como a do Bootstrap). Muito semelhante ao Bootstrap, e muito intuitivo, na minha opinião.
Em suma, o Zimit é uma estrutura completa e fácil para desenvolver protótipos de interface do usuário que são responsivos e com boa aparência rapidamente. É melhor que o Bootstrap (quando se trata de prototipagem) porque o Bootstrap é um download muito maior e o design resultante é, bem, brega.
HTML KickStart
Na maioria dos projetos que você constrói, a velocidade é fundamental. O maior obstáculo para acelerar o desenvolvimento da Web é a parte de front-end, e o maior “atraso” no desenvolvimento de front-end é a necessidade de codificar componentes interativos e de aparência elegante. Como há muitas maneiras pelas quais um componente pode se comportar e há muitos tamanhos de tela para gerenciar, codificar e gerenciar componentes pode se tornar um pesadelo para o desenvolvedor.
HTML KickStart oferece uma alternativa.
Simplificando; é uma coleção de componentes realmente elegantes que você pode simplesmente colocar em seus projetos e reduzir drasticamente o tempo de desenvolvimento. Aqui estão alguns componentes interessantes que encontrei:
Suspenso
Botões
Abas (centralizadas e com ícones)
Materializar
Se você gosta do Bootstrap pelo fato de ter uma solução pronta para todos os problemas comuns de web design, mas é fã do estilo Material design, deveria experimentar Materializar.
O Materialize é basicamente como o Bootstrap – sistema de grade de 12 pontos, deslocamentos e componentes familiares como formulários, cartões, etc. No entanto, ele tem certas vantagens que podem atrair muitos.
Empurrar puxar
O recurso push/pull do Materialize CSS permite reordenar as colunas. Isso é uma reminiscência do 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">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
Isso resulta no seguinte:
Você notará que as colunas mudaram de lugar, o que talvez seja algo inatingível no CSS tradicional baseado em Bootstrap.
guloseimas JavaScript
Existem alguns recursos e efeitos JavaScript que acompanham o Materialize. Dicas de ferramentas, brindes (notificações efêmeras semelhantes ao Android), Parallex, Pushpin, etc., são alguns deles. Um efeito realmente incrível que gostei é o FeatureDiscovery, que basicamente permite destacar um elemento na página em algum evento (digamos, pressionar o botão) para chamar a atenção do usuário para esse elemento. É difícil descrevê-lo em palavras completamente, então vá para https://materializecss.com/feature-discovery.html para ver o que quero dizer.
Em suma, o Materialize é uma ótima alternativa ao Bootstrap ou para aqueles que desejam adotar um framework Material CSS completo.
Conclusã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 enquanto o Bootstrap faz o trabalho na maioria das vezes, apenas fazer o trabalho nem sempre é suficiente. Se você sente que o Bootstrap está restringindo você e que suas necessidades são especiais, uma das opções listadas aqui ajudará. 🙂