| Framework | Arquitetura de CSS | Pré-processador | Componentes | Suporte (browsers) | Suporte (comunidade) | Curva de aprendizado | Velocidade de desenvolvimento | Qualidade de código | Documentação | Dependências | Tamanho |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Twitter Bootstrap | OOCSS | LESS/Sass | Muitos | IE8+ | Excelente | Média | Excelente | Ótima | 8/10 | jQuery | 255kb |
| Zurb Foundation | OOCSS | Sass | Muitos+ | IE9+ | Ótima | Média | Excelente | Excelente | 9/10 | jQuery | 174kb |
| Yahoo Purecss | SMACSS | - | Poucos | IE8+ | Ótima | Baixa | Boa | Execelente | 9/10 | - | 74kb |
Este documento visa analisar os pontos principais de vários frameworks de CSS/JS. Pontos como:
- Arquitetura de CSS
- Componentes
- Suporte da comunidade
- Suporte (Browsers)
- Curva de aprendizado
- Velocidade de desenvolvimento
- Qualidade de código
- Documentação
Twitter Bootstrap é o framework mais utilizado no mundo (pelo menos 1% dos sites do mundo utilizam ele). Essa popularidade se deu pela facilidade e velocidade de desenvolvimento que o framework fornece e isso atraiu muito desenvolvedores que corrigem bugs, indicam novas features e dão todo o suporte necessário.
- Mobile First
- OOCSS
- Muito componentes (modulares)
- IE8+
- Curva de aprendizado média
- Proporciona rápido desenvolvimento
- LESS/Sass
- jQuery como dependência
- 255kb
- Qualidade de código 7/10
- 79,676+ Estrelas no Github
- Documentação 8/10
O Twitter Boostrap disponibiliza uma CDN com o CSS e JS, porém nesta CDN está todo código.
A melhor forma de utilizar o Twitter Boostrap é utilizando sua versão não pré-compilada, ou seja, sua versão LESS ou Sass. Os benefícios são:
- Compile somente o que realmente irá utilizar
- Facilidade de customização
Com isso, você poupa vários kbs com código não utilizado e consegue uma melhor customização utilizando as variáveis e escapa da especificidade do Bootstrap.
Além disso, o Twitter Boostrap também conta com um sistema de grid potente e que também permite o uso de mixins para ser usado de maneira semântica. A desvantagem de utilizar os mixins é que você cria o mesmo código para cada classe, saindo do conceito de DRY. Então nesse caso, é indicado utilizar as classes já criadas (col-xs-, col-sm-, col-md-, col-lg-).
O Twitter Bootstrap também conta com uma série de plugins Javascript, como modais, popovers, carousel e etc. Esses plugins podem ser utlizados de maneira independente se utilizado a versão não compilada.
Utilizando o Boostrap de forma consistente
O Foundation é o segundo Framework mais popular e conta com algumas features que o faz estar sempre a frente, fazendo com que o desenvolvimento responsivo seja muito mais fácil.
- Documentação 9/10
- IE9+
- Sass
- Muito componentes (modulares)
- Mobile First
- Curva de aprendizado média
- 174kb
- Dependências: jQuery (Zepto ready)
- 19,600+ estrelas no Github
- Qualidade de código excelente
- Proporciona rápido desenvolvimento
O Foundation conta com algumas features que lhe diferenciam dos outros, como Interchange Responsive Content, que permite carregar imagens de tamanhos diferentes em diferentes resoluções, menus off-canvas, uso da GPU para animações e etc.
Um dos princípios do Foundation é o mínimo de código para que todos os sites não pareçam iguais (O que acontece com muitos que utilizam o Bootstrap).
O sistema de grid do Foundation é parecido com o do Bootstrap, permitindo definir diferentes tamanhos para diferentes resoluções via classes.
Também é possível (e recomendado) utilizar sua versão não compilada, permitindo assim usar somente os componentes necessário e então compilar e utilizar somente o código necessário.
O Foundation possui CDN, porém, somente com todo o código compilado.
Foundation CSS CDN Foundation JS CDN
Quando se quer somente uma base para escrever seu CSS, o Purecss é o indicado. Ele provê um conjunto de módulos de CSS minimalistas (inclusive com CDN separadas) para começar seu projeto.
- Mobile First
- SMACSS
- IE8+
- Curva de aprendizado baixa
- CSS Puro
- 72kb (tudo)
- Qualidade de código Excelente
- 10,983+ estrelas no Github
- Sem dependências
O Purecss também conta com um sistema de grid próprio baseado em "migalhas". Com isso, você consegue gerenciar tamanhos muito diferentes somente com a grid (o que não é tão bom quando queremos uma padronização simples, como uma grid de 12 colunas).
O Purecss também pode ser combinado com outros plugins jQuery e até mesmo com os plugins do Twitter Boostrap, assim, pode-se ter uma combinação de Purecss + Twitter Bootstrap.
A customização do Purecss é baseada em extensões, ou seja, além de modificar a classe de seu componente, você cria uma classe separada com seu estilo customizado e adiciona em conjunto com a componente do Purecss. Exemplo:
Pelo fato do Purecss ser extremamente minimalista, ele tem poucos componentes, então, caso precise de alguns componentes específicos você terá que combiná-lo com outros frameworks.