Documento de Identidade Visual

Essa é uma revisão anterior do documento!

Unidade	Nome	Fone	e-mail
GER-TI	Cassio Guilhermy Tavares Souza		cguilhermy@tce.go.gov.br

Criado e projetado pela Google, Material Design é uma linguagem de design que combina os princípios clássicos de projetos bem sucedidos junto com inovação e tecnologia. O objetivo da Google é desenvolver um sistema de design que permite unificar a experiência do usuário em todos seus produtos em qualquer plataforma.

Link do Visual de Introdução Material Design

Esta é a versão padrão que vem com os arquivos CSS e Java Script minificados e desminados. Esta opção requer pouca ou nenhuma configuração. Use isso se você não estiver familiarizado com Sass.

Materialize

Está versão contém o código com arquivos SCSS. Escolhendo esta versão você tem maior controle sobre os componentes inclusos. Você precisará de um compilador Sass se escolher essa opção.

Source

Você pode encontrar todas as versões do CDN no Materialize CDNjs

Após fazer download, extraia os arquivos na pasta onde seu website está localizado. Sua pasta ficará parecida com isso.

Obs: Você notará que existem dois conjuntos de arquivos. O min significa que o arquivo é “comprimido” para reduzir os tempos de carregamento. Esses arquivos minificados geralmente são usados na produção, enquanto é melhor usar os arquivos não modificados durante o desenvolvimento.

Em seguida, você deve se certificar que os arquivos estão sendo referenciados corretamente na sua página web. Geralmente é sábio importar os arquivos JavaScript no final do corpo do arquivo para reduzir o tempo de carregamento da página. Segue o exemplo abaixo de como importar o Materialize na sua página web.

Uma última coisa importante é importar o jQuery antes de importar o materialize,js!

No Materialize a grid padrão tem 12 colunas, cada uma dessas colunas sempre irá ter uma largura igual.

Para entender como o grid é usado no HTML, de uma olhada no código abaixo, ele irá produzir um resultado similar ao anterior.

5.1.1 GRID Com Colunas Dentro da Linha

Espere-se, quando criar uma GRID todas as colunas devem estar dentro de um row e deve ser adicionada a classe “col” em todas as “divs” internas para que elas sejam colunas.