As 5 principais alternativas de inicialização

O 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, provavelmente encontrará o Bootstrap por baixo. Todos nos acostumamos a conceitos como fluido de contêiner, linha, col-sm-6 etc., que é difícil imaginar que qualquer outro estilo de desenvolvimento de front-end seja possível. E assim, quando precisamos construir o próximo projeto, buscamos o Bootstrap inconscientemente. Dito isto, a popularidade não torna o Bootstrap uma boa opção para todos os projetos e necessidades.

De fato, para frontends realmente enxutos, carregando todo o CSS de inicialização e JS podem causar grande inchaço.

Este artigo tem dois propósitos:

  1. Fornecer alternativas ao vivo não semelhantes ao Bootstrap para o Bootstrap
  2. Explique por que você pode considerar essas alternativas no Bootstrap

Eu acho que a parte da explicação é realmente importante porque, na maioria dos casos, as pessoas nem percebem que têm um problema ou que estão dificultando seu trabalho escolhendo o Bootstrap. Por fim, observe 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, por isso não me preocupo com muitas coisas ao criar meus front-ends.

E com isso, vamos dar uma olhada em quais alternativas temos.

Grade Flexbox

Pense nisso por um minuto: o maior motivo pelo qual você começou a usar o Bootstrap e ainda o está usando é o seu sistema de grade. Claro, demorou um pouco para me acostumar com as classes row, col-md-6 etc., mas agora é uma segunda natureza pensar em um layout em termos de linhas, colunas, compensações etc..

E se você for honesto consigo mesmo, descobrirá que todo o resto do Bootstrap é um pouco difícil de trabalhar. Há muitas aulas para se lembrar, esteja você criando formulários, navegação, botões, tabelas ou qualquer outra coisa. Se você é como eu, ainda não se acostumou a todas as classes e o que elas fazem, e geralmente usa o Bootstrap apenas para a grade e escreve você mesmo todo o outro CSS.

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, diferentemente da técnica CSS, toda a complexidade é bem abstraída, para que você se concentre apenas em colocar os elementos da maneira que desejar. A melhor parte é que todos os nomes de código e classe imitam o que você deseja no Bootstrap 4, o que significa que a alternância entre essas duas ferramentas requer zero atrito mental. Por exemplo, eis o código do “espaço ao redor” na Flexbox Grid:

por aí

por aí

por aí

O arquivo CSS reduzido para esse 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 de baunilha e estilizá-los, usando o Flexbox Grid sempre que precisar.

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 que precisava?

Bem, PureCSS foi adiante 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 compactados em gzip, têm 3,7 KB, embora individualmente representem mais. O módulo de grade é de apenas 0,8 KB, enquanto o módulo Base é de 1,0 KB. A equipe por trás do PureCSS diz que foi construído inteiramente com dispositivos móveis em mente e, portanto, todas as linhas de CSS foram examinadas cuidadosamente quanto à eficiência antes de serem incluídas..

Então, digamos que você precise apenas do módulo de grade e formulários. Bem, basta fazer o download desses dois (junto com o módulo Base) e você terá menos de 3,4 KB! Não é necessário incluir o CSS dos módulos Buttons, Tables e Menus se você não for usá-los.

O PureCSS tem suas classes, no entanto, e o código resultante não imita o Bootstrap ao qual você pode estar muito acostumado:

Lorem Ipsum

Dolor Sit Amet

Trabalho Proident

Consectetur elogioso

Você notará que não há mais grade de 12 colunas. O PureCSS possui 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, o PureCSS é uma ferramenta CSS (estrutura?) Libertadora e surpreendente, que você pode escolher conforme necessário. Dito isso, ele vem com uma boa quantidade de curva de aprendizado e aprendizado, pois você precisa aprender uma nova maneira (ligeiramente diferente) de fazer as coisas.

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

Zimit

o Zimit O framework é meio estranho nessa lista. Sim, é uma estrutura para a criação de UIs, mas é direcionada a tipos específicos de UI: modelos.

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.). As páginas seriam perfeitas em pixels, o esquema de cores elegante e bem escolhido e as páginas abertas para participação, resenhas, 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, assemelha-se ao tom “acinzentado” do design da estrutura de arame
  • É fácil de aprender
  • Possui algum pré-processador CSS embutido

O Zimit verifica todas essas caixas. Tem apenas 84 KB de tamanho e tem uma ampla variedade de componentes para escolher. Aqui estão alguns exemplos que eu achei realmente atraentes, pois codificá-los por conta própria levará muito tempo.

Vista em árvore

Migalhas de pão

Guias

Há muito mais coisas para explorar. Vê-los aqui.

Vamos ver como é o código. Veja como você usaria o sistema de grade no Zimit:

4 colunas
4 colunas

4 colunas
4 colunas

O “c” aqui significa “coluna”, então “c4” significa uma coluna que abrange quatro unidades (a grade é de tamanho 12, exatamente como a do Bootstrap). Muito parecido com o 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 sejam responsivos e tenham 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.

KickStart em HTML

Na maioria dos projetos que você cria, a velocidade é crítica. O maior obstáculo para acelerar o desenvolvimento da Web é a parte do front-end, e o maior “retardador” no desenvolvimento do front-end é a necessidade de codificar componentes interativos e elegantes. Como existem 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.

KickStart em HTML 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 interessantes que encontrei:

Suspenso

Botões

Guias (centralizadas e com ícones)

Materializar

Se você gosta do Bootstrap pelo fato de ele ter uma solução pronta para todos os problemas comuns de design da web, mas você é um fã do estilo de design de materiais, experimente Materializar.

O 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 possui certas vantagens que podem atrair muitos.

Empurrar puxar

O recurso push / pull do Materialize CSS permite reordenar colunas. Isso lembra o novo padrão CSS Grid, em que o layout é diferente da ordem dos elementos.

Esta div tem 7 colunas de largura e é empurrada para a direita por 5 colunas.
5 colunas de largura puxadas para a esquerda por 7 colunas.

Isso resulta no seguinte:

Você notará que as colunas mudaram de lugar, o que talvez seja inatingível no CSS tradicional baseado em Bootstrap.

Guloseimas JavaScript

Existem alguns recursos e efeitos JavaScript fornecidos com o Materialize. Dicas de ferramentas, brindes (notificações efêmeras do Android), Parallex, Pushpin, etc., são algumas delas. Um efeito realmente incrível que eu gostei é o FeatureDiscovery, que basicamente permite destacar um elemento da página em algum evento (por exemplo, pressionar o botão) para chamar a atenção do usuário para esse elemento. É difícil descrevê-lo completamente 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 CSS de materiais com todos os recursos.

Conclusão

Bootstrap é sinônimo de design responsivo. Foi o Bootstrap que popularizou o termo “design para dispositivos móveis” e mostrou como ele poderia ser feito. Mas enquanto o Bootstrap realiza o trabalho na maioria das vezes, apenas o trabalho nem sempre é suficiente. Se você acha que o Bootstrap o está restringindo e que suas necessidades são especiais, uma das opções listadas aqui o ajudará. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map