Os materiais didáticos aqui disponibilizados estão licenciados através de Creative Commons Atribuição-SemDerivações-SemDerivados CC BY-NC-ND. Você possui a permissão para visualizar e compartilhar, desde que atribua os créditos do autor. Não poderá alterá-los e nem utilizá-los para fins comerciais.
Atribuição-SemDerivações-SemDerivados
CC BY-NC-ND
Cursos / Informática para Internet / Plataformas de aplicações Web / Aula
O sistema de grid do Materialize também tem 12 colunas e as classes base para o seu uso são: row, col, s1, s2, s3…, s11, s12. As classes que iniciam com "s" e são seguidas de um número representam quantas unidades em largura aquela coluna específica utilizará, como pode ser visto na imagem abaixo.
Sistema de grid do Materialize. Fonte: https://materializecss.com/grid.html
Assim como o Bulma e o Bootstrap, o sistema de grid permite que você utilize offsets para deslocar colunas, consegue adequar larguras de colunas automaticamente, permite aninhamento, etc.
Para mais informações de como usar o grid system do Materialize visite: https://materializecss.com/grid.html
O Materialize vem com alguns efeitos de animação básicos por padrão. Você pode informar que um botão é "pulsante" para chamar atenção, simplesmente adicionando a class "pulse" nesse elemento.
Sombras e transições também são possíveis utilizando classes como "z-depth-2" e "scale-transition".
Alguns exemplos de componentes do Materialize nas figuras abaixo:
Materialize - Collections. Fonte: https://materializecss.com
Materialize - Badges in Navbar. Fonte: https://materializecss.com
Materialize - Botão com imagem. Fonte: https://materializecss.com
Materialize - Breadcrumbs. Fonte: https://materializecss.com
Materialize - Cards. Fonte: https://materializecss.com
O Materialize vem com uma coleção de Material Design Icons com mais de 930 ícones prontos para uso, seguindo as especificações do Material Design. Utilizar os ícones é muito simples, basta criar um elemento <i /> com a classe "material-icons" e no conteúdo do elemento colocar o nome do ícone. Segue um exemplo abaixo:
<i class="material-icons">insert_chart</i>
<i class="material-icons">alarm_on</i>
<i class="material-icons">add_to_queue</i>
<i class="material-icons">arrow_back</i>
<i class="material-icons">bug_report</i>
Ícones - Materialize. Fonte: https://materializecss.com
A lista completa de ícones pode ser vista em: https://materializecss.com/icons.html
Comercialmente o Materialize oferece alguns temas personalizados, mas não de forma gratuita. Trata-se de uma forma de apoiar o projeto financeiramente. Entretanto, não é necessário adquirir nenhum desses temas para ser produtivo utilizando o Materialize.
Se desejar se aprofundar, explore o Materialize com o documento HTML básico adicionando os exemplos da documentação do site dentro da tag <body>, faça alterações e observe o resultado.
Versão 5.3 - Todos os Direitos reservados