As 5 principais alternativas de Bootstrap

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 hoje em dia, é provável que encontre o Bootstrap embaixo. Todos nós nos acostumamos 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 isso, a popularidade não torna o Bootstrap uma boa opção para todos os projetos e necessidades.

Na verdade, para front-ends realmente enxutos, carregar todos os CSS de inicialização e JS podem causar grande inchaço.

Este artigo tem dois propósitos:

1. Forneça alternativas ao vivo não semelhantes ao Bootstrap para o Bootstrap
2. Explique por que você pode querer considerar essas alternativas sobre o Bootstrap

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 usar o Bootstrap. Finalmente, por favor, note que este é não um post anti-Bootstrap por qualquer meio. Eu amo o Bootstrap 4 e o 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 criar meus front-ends.

E com isso, vamos dar uma olhada nas alternativas que temos.

Grade Flexbox

Pense nisso por um minuto: o maior motivo pelo qual você começou a usar o Bootstrap e ainda o usa é o sistema de grade. Claro, levou algum tempo para se acostumar com o row, col-md-6etc., classes, 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 de se trabalhar. Existem inúmeras classes para lembrar, esteja você fazendo formulários, navegação, botões, tabelas ou qualquer outra coisa. Se você for como eu, ainda não se acostumou com todas as classes e o que elas fazem, e muitas vezes usa o 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 grade 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 atrito mental zero. Por exemplo, aqui está a aparência do código para o “espaço ao redor” no Flexbox Grid:

  <div >
    <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 minificado para este sistema de grade é de apenas 10,7 KB, economizando várias centenas de KB no tamanho final do download. Hoje em dia, 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 .

CSS puro

Não seria bom se o Bootstrap fosse dividido em módulos e você pudesse importar apenas o módulo necessário?

Bem, CSS puro 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, mas o tamanho do download não excederá 3,7 KB!

Sim, você leu certo.

Todos os módulos quando agrupados e gzipados têm 3,7 KB, embora individualmente eles cheguem a mais. O módulo grid 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ê estará pronto 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.

PureCSS tem suas classes, porém, e o código resultante não imita o Bootstrap ao qual você está 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 uma grade de 12 colunas. PureCSS tem seu sistema de grade que especifica quanta largura uma coluna deve ter. Então, pure-u-lg-1-4 significa que este 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 CSS incrível e libertadora ( estrutura ?) que você pode escolher conforme necessário. Dito isto, ele vem com uma quantidade razoável de adesão e curva de aprendizado, pois você precisa aprender uma nova maneira (ligeiramente diferente) de fazer as coisas.

PureCSS também possui suas próprias classes e estilo padrão, portanto, não é muito diferente do Bootstrap.

Zimit

o Zimit framework é uma espécie de estranho nesta lista. Sim, é uma estrutura para construir UIs, mas é voltada para tipos específicos de UI: maquetes.

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., lembre-se). As páginas seriam Pixel-perfect, o esquema de cores elegante e bem escolhido, e as páginas seriam abertas para participação, revisões, 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ê deseja 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, lembra o 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 gama 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

Guias

Há muito mais guloseimas para explorar. Verifique-os aqui .

Vejamos como fica o código. Veja como você usaria o sistema de grade no Zimit:

 <div >
   <div class="c12">
      <div >
         <div class="c4">4 columns</div>
         <div class="c4">4 columns</div>
      </div>
      <div >
         <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 sendo 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 ficam bem rapidamente. É melhor que o Bootstrap (quando se trata de prototipagem) porque o Bootstrap é um download muito maior e o design resultante é, bem, cafona.

HTML KickStart

Na maioria dos projetos que você constrói, a velocidade é crítica. O maior obstáculo para acelerar o desenvolvimento da Web é a parte do front-end, e o maior “atrasador” no desenvolvimento do front-end é a necessidade de codificar componentes interativos de aparência elegante. Como há muitas maneiras pelas quais um componente pode se comportar e 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 inserir em seus projetos e reduzir drasticamente o tempo de desenvolvimento. Aqui estão alguns componentes legais que encontrei:

Suspenso

Botões

Guias (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, experimente Materializar .

Materialize é basicamente como o Bootstrap – sistema de grade de 12 pontos, compensações e componentes familiares como formulários, cartões, etc. No entanto, ele tem algumas vantagens que podem agradar a muitos.

Empurrar puxar

O recurso push/pull do Materialize CSS permite que você reordene as colunas. Isso lembra o novo padrão CSS Grid, onde o layout é diferente da ordem dos elementos.

  <div >
      <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 trocaram de lugar, algo talvez inatingível no CSS tradicional baseado em Bootstrap.

JavaScript guloseimas

Existem alguns recursos e efeitos JavaScript que acompanham o Materialize. Dicas de ferramentas, brindes (Android-como notificações efêmeras), Parallex, Pushpin, etc., são alguns deles. Um efeito realmente incrível de que gostei é o FeatureDiscovery, que basicamente permite destacar um elemento na página em algum evento (digamos, pressionar um botão) para chamar a atenção do usuário para esse elemento. É difícil descrevê-lo totalmente em palavras, 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 uma estrutura Material CSS completa.

Conclusão

Bootstrap é sinônimo de design responsivo. Foi o Bootstrap que popularizou o termo “mobile-first design” 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ê acha que o Bootstrap está restringindo você e que suas necessidades são especiais, uma das opções listadas aqui ajudará.