Tempo de leitura: 5 minutos
Olá Desenvolvedores! Como estão?
A maioria de vocês já aproveita as vantagens de se trabalhar com Frameworks CSS, principalmente quem desenvolve projetos mais complexos e que precisam ganhar tempo.
Com a facilidade de se reutilizar os códigos e fazer poucas modificações ganha-se tempo e dá ao desenvolvedor uma mega caixa de ferramentas que supera o que é fornecido pela própria linguagem.
Ou seja, um Framework tem como prioridade fornecer um template com inúmeras funções para o desenvolvedor, justamente para o mesmo não precisar ficar reproduzindo funções desnecessárias em seus projetos.
Porém hoje iremos focar exclusivamente nos Frameworks CSS e iremos abordar 5 em especial, que são:
#1. BootStrap
O Bootstrap foi criado pelos desenvolvedores do Twitter e lançado inicialmente em 2011, e atualmente é considerado um dos mais populares Frameworks CSS do mercado e, inclusive, é o Framework Open Source (código aberto) mais utilizado no mundo.
Como qualquer Framework CSS eficaz, o Bootstrap inclui vários componentes CSS, HTML e JavaScript. Adota os padrões do web design responsivo, permitindo que você desenvolva sites responsivos de todas as complexidades e tamanhos.
Como é atualizado constantemente, o Bootstrap normalmente inclui os melhores e mais recentes recursos.
Um exemplo disso foi a adição de temas que atendiam as diretrizes do Google’s material design pouco depois de serem publicados, e também foi atualizado para utilizar o SASS como um pré-processador CSS.
Ele é ideal para desenvolvedores iniciantes e aqueles que preferem um framework CSS mais robusto.
Seguem alguns links úteis para você se aprofundar mais no assunto:
Documentação Oficial / Iniciando com o Bootstrap / Open Source, Temas Gratuitos
#2. Materialize
O Framework responsivo CSS Materialize também incorpora as especificações do Google’s material design e é carregada com botões, ícones, cards, formulários e outros componentes prontos para serem usados.
É disponibilizado em uma versão padrão e em uma que é executada no SASS.
Materialize inclui um conveniente recurso de IZ column grid (grade de coluna IZ) que pode ser usado para os layouts do seu site.
Também é carregado com CSS que está pronto para usar no material design como: sombras, tipografia, cores e muitos outros recursos.
As características adicionais incluem animação com efeitos ondulatórios, menus móveis drag-out (arrastar), SASS mixins e muito mais.
Ele é ideal para desenvolvedores menos experientes que precisam de orientação sobre as especificações do Google’s material design.
Seguem alguns Links úteis para você se aprofundar mais no assunto:
Documentação Oficial do Materialize / Github do Materialize
#3. Material UI
Se você está buscando por um Framework CSS que facilite a aderência às diretrizes do Google’s material design, você não vai se decepcionar com Material UI.
É, de longe, o Framework mais elaborado para implementar essas diretrizes até o momento, mas há uma ressalva: não é uma boa ideia como ponto de partida para um novo projeto de web design.
Carregado com componentes CSS e material design-compliant components, Material UI é construída em cima do pré-processador LESS.
Por usar os componentes do React, uma compreensão decente do React é uma super vantagem.
Ele é altamente customizável, Material UI inclui estilos que são separados em arquivos individuais, de modo que você possa substituir variáveis LESS CSS sem afetar os componentes do Framework.
Ele é ideal para Desenvolvedores que entendem e têm experiência com o React e que precisam de uma maneira fácil de aderir às diretrizes do material design.
Seguem alguns Links úteis para você se aprofundar mais no assunto:
Iniciando com Material UI / Github do Material UI
#4. Pure
Desenvolvido pela equipe de programadores do Yahoo, ele vem com uma leve série de módulos CSS que podem ser utilizados praticamente em qualquer projeto.
Com o Pure você pode facilmente criar botões, grids, tabelas, menus e vários outros recursos responsivos.
Por ser 100% baseado em CSS, ele não suporta JavaScript ou Plugins JQuery.
O mesmo quando minificado e comprimido com o Gzip, fica com apenas 4,5kb, tornando-se um dos Frameworks CSS mais leves e simples.
Como resultado da sua simplicidade é ideal para o desenvolvimento de sites mobile, que necessitam de rapidez e flexibilidade.
Seguem alguns links úteis para você se aprofundar mais no assunto:
Github do Pure / Iniciando o Pure
#5. Milligram
O Milligram é outro Framework CSS super leve, bem semelhante ao Skeleton que falaremos em seguida.
Quando aplicado o Gzip, ele fica com apenas 2kb e é usado para oferecer aos desenvolvedores um ponto de partida bem simples e flexível.
O sistema de Grid do Milligram é diferente da maioria dos Frameworks por causa do uso padrão do módulo CSS Flexible Box Layout.
Ele vem com alguns componentes chaves para você iniciar como botões, blocos, formulários, tabelas, listas, etc.
Ele é ideal para quem está desenvolvendo um projeto pequeno que não requer muitos recursos de design e que deseja usar um sistema CSS Flexbox grid.
Tailwind é a nova sensação sobre os frameworks css e merece um artigo somente pra ele.
Segue um link útil para você se aprofundar mais no assunto:
Conclusão de Frameworks CSS
Gostou do artigo? Muito bom poder trabalhar com frameworks, certo? No entanto existem muito mais Frameworks CSS do que os listados aqui, que deixaremos para um próximo artigo.
Acredito que as informações aqui passadas foram bastante úteis apesar de resumidas.
Sentiu falta de algum Framework? Deixe o seu comentário e logo estarei lhe respondendo.
Deseja aprender com projetos práticos a criar aplicações completas utilizando os mais modernos frameworks do mercado?