O que é design de materiais?

Material Design é uma linguagem de design criada pelo Google. De acordo com o material.io, o Material Design visa combinar:

… Princípios clássicos do bom design com a inovação e possibilidade da tecnologia e da ciência. Seu objetivo é desenvolver um único sistema subjacente que permita uma experiência unificada entre plataformas e tamanhos de dispositivos. Os preceitos móveis são fundamentais, mas toque, voz, mouse e teclado são métodos de entrada de primeira classe.

Por que usar o Material Design?

O Material Design oferece uma experiência de usuário perfeita em todos os dispositivos. Transições e animações responsivas, junto com efeitos de preenchimento e profundidade, como sombras e raios, fazem com que seja elegante e amigável. O Google usa Material Design em quase todos os seus aplicativos (como Keep e Calendar).

Como você pode usar o material design em seus aplicativos da web?

Materialize é uma biblioteca de componentes front-end responsiva semelhante ao Bootstrap. Ele oferece tudo o que o Bootstrap tem a oferecer, mas a diferença é que o Materialize segue os princípios do material design. Aqui está um modelo de exemplo.

Aqui está uma lista de recursos que o Materialize oferece:

• Rede
• Mesas
• Emblemas, botões, migalhas de pão
• Cartas, fichas, coleções
• Rodapé, formulários
• Navbar
• E muito mais!

Como começar

Ao contrário do Bootstrap, Materialize não requer popper.js. Requer apenas jQuery. Isso é tudo que você precisa para começar. Adicione isso ao seu HTML e você estará pronto para prosseguir!

Cores

Usando Materialize, você pode alterar a cor de qualquer elemento HTML simplesmente dando a ele um nome de classe da cor desejada. Por exemplo, se você quiser dar à sua tag de parágrafo a cor vermelha, faça o seguinte:

Lorem Ipsum

Além disso, você também pode clarear ou escurecer uma cor dando a ela outro nome de classe lighten-1ou darken-1. Por exemplo,

Sample Text

. O 1 pode ser substituído por números de até 5 para clarear e até 4 para escurecer. Números mais altos aplicariam tons mais claros ou mais escuros da cor.

Botões

Para materializar um botão, basta dar a ele o nome da classe btn. Você também pode adicionar uma animação legal a ele dando outra classe waves-effect. Se você precisar de um botão maior, a btn-largeclasse pode ser usada. Por exemplo:

 Click    Click    Click  

Sombra

No material design, tudo deve ter uma certa profundidade z que determina o quão elevado ou próximo da página o elemento está.

Para aplicar um efeito de sombra a um elemento, a z-depth-2classe pode ser usada (2 pode ser substituído por números 1–5). Por exemplo:

Conclusão

Eu apenas arranhei a superfície aqui. Há muito mais disponíveis em Materializar (como transições, cartas, carrossel e modais). Você pode aprender a usar todos os componentes dos documentos. Os nomes das classes são muito simples e a grade é realmente útil para criar colunas responsivas rapidamente. Te desejo boa sorte!