O Bootstrap é sem dúvidas a mais popular framework para a criação de interfaces usando HTML, CSS e Javascript. É ótima para construir os protótipos e facilitar a implementação de funcionalidades corriqueiras. Ele surgiu devido à necessidade de uniformizar a aparência e funcionalidade dentro das aplicações criadas pelo Twitter.
Algum tempo depois, o Bootstrap foi liberado para o público e por muito tempo, era visível que muitos sites se utilizavam da framework, às vezes sem qualquer customização. Chegava até ser engraçado. Ainda é comum encontrar sites assim, principalmente de serviços públicos, onde há diversos programadores e poucos designers para dar uma cara aos sistemas, sobrando usar o que dá resultado mais rápido.
Eu também usei por ele muito tempo e não me arrependo, é uma ferramenta madura e bem desenvolvida, customizável e bem documentada. Não se manteve no mercado após tantos anos à-toa.
No entanto, acabei por perceber que no final das contas, eu usava o Bootstrap por causa da famigerada grid que ele me dava acesso e não tanto pelos estilos predefinidos de formulário e outros componentes.
Porém, conforme eu escrevia o meu código, eu via o meu HTML ficar da seguinte maneira:
<div class="row">
<div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
<!-- Seu conteúdo fica aqui -->
</div>
<div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
<!-- Seu conteúdo fica aqui -->
</div>
<div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
<!-- Seu conteúdo fica aqui -->
</div>
<div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
<!-- Seu conteúdo fica aqui -->
</div>
</div>Repare o número de classes por <div>. Cada um precisa ter todas as classes para se obter o efeito desejado de responsividade. É um processo bem repetitivo e deixa o código menos legível do que deveria ser. Convenhamos que há uma certa curva de aprendizado para entender como usar as 12 colunas (caso não tenha personalizado este número) e memorizar para que servem todas essas abreviações xs, sm, md e lg.
E se o mesmo efeito acima pudesse ser obtido de outra maneira, mais simples e intuitiva? Sem se preocupar com número de colunas e adicionar classes em cada elemento? Ficaria algo assim:
<div class="four columns one-phone">
<div class="sua-classe">
<!-- Seu conteúdo fica aqui -->
</div>
<div class="sua-classe">
<!-- Seu conteúdo fica aqui -->
</div>
<div class="sua-classe">
<!-- Seu conteúdo fica aqui -->
</div>
<div class="sua-classe">
<!-- Seu conteúdo fica aqui -->
</div>
</div>Pensando nisso, resolvi criar minha própria grid em flexbox.
Procurei diversos concorrentes e todos tinham o mesmo princípio do Bootstrap: lotar os elementos de classes para deixar o CSS mais simples. É por isso que você vê por aí grids com 12 KB ou menos. Na minha opinião, não é o CSS final que precisaria ser mais simples, e sim a criação da página.
O resultado da minha tentativa se chama Grade, uma grid em flexbox simples e intuitiva, que faz o seu código ficar como o exemplo acima, além de dar uma liberdade de número de colunas que o Bootstrap não dá.
Se você é entusiasta do Bootstrap, não precisa deixar de usá-lo. A Grade é compatível com outras frameworks: é só baixar e usar.
Resumindo, este foi o motivo de não usar mais o Bootstrap: criei a minha própria grid. Nada contra ele, mas prefiro a minha!