Subscribe:

quarta-feira, 14 de outubro de 2015

Material Design Lite

    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.

0 comentários :

Postar um comentário