Materialize CSS: Conheça o Framework CSS Baseado no Material Design

Antes de iniciarmos nosso bate papo sobre o Materialize CSS vamos falar um pouco sobre Material Design.

O que é Material Design

Material Design é um sistema unificado que combina teoria, recursos e ferramentas para criar experiências digitais (material.io), desenvolvido pela equipe de designers do Google com intuito de unificar a experiência do usuário na usabilidade dos seus softwares, seja no smartphone, tablets e/ou desktops.

O vídeo abaixo mostra como surgiu e como foi implementado os conceitos do Material Design, que trás o design baseado no mundo físico para o mundo virtual.

E aí afinal o que o Materialize CSS Framework tem a ver com isso?

O Materialize é um Framework, Frameworks CSS são bibliotecas pré-preparadas que se destinam a facilitar estilizações de páginas web compatíveis com os padrões usando a linguagem Cascading Style Sheets

Frameworks CSS oferecem diferentes módulos e ferramentas:

  • Redefinição da folha de estilo
  • Grid especialmente para o design responsivo
  • Tipografia web
  • Conjunto de ícones em sprites ou fontes de ícone
  • Styling para tooltips, botões, elementos de formulários
  • Partes de interfaces gráficas como o acordeão, guias, slideshow ou janelas modais (Luz)
  • Equalizador para criar conteúdo de altura igual
  • Efeito Parallax

O Materialize implementa os módulos citados anteriormente e muito mais como badges, cards entre outros, possibilita também um design altamente responsivo e unificado para todas as plataformas.

Instalando o Materialize CSS Framework

Para instalar o Materialize no seu site é muito simples, basta você acessar o site oficial (materializecss.com) que consta uma documentação muito boa, em português, e você verá que podemos instalar de três maneiras, CSS Online, CSS Offline e com Sass.

Abaixo temos dois vídeos mostrando como configurar o Materialize CSS Online e Offline.

Instalando Materialize Online 

Instalando o Materialize Offline 

Conclusão

Mas e afinal por onde devo começar? Você pode começar dando uma leitura na documentação e preparei uma playlist de demonstração para vocês do nosso curso que está no site Vídeos de TI.

Demonstração do nosso curso de Materialize CSS

 

Gostou? Quer começar a utilizar o Materialize CSS Framework?

Então acessa a Vídeos de Ti e veja lá nosso curso Iniciando com Materialize CSS Framework, com um DESCONTO ESPECIAL para você! 😉

About the author

Add a Comment