Início » Aplicativos e Software » Novo framework do Google leva Material Design para páginas da web

Novo framework do Google leva Material Design para páginas da web

Voltada para desenvolvedores de sites, a ferramenta inclui vários templates úteis para criação e desenvolvimento

Jean Prado Por

google-material-design-website

O Google quer levar o Material Design para todo lugar. As diretrizes de layout aplicadas no Android desde a versão 5.0, anunciada no ano passado, agora podem ser usadas em sites por uma ferramenta anunciada hoje pelo Google.

O framework, chamado de Material Design Lite (MDL), oferece vários códigos-fonte para a criação e desenvolvimento de sites, como templates, componentes (cards, botões, tabelas), fontes, ícones e customização de temas. É uma espécie Bootstrap para quem é fã do Material Design.

google-material-design-website-2

Nos templates disponíveis, você encontrará dashboards (como na imagem acima), blogs, artigos e até o código fonte do Android.com para anúncio de produtos que cabem naquele estilo. Os componentes personalizados também ajudam na personalização das páginas, incluindo vários estilos de botões, layouts, menus, toggles e muito mais.

Todo o código foi escrito usando a biblioteca BEM (deve ser por isso que o framework ficou bem legal) e ele pode ser customizado tanto em uma página própria para isso (apenas com alteração de cores) quanto pelo código-fonte bruto disponível no GitHub. Por padrão, todos os scripts vêm do CDN do Google, mas nada impede o usuário de baixar e alterar alguns códigos.

O nome Lite, segundo o Google, se dá pela facilidade de implementação e tamanho do pacote completo: 27 KB na versão compactada, que inclui códigos JS, HTML e CSS. O Material Design Lite funciona em todos os navegadores populares: Chrome, Firefox, Safari, Opera, Microsoft Edge (!) e é responsivo por padrão (ou seja, funciona bem em celulares).

Comentários

Envie uma pergunta

Os mais notáveis

Comentários com a maior pontuação

Sckillfer
Cheguei aqui pela sugestão de artigos e tive duas surpresas: 1 - que se esse que é o framework da Google (ou era, foi substituído pelo material components for web), o Materialize não é; 2 - todo esse framework foi desenvolvido usando o BEM (legal), que é uma tecnologia da Yandex (Google russa).
João Paulo
Os dois são a aplicação dos conceitos do Material Design para a Web, então é razoável que sejam parecidos. Se eu fosse você ficaria com o "oficial", que é o Material Design Lite.
Wédney Yuri
Nunca havia ouvido falar que o MaterializeCss era apoiado diretamente pelo Google.
Tiago Celestino
Mas ñ usa o Polymer para criar os componentes? O framework é apenas o conceito do Material Design.
Dayman Novaes
Ué. Que top, será que é responsivo e de fácil implementação também?
Gaba
Maravilha!!!! Adeus Polymer...
Diego Rocha
Ótimo! Acho o Material Design mais elegante que o tema padrão do bootstrap, e por não ser designer dificilmente customizo, se for tão simples quanto será usado nos meus próximos projetos!
Sam86
Acho que teremos uma nova versão do layout do Tecnoblog em breve. :P
Rafael Silva
Sim. :D
Wellington Dantas
Parece ser muito bom, mas sinceramente eu não vejo muita diferença entre esse e o MaterializeCss que também é apoiado pelo Google.
Filipe Meneses
Ué.
Josiel Hen
como quais?
Vitor Mikaelson
Mas nem ela segue as guidelines direito.
Alex Silva
Concorrente do bootstrap
Thiago Duarte
(Isso foi um elogio, antes que me crucifiquem)
Thiago Duarte
Esse cara é o substituto de piadas sem graça do @rafacst?
Breno
Hahah! Só depois de testar e ver se tá tudo ok! :D
Felipe Lima
Pede desculpas pro Google :p
Breno Sampaio
www.materializecss.com '-'
mafhper
"deve ser por isso que o framework ficou bem legal" sugiro a inserção de uma gif aqui: tu_dum_tss.gif. Gosto muito do Material Design como conceito. Muitas coisas descritas no manifesto podem ser aplicadas de modo prático e dão um resultado bacana, bem balanceado entre o design e a função. Gosto de como utilizam as sombras e principalmente as cores. No entanto algumas animações são "de mais" para mim.
Breno
que deliça! =] Semana passada eu tava xingando a Google. Faz as guidelines, mas n faz nenhum framework pra usar o trem direito.