6 Fameworks CSS que todo desenvolvedor precisa aprender. framework CSS é uma ferramenta criada para otimizar o tempo, e dar consistência para um projeto.
Com a falta de tempo, prazos curtos que as empresas passam para realizar um projetos, optar por uso de um Framework em projetos de front-end é uma boa saída.
Além de otimizar muito o tempo, por contar com recursos e componentes prontos, seus projetos vão manter uma consistência visual o que é muito importante para uma boa entrega.
Além disso, seu projeto estará sempre atualizado, pois a comunidade na internet desses Frameworks CSS possui milhares de colaboradores, que reportam bugs, e inconsistências para correções.
Neste post vamos listar 6 dos mais importantes Frameworks CSS existentes, todos eles são 100% gratuito, pronto para uso.
Bootstrap
O Bootstrap é o mais popular entre eles, desenvolvido pelo Twitter e está em sua versão 4 ganhou mudanças significativas.
Totalmente construído em Flexbox, com novos esquemas de cores e em SASS vs LESS. É o Framework que considero mais fácil de usar, suas classes são simples de entender, está sempre atualizado e possui versão para jQuery e para VueJs.
Pontos positivo do Boorstrap
O mais popular: o Bootstrap é um dos projetos de código aberto mais populares do mundo, com isso você tem uma grande facilidade de encontrar possíveis soluções para problemas encontrado no meio do projeto.
Um dos mais completos: o Bootstrap possui centenas de componentes prontos para ser usado, alertas, modais, formulários e muito mais, e sempre está sendo atualizado com mais componentes.
Customizavel: fácil de customizar, é todo escrito em SASS, você pode instalar o pacote usando NPM, e importar todos arquivos que precisa ser atualizado em seu projeto.
Suporte: O Bootstrap é uma comunidade gigantesca de desenvolvedores, garantindo sempre atualizações e correções de problemas.
Pontos negativos
Dificuldade em substituir: em alguns caso pode ser um pouco difícil de substituir o design e sobrescrever algumas classe, já que algumas vem com !important, com isso substituir os padrões pode ser um pouco complicado.
Usado de mais: Por ser um pouco de substituir alguns padrões e com grande numero de pessoas usando o Boostrap, alguns sites se tornam muito iguais, isso pode incomodar alguns desenvolvedores.
Bulma
O Bulma é um Framework totalmente em CSS sem absolutamente nenhum JavaScript, totalmente construído em Flexbox, totalmente mobile first e em SASS, possui vários componentes com um design moderno.
Pontos positivos
Visual: O framework com o visual mais bonito que eu conheço, mesmo que o design não seja alterado você consegue criar uma página completa com um design bem limpo e bonito.
Moderno: Uma das primeira estruturas a ser completamente desenvolvida com Flexbox, que facilita o desenvolvimento de sites responsivos.
Fácil personalização: Você pode alterar todos os padrões do Bulma usando SASS em questões de minutos.
Pontos negativos
Menos completo: o Bulma diferente do Bootstrap possui menos componentes, o que acaba sendo um problema para alguns desenvolvedores.
Estilos distintos: No mesmo caso do Boostrap, se for criado muitos sites sem muitas alterações pode acabar com vários sites muito iguais.
MaterializeCSS
Framework baseado no Material Design do Google com uma estrutura voltada a experiência do usuário com objetivo de deixar mais fácil o uso. O Framework é gratuito porem possui alguns temas que são pagos.
Pontos positivos
Material Design: uma estilo de design amplamente usado e conhecido por muitos usuários, com fácil utilização e amigavel, isso pode ser um ponto positivo para seu projeto.
Dispositivos móveis: totalmente compatível com dispositivos moveis, e muito focado na usabilidade usando componentes flutuantes e que favorecem o uso facilitado do usuário.
Completo: possui centenas de componentes completos e prontos para uso, alguns requer o conhecimento um pouco avançado de JavaScript.
Pontos negativos
Design: se você quer algo diferente do design do materialize, use outro frameworks, pois com ele é muito dificil de alterra o design.
Projeto independente: Tem uma comunidade ativa, mas trata-se de um projeto independente sem suporte.
Fundation
Desenvolvido para facilitar a criação de estruturas HTML de sites e-mail e blogs, facilita a criação de sites flexíveis e completamente personalizáveis.
Porém exige uma certa experiência com Front-end, porém possui uma boa documentação que facilita a manipulação dos recurso.
Pontos positivos
Design: O Fundation, possui um design genérico de pode ser facilmente alterado.
Completo: Também possui centenas de componentes pronto para uso.
Design para e-mail: Também possui design para e-mail marketing, com isso você consegue padronizar todo seu design incluindo o e-mail.
Pontos negativos
Difícil de aprender: Possui muitos recursos, e da total liberdade para os desenvolvedores, mas para isso você tem que estudar bastante antes de por a mão na massa.
TailwindCSS
Tailwind CSS é uma estrutura CSS de baixo nível altamente personalizável que fornece todos os blocos de construção de que você precisa para criar designs sob medida, sem nenhum estilo opinativo irritante que você precise lutar para ignorar.
Pontos positivos
CSS atômico: Para adicionar uma cor normalmente você usa o arquivo css para essa função, com O TailwindCSS você consegue realizar essa função usando classe, sem precisar mexer no arquivo CSS. em algumas metodologias isso é chamado de CSS atômico, onde classes são usadas para descrever a função do elemento.
Não possui nenhum estilo: ele não vem com nenhum componente criado, apenas classes para estilizar e posicionar elementos, com isso você pode criar seus próprios componentes e criar o design que quiser sem precisar substitui-los.
Componentes reutilizáveis: O tailwindCSS não vem com nenhum componente criado, mas todos os componentes que for criado por você pode ser reutilizável e ainda no site oficial (link abaixo) você encontra alguns exemplos de componentes para usar.
Pontos negativos
Curva de aprendizado: Recomendado para desenvolvedores mais avançados, como ele não fornece componentes prontos, você precisa ter conhecimento para conseguir criar os componentes.
Não deve ser usado diretamente: Para adicionar o TailwindCSS em seu projeto você precisa ter conhecimento em alguma ferramenta de construção Front-End como gulp, webpack etc.
Pure.CSS
Desenvolvido pelo Yahoo, esse é uma microestrutura compacta e que oferece módulos CSS que podem ser usados e reutilizados em qualquer projeto.
Pontos positivos
Pequeno: Cada linha foi cuidadosamente criada para tornar o Framework compacto e leve.
Customizavel: você consegue importar apenas o modulo que deseja usar e customizar da forma que quiser.
Suporte: Com apoio do Yahoo uma empresa de norme forte torna o Pure um framwork seguro para ser usado.
Componentes: também possui uma serie de componentes prontos, responsivos prontos para ser usado.
Pontos negativos
Para usuários avançados: você precisa ter um design pronto para começar a usar o Pure.
Conclusão
Ainda existem centenas de Frameworks na internet, passamos os que achamos serem os mais importantes e usados no momento.
Aqui no blog ainda tem outro artigo com 7 Bibliotecas CSS para desenvolvedores que podem ser usadas para complementar seus projetos usando um dos Frameworks citados acima.
Espero ter ajudado 🙂
