10 Melhores Frameworks CSS para Desenvolvedores Front-End

Certa vez, ouvi uma piada de desenvolvedor front-end: “A NASA pousou robôs em Marte e ainda estamos lutando para alinhar nossas divs ao centro!” E isso me faz sentir mal por essa piada ter muita verdade. Fazer algo que parece tão fácil e orientado pelo senso comum quanto centralizar uma caixa dentro de uma caixa é incrivelmente difícil de resolver em CSS. A menos que você o tenha encontrado antes. E salvou o trecho de código em algum lugar. E mesmo se você conseguir, há sempre o medo de que ele possa quebrar horrivelmente em algum navegador idiota em algum lugar! Laços CSS para o primeiro ponto de “males da web necessários”, juntamente com JavaScript. É um padrão que evoluiu ao acaso, foi interpretado de maneira diferente por diferentes fabricantes de navegadores e agora está tão cheio de contradições que ninguém ousa se chamar um “especialista em CSS”.


Não é de admirar, portanto, que as estruturas de CSS tenham surgido ao longo do tempo e tirado a maior parte do sofrimento. Hoje, não podemos imaginar a codificação sem a nossa estrutura CSS favorita, pois a segmentação de vários tamanhos de tela se tornou uma necessidade.

Mas como você sabe que sua estrutura é a melhor para o trabalho em questão? Além disso, se você é novo no desenvolvimento de front-end, qual estrutura deve ajudá-lo a escolher?

Esta publicação lança um olhar abrangente sobre o cenário de desenvolvimento do front-end e compara os líderes entre as estruturas CSS. Portanto, se você está cansado de codificar manualmente as regras CSS, mergulhe para um alívio rápido!

Bootstrap

Uma iniciativa do Twitter, Bootstrap assume o crédito pela introdução de um design responsivo em larga escala. Foi a primeira estrutura a promover a filosofia de “mobile-first”. Já não estava projetando para tamanhos de tela menores um projeto separado; tudo o que você precisava fazer era incluir as classes relevantes do Bootstrap, e o design seria ajustado automaticamente para diferentes tamanhos de tela (bem, quase).

Design responsivo no Bootstrap (4.0 vs. 3.0)

O Bootstrap alcançou um design responsivo, introduzindo a ideia de uma grade. Uma grade é uma partição invisível da tela em colunas (junto com a largura). Por exemplo, se você tiver três “caixas”, deseja posicionar lado a lado em telas grandes, mas verticalmente em telas menores, é isso que você faria:

Uma das três colunas

Uma das três colunas

Uma das três colunas

A versão popular atual do Bootstrap é 4, o que foi uma grande reforma na série 3.3. A sintaxe acima é como você codifica no Bootstrap 4, que deve muito de sua elegância ao poder bruto de Flexbox e outros recursos modernos de layout suportados diretamente pelos navegadores. Nas versões inferiores do Bootstrap, a grade foi definida como um total de 12 colunas, o que resultou em código como

para fazer com que uma div ocupe um terço da largura da tela em dispositivos de tamanho grande e metade da largura em dispositivos de tamanho médio. A sintaxe agora é muito mais agradável, embora exija familiaridade com o Flexbox.

Profissionais do Bootstrap

Há muito o que gostar sobre o Bootstrap, especialmente para desenvolvedores de pilha cheia:

  • Prototipagem rápida: Com o Bootstrap, quase não há necessidade de pensar em posicionamento CSS complicado e incompatibilidades do navegador. Tudo o que você precisa fazer é escrever o HTML e, em seguida, aplicar as classes CSS apropriadas, faz com que a capacidade de resposta ganhe vida..
  • Grande ecossistema: Atualmente, o Bootstrap possui o maior ecossistema dentre as estruturas de front-end. O número de layouts de sites, temas, painéis de administração, componentes de interface do usuário etc. criados com o Bootstrap é impressionante e continua melhorando. Para consultores e empresas de produtos, isso significa que itens pré-construídos e suporte comunitário sempre serão suficientes.
  • Apoiado pelo Twitter: Uma tendência emergente em código aberto é o aumento de projetos patrocinados por uma entidade comercial. Mais frequentemente, essas entidades constroem negócios lucrativos em torno de suas ofertas. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) etc. são alguns exemplos. Quando um projeto é apoiado por uma entidade estabelecida e não é uma demonstração individual, ele confia à comunidade (especialmente aos clientes corporativos) que o projeto terá um roteiro claro e um futuro a longo prazo..
  • Grande coleção de componentes: O Bootstrap oferece, imediatamente, quase todos os componentes da interface do usuário que você provavelmente precisará. Navegação, formulários, cartões, modais, botões, emblemas, barras de progresso, alertas. . . Você o nomeia e o Bootstrap possui. Para muitas empresas, isso praticamente reduz a necessidade de ter uma equipe de front-end dedicada.
  • Suporte LESS e SASS: Entre as estruturas CSS massivamente populares, o Bootstrap é o único que suporta LESS e SASS. Sim, eu sei, você não usa o LESS (como nenhum desenvolvedor que se preze deve, certo?), Mas ei, existem projetos enormes por aí que dependem do LESS. Claro, você não pode escolher nenhum e escrever seus arquivos CSS comuns.

Contras do Bootstrap

Nada é sem preço, não é? Bem, o Bootstrap não é exceção. Com o tempo, o Bootstrap passou por grandes críticas de designers e especialistas em interface do usuário. Aqui está o porquê:

  • Monotonia de UX: O fato de o Bootstrap ter uma coleção tão grande de recursos internos resulta em sites que parecem familiares demais e, honestamente, aborrecidos. Você só precisa ir para o exemplos oficiais para ver o quanto os padrões são dolorosos. Pesquise “todos os sites de inicialização parecem iguais” e você saberá o que quero dizer. ��
  • Problemas de estilo: Bootstrap é o que pode ser considerado uma estrutura opinativa. Em outras palavras, ele tem idéias sobre layouts e faz com que você trabalhe mais se quiser que ele pareça / se comporte de maneira diferente. Considere os pontos de interrupção CSS padrão para larguras de tela: uma tela de tamanho médio para o Bootstrap é aquela que começa com uma largura de dispositivo de 768px. E se você quiser segmentar, digamos, o limite de 600px? Bem, boa sorte com isso! É o mesmo com quase todos os outros componentes no bootstrap: linhas e contêineres têm seu preenchimento padrão, botões têm cores e bordas que são muito difíceis de substituir sem muito trabalho e assim por diante.

Quer dominar o Bootstrap? Veja isso curso online por Brad Traversy.

Fundação

Se as tecnologias fossem religiões, os caras da Fundação e do Bootstrap estariam procurando o sangue um do outro. Nenhuma discussão sobre estruturas CSS modernas está completa sem mencionar o Foundation, então aqui vamos nós.

Chefe da Fundação local na rede Internet, e você não pode deixar de notar a assinatura: “A estrutura de front-end responsiva mais avançada do mundo”. À primeira vista, parece uma reivindicação alta para uma campanha de marketing.

No entanto, os adeptos da estrutura da Fundação sabem que há pelo menos alguma verdade nisso. O Foundation foi desenvolvido para ir naturalmente com a estrutura do Rails, e vários dos princípios orientadores do tipo zen do Rails podem ser vistos no trabalho.

Por exemplo, se você deseja uma linha que contenha dois elementos em telas pequenas, três na mídia e quatro em telas grandes, o código equivalente no Foundation será semelhante a:

Em comparação com as versões anteriores do Bootstrap, acho isso muito intuitivo e fácil de memorizar. Não há mais doze grades de colunas e descobrindo o que 4/12 deveria ser!

Embora o Foundation seja muito menos popular que o Bootstrap, é um segredo comercial para muitos desenvolvedores especialistas em front-end.

Prós da Estrutura da Fundação

O Foundation possui algumas características incomuns em todas as estruturas de CSS que consideraremos neste artigo:

  • Ferramentas completas: É tecnicamente errado dizer que o Foundation é uma estrutura CSS. Quero dizer, sim, mas foi construído como uma coleção grande e modular de ferramentas que visa solucionar quase todos os tipos de problemas de front-end. Existem ofertas de estrutura separadas para sites e emails, altamente otimizadas para seus respectivos domínios. O Foundation também vem com uma interface de linha de comando (CLI), que soa como música aos ouvidos dos desenvolvedores acostumados a trabalhar com o Webpack ou outros empacotadores de módulos.
  • Extrema flexibilidade: Diferentemente do Bootstrap, o Foundation foi criado para fornecer ao desenvolvedor front-end controle total sobre suas UIs. Como resultado, a Foundation se sentirá insossa e enormemente complexa para o recém-chegado. No entanto, o motivo é que o Foundation não impõe nenhuma linguagem de estilo a você, mas pretende ser exatamente o que é: uma excelente estrutura CSS.
  • Mais do que apenas componentes da interface do usuário: Embora o Foundation tenha a coleção usual de elementos da interface do usuário, vai muito além do dever. Os desenvolvedores incluíram um sistema avançado de imagem responsiva, um componente da tabela de preços (sim, aquele usado para mostrar vários planos de preços), validação de formulário, suporte da direita para a esquerda, incorporações responsivas e muito mais. Gostaria de enfatizar novamente que isso é um exagero para a maioria dos sites simples, mas para os grandes, é um benefício que os desenvolvedores experientes reconhecerão.
  • Treinamento e consultoria: Agora, enquanto o Bootstrap é criado pelo Twitter, é um projeto paralelo e uma parte muito pequena da imagem geral. A empresa por trás da Foundation (ZURB), no entanto, está comprometida em usá-la, desenvolvê-la e promovê-la. São oferecidos cursos de treinamento e consultoria profissional para grandes clientes, o que é ótimo para empresas que têm como alvo projetos maciços e estão dispostas a pagar.

Contras da Estrutura da Fundação

Os pontos fortes de uma estrutura se tornam suas fraquezas quando vistos do ponto de vista oposto. Eis por que o Foundation pode não ser a melhor escolha para o seu projeto:

  • Comunidade pequena (er): A comunidade da Foundation é muito menor que a do Bootstrap e, se você está tentando algo exótico e fica paralisado, as chances de encontrar ajuda relevante são menores. No entanto, eu acrescentaria isso para todos os fins práticos; há comunidade suficiente por aí. Apenas várias ordens de magnitude menores que as do Bootstrap, portanto, você pode não encontrar soluções instantaneamente.
  • Complexidade: Se você está acostumado a Bootstrap ou algo simples, ou pior, a baunilha de CSS, o Foundation parecerá uma explosão infinita de complexidade. Camadas em camadas, componentes com componentes, infinitas opções de personalização. . . Logo você começará a questionar a utilidade da própria vida! Mas, novamente, a Fundação tem um objetivo muito diferente e não pode ser responsabilizada por isso.
  • Muitas opções: Às vezes você só quer fazer merda e se preocupar com a perfeição mais tarde. Durante esses períodos, é frustrante receber muitas opções com pequenas variações. Por exemplo, pense em pedir um sanduíche de metrô quando estiver com tanta fome que poderia comer lama. Naturalmente, a Fundação não é para momentos como esse.
  • Disponibilidade de talentos: Como o Foundation é (muito) menos popular que o Bootstrap, o talento disponível é muito menor. Como regra geral, é quase provável que qualquer novo contratado conheça o Bootstrap, mas não terá idéia sobre a Foundation. O aprendizado leva tempo, e é um luxo que nem todas as equipes podem ter.

Bulma

Bulma é um participante relativamente novo no campo de batalha das estruturas CSS e criou um nome para si em pouco tempo. Sua atratividade reside em uma abordagem rigorosa, somente CSS (não há componentes JavaScript) e padrões elegantes, algo que muitos desenvolvedores com um bom olho no design têm problemas ao trabalhar com o Bootstrap.

Grande parte do momento da Bulma vem das altas taxas de adoção da comunidade Laravel (uma estrutura da Web PHP, caso você não saiba), o que tenho certeza de que foi o que ajudou o Vue.js a alcançar o ponto mais alto da popularidade. entre estruturas JavaScript.

Por que escolher o Bulma CSS Framework

Há muitas razões para gostar do Bulma e usá-lo no seu próximo projeto:

  • Bastante popular: Ok, não é mais popular que o Bootstrap, mas é mais popular que o Foundation. Até o momento, Bulma tem mais de 30k estrelas no Github, cerca de 3k + a mais que o Foundations. É claro que várias estrelas do Github não são métricas de mérito, mas dizem que a comunidade aprova Bulma.
  • Classes extremamente legíveis: Bulma, para mim, tem as classes CSS mais legíveis de todas as estruturas que eu tentei. Há também um sistema ridiculamente poderoso e simples para criar grades no estilo Metro, chamadas de blocos (basta olhar para o código na segunda metade da captura de tela e me dizer que você não está impressionado!).

  • Curva de aprendizado plana: A Bulma é altamente modular e foi criada para resolver os problemas práticos do dia a dia que equipes menores e desenvolvedores individuais encontram. Você verá que Bulma é muito fácil de aprender, embora eu ache que um bom histórico em CSS é sempre bom ter uma idéia do que pode estar acontecendo sob o capô. Isso o ajudará quando você deseja substituir o comportamento padrão.
  • Elegante: Bem, dê uma olhada na seção Herói padrão para Bulma abaixo. Disse o suficiente!

A Bulma tem uma comunidade pequena, mas extremamente apaixonada. Portanto, se você deseja acabar com todo o frizz e ainda assim criar UIs de aparência elegante em tempo recorde, a Bulma é o caminho a seguir. Para os desenvolvedores do Bootstrap, a Bulma possui uma seção separada para convencer e ajudá-los a migrar.

UIkit

O que vem à mente quando se pensa em UIkit é minimalismo. Minimalismo não em recursos (de fato, ele oferece talvez o maior número de recursos de todos os frameworks), mas em design. Se você gosta de designs super limpos, elegantes e com pouco espaço em branco, o UIkit cobre você.

Por exemplo, dê uma olhada no componente da barra de progresso:

Ou o componente marcador de imagem (um marcador interativo orientado a JS para imagens):

Ou até o humilde formulário HTML:

Se isso não grita elegância no topo de seus pulmões, não sei o que faz. Basta acessar o site UIkit e conferir todos os componentes incríveis que ele oferece. A menos que seu gerente de projeto ou cliente imponha uma linguagem de estilo específica a você, acho que o Uikit assume a coroa do design de interface do usuário e está várias milhas à frente do Design de material do Google.

Mas há um problema, você está se perguntando. Sim existe. Como o Bootstrap, o UIkit funciona com seu JavaScript e, embora você possa usar o jQuery para manipulação do DOM, é impossível usar uma estrutura DOM virtual como o React.

Além disso, o Uikit é um sistema independente, e você não poderá modificá-lo ou ampliá-lo sem fazer um esforço considerável..

UI semântica

Outro candidato na corrida é UI semântica, que tenta se distinguir com muitos temas e personalização. Existem mais de 3000 variáveis ​​temáticas, o que resulta em uma enorme amplitude. Ou então os documentos dizem.

O Bootstrap 4 cobre tudo isso e também é totalmente personalizável, mas uma vantagem da Semantic UI é que ela resulta em layouts de boa aparência por padrão. Ainda assim, não é o mais bonito do momento, e é por isso que eu o coloco mais tarde na minha lista.

Ele também possui uma das curvas de aprendizado mais íngremes e as convenções de codificação são muito mais rigorosas. Tente; Eu diria e veria se parece com algo que você pode preferir.

Susy

Susy é uma estrutura pouco conhecida neste momento, mas é uma ideia fascinante e refrescante. Outra estrutura de layout puro, Susy elimina todas as idéias predefinidas de flutuação, grade, Flexbox, tabelas ou qualquer outra coisa e permite que você componha o tipo de layout que deseja. “Compor” é a palavra-chave aqui, pois Susy se destina a criar layouts impressionantes e altamente modulares, com necessidades ultra-complexas, incomuns e precisas.

Nas mãos do desenvolvedor especialista, Susy é como um lança-chamas que tira tudo o resto. Os mortais menores, é claro, conseguirão queimar suas mãos.

Para ter uma idéia do poder de Susy, experimente esta configuração padrão (SASS):

// 4 colunas fluidas simétricas
// calhas têm 1/4 do tamanho de uma coluna
// os elementos medem 1 menos calha que as colunas
// os contêineres também têm menos 1 sarjeta
$ susy: (
‘colunas’: susy-repeat (4),
«sarjetas»: 0,25,
‘spread’: ‘estreito’,
‘spread-container’: ‘estreito’,
);

Eu acho que o código é bastante auto-explicativo, embora não seja para quem tem pressa. �� Susy faz todo o sentido se você está cansado de todo o inchaço que as estruturas modernas lhe impõem e tem necessidades de layout que você sabe que nenhuma estrutura comum pode servir.

Materializar

Se você gosta do design de materiais do Google, Materialize é um estrutura você vai gostar. O melhor é que ele tem apenas um punhado de componentes e aulas para aprender e se concentra em torná-lo produtivo o mais rápido possível. Existem poucas opções de personalização, e o Materialize segue o popular formato de grade de 12 colunas estabelecido pelo Bootstrap.

Se você me perguntar, porém, um Design material está se tornando tão comum, e é assim. . . Por padrão, por padrão, que em breve estaremos reclamando disso, como fazemos com o problema de todos os sites parecerem o mesmo do Bootstrap. Ainda assim, é uma boa estrutura para começar.

Puro

O Yahoo está morto?

Não, essa pergunta não é uma distração, mas destaca uma observação importante: o Yahoo construiu o Estrutura pura e liberado sob a licença BSD.

Uma rápida olhada me impressiona e me pergunto por que essa oferta não é conhecida por mais pessoas. Enfim, o que torna Pure, bem, puro, é que é uma estrutura CSS pura. �� De fato, os desenvolvedores fizeram um esforço extra e dividiram-no em diferentes módulos CSS que você pode importar conforme necessário. Portanto, se você precisar apenas do sistema de grade, não há necessidade de importar todo o CSS e aumentar o tempo de carregamento do site.

A grade Pure vem em vários sabores: 5, 2, 24, etc., portanto, quando se trata de criar colunas, você tem muito mais flexibilidade. O Pure não é a estrutura CSS mais bonita por padrão, mas posso ver como ela agrega valor àqueles que desejam resolver um pequeno problema de CSS em sua interface do usuário e se assustam com os padrões “úteis” que outras estruturas acompanham..

Esqueleto

Como você pode ver na captura de tela, Esqueleto é tão mínimo que nem se chama estrutura, biblioteca ou módulo CSS. É padrão, e contém apenas 400 linhas de código-fonte! Incrível? Acho que sim, mas para colocar as coisas em perspectiva, o Skeleton foi projetado para projetos pequenos ou pequenos que precisam de pouco mais do que layouts e posicionamento.

Vale uma olhada; afinal, quem sabe, o esqueleto pode ser o que você estava procurando o tempo todo!

Miligrama

O último da lista é Miligrama, uma estrutura CSS projetada para velocidade e produtividade. Os desenvolvedores mantiveram o tamanho inferior a 2 KB, o que, para os padrões de hoje, significa muito.

Um miligrama é uma pequena e divertida visão das estruturas CSS com as quais você gostaria de trabalhar. É fácil estendê-lo e, com algumas linhas de CSS personalizadas, você pode mudar a aparência da maneira que desejar.

Então, qual estrutura CSS é a melhor?

Admita, você já fez perguntas semelhantes antes e recebeu a seguinte resposta decepcionante: nenhuma. �� A seleção de uma estrutura (ou uma ferramenta, ou mesmo uma pessoa em sua vida, nesse caso) depende de muitos fatores. Se você quer meu conselho, aqui está: Corte o barulho. Só porque as pessoas estão ficando loucas por algo novo e brilhante não significa que você precise aprender ou ficará para trás. Experimentar coisas novas é ótimo, mas andar em círculos em busca da ferramenta perfeita é um desperdício.

Então, qual dessas estruturas você já tentou? Ou talvez algo surpreendente seja o que acabei de perder? Deixe-me saber nos comentários, por favor. Amor, ódio, oi aleatórios, todos são bem-vindos!

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