Galera, venho trazendo para vocês um material recém lançado do Google. Esse material possibilita trazer uma aparência em sites baseada nas versões mais recentes do Andriod utilizando as linguagens HTML, CSS e JavaScript.O Material cujo o nome Material Design Lite (MDL) é muito fácil de ser utilizado assim como o Bootstrap, ele suporta até mesmo os navegadores mais antigos e irá aderir a uma interface super moderna.
Alguns possíveis componentes disponíveis pelo material:
Os material, componentes, templetes entres outros recursos estão disponível para download
clicando aqui.
Para a utilização vamos dar o seguinte exemplo:
primeiramente teremos que fazer
download do nosso Material Design Lite, iremos encontrar no site uma aba de download, e baixaremos um arquivo compactado em WinRar. Para o tutorial rápido de hoje não precisamos, vamos usar o código do material diretamente hospedado do site, mas para aqueles que querem seguir seu desenvolvimento com o material em arquivo apenas faça o download e façam a "lincagem" dos arquivos necessários.
Após baixar e descompactar na pasta de seu projeto, crie um arquivo do tipo HTML, insira o código a seguir, estamos supondo que você já saiba programar em HTML, então vamos apenas explicar o código do material.
nas tags head faça a lincagem dos principais arquivos do material, CSS e JavaScript
Obs: esses links não precisam do material baixado.
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-green.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
Repare na descrição da lincagem do
CSS a terminação
material.indigo-green essa terminação define qual vai ser o estilo da sua página de acordo com os componente que você vai utilizando, através deste
Link você pode gerar várias outras combinações, apenas substitua a lincagem do CSS do nosso tutorial pelo o fornecido pelo o site.
Ainda no Head definimos uma estilização de fonts aqui:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
aqui vamos apenas criar um botão do HU3TECH usando o nosso Material Design Lite:
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">HU3TECH</button>
</body>
Espero que tenham gostado, desfrutem do material tem muita coisa bacana. Um forte abraço, Valew
Escrito por Rone Felipe Bento.
