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.

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

Pois bem, podemos começar dizendo que o Materialize é um Framework e Frameworks CSS são bibliotecas que se destinam a facilitar estilizações de páginas Web compatíveis com os padrões usando a linguagem Cascading Style Sheets.

Dentre outras coisas, os Frameworks CSS oferecem diferentes módulos e ferramentas, tais como:

  • 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 ainda badgescards e muito mais. Além disso ele também possibilita um design altamente responsivo e unificado para todas as plataformas.

Veja alguns sites desenvolvidos com Materialize CSS Aqui.

Instalando o Materialize CSS Framework

Para instalar o Materialize no seu site é muito simples, basta você acessar o site oficial (materializecss.com) que contém 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.

Para facilitar sua vida, abaixo temos dois vídeos mostrando como configurar o Materialize CSS Online e Offline. 😉

Instalando Materialize Online

Instalando Materialize Online

Instalando Materialize Online

Instalando o Materialize Offline

Instalando o Materialize Offline

Concluindo…

Talvez a pergunta nesse momento seja — Mas e afinal por onde devo começar? E a resposta é simples, você pode começar fazendo uma leitura na documentação e assistindo uma playlist de demonstração do nosso curso que está no site Vídeos de TI.

Enfim, sintam-se à vontade para deixar seu comentário e/ou dúvidas.

Um super abraço e até o próximo post! 😉