MdlVsBootstrap

O Google recentemente anunciou o Material Design Lite(MDL) que permite implementar o Material Design sem esforço em projetos web.

Com mais de 12.000 estrelas no repositório do GitHub em pouco tempo de lançado o MDL com certeza será um grande adversário para o Bootstrap.

Table of Contents

  1. Componentes Básicos do Bootstrap
  2. Componentes Básicos do Material Design Lite
  3. Questionamento: “O Bootstrap vai continuar dominando?”
  4. Uma ajudinha para você que está na dúvida entre os dois:
  5. Conclusão
  6. Agora é com você!

Embora sirvam como uma camada base para o mundo HTML e CSS do Front-end, eles diferem em algumas coisas e são bem parecidos em outras.

Vamos dar uma olhada nesta tabela comparativa!

Critério de Comparação Bootstrap (3.3.5) Material Design Lite (1.0.2)
Dependências Externas jQuery Nenhuma.
pré processador CSS LESS (também conta com uma versão SCSS) SCSS
Reset do CSS normalize.css normalize.css (via HTML5 Boilerplate)
Tamanho do CSS minificado 120 KB 118 KB
Tamanho do JS minificado 36 KB 56 KB
Processo de Construção Grunt Gulp
Gerenciadores de Pacote npm, Bower, Composer, Meteor npm, Bower
Menor versão do IE suportada IE7 IE8
Suporte para temas Sim. Muitos. Mais ou menos. Existe um construtor de tema bem limitado.
Fonte padrão Helvetica/Arial Roboto
Sistema de GRID Clássico “fluid CSS grid”, implementado em LESS Grid Flexbox com CSS calc()
Funciona com AngularJS Sim Sim
Funciona com o React Sim Sim
Estilo Clássico visual do bootstrap. Bem conhecido. Pode ser modificado a vontade com vários temas e esquemas de cores. Material Design lançado pelo Google. É aparência dos apps oficiais do android. Não é indicado a customização além das cores e pouquíssimas coisas, para que não saia do padrão original.
Responsivo Sim Sim
Documentação e Exemplos Muitos. No site oficial e também em vários lugares da internet. Sim, no site oficial.
Versionamento Semver Semver
Licença Apache Apache

Mais um pouco de comparação, agora com alguns componentes!

(Experimente clicar em “Edit on CodePen” para ver uma versão completa das demonstrações e poder “brincar” a vontade com os códigos.)

Componentes Básicos do Bootstrap

See the Pen Componentes Básicos do Bootstrap by Guilherme Assemany (@assemany) on CodePen.


Componentes Básicos do Material Design Lite

See the Pen ZGVxrq by Guilherme Assemany (@assemany) on CodePen.


Questionamento: “O Bootstrap vai continuar dominando?”

Infelizmente ainda não há uma resposta concreta para essa pergunta. O que eu posso dizer é que com certeza o bootstrap terá uma grande “batalha” pela frente. Acredito que o MDL seja o concorrente mais forte do Bootstrap até agora.

Não é a primeira vez que o Google tenta desbancar alguns serviços populares… Lembra do Google+ ? (A rede social que iria afundar o facebook!) Não deu muito certo.

Uma ajudinha para você que está na dúvida entre os dois:

Pergunta 1: Você gostaria que seu projeto tivesse uma aparência única?

Pergunta 2: Gosta de Customizar bastante?

Se você respondeu sim para uma das perguntas acima, então o Bootstrap é o vencedor.

Se você quer uma aparência única, o MDL certamente não é a melhor opção. Todo projeto feito seguindo os padrões do Material Design sempre serão meio parecidos…

E se você gosta de customizar bastante, lembre-se: Não é indicado customizar os aspectos do MDL, visto que será muito fácil desviar do padrão original do Material Design.

Se sua resposta foi não para as duas perguntas, e o Material Design te agrada, pode ir fundo. Você pode começar escolhendo um padrão de cor e depois é só colocar a mão na massa.

Conclusão

O Material Design Lite é com certeza um grande feito do Google, um belo trabalho e certamente será levado mais a sério. O tempo irá mostrar se esta pode ser uma mudança na direção dos ventos, que sopram a favor do bootstrap há um bom tempo e se o MDL será adotado em larga escala.

Agora é com você!

Conte-me o que você acha do MDL e se você está disposto a trocar o bootstrap! Deixe um comentário com sua opnião!