Logo SatellaSoft



Materialize - Apresentação

Conheça o framework responsivo baseado no Google Material


Ícone mulher Lucas Vendramini
Ícone data de publicação 03/02/2015
Ícone quantidade de visualização 3,339
Ícone bandeira do Brasil Português

O que é o Materialize?

Materialize é um framework front-end responsivo baseado no Material Design (framework utilizado pela Google) desenvolvido pelos estudantes Alvin Wang, Alan Chang, Alex Mark e Kevin Louie.

O que é exatamente um framework?

Framework é um conjunto de ferramentas prontas que são utilizadas por programadores para agilizar o desenvolvimento de sites e programas, tendo em vista que ele não gastará a maior parte do tempo com estilização e design, focando seu tempo somente na funcionalidade das ferramentas. Como muitos pensam, o framework não é uma palavra restrita da programação Web. Apesar de que é muito utilizado neste ambiente, é empregado geralmente em qualquer ramo de desenvolvimento de software.

O que é responsividade?

Responsividade é a capacidade que um site tem em se adaptar as diferentes tipos de resolução existentes, seja de celulares, tablets e PCs. Um framework responsivo como o Materialize por exemplo, possui classes destinadas a responsividade, poupando tempo do desenvolvedor a ajustar detalhes para cada resolução manualmente.

Como é feita a utilização do Materialize?

1 - Para utilizar o materialize é muito simples. Basta fazer o download nesta página:

download_materialize

2 - Descompacte a pasta:

descompacta_materialize

 

3 - Particularmente,  deixo o diretório do materialize separado das pastas de css e js do site, considerando que você pode usar outros frameworks e criar outros arquivos .css e .js próprios. Desta forma, acredito que o site fica mais organizado:

organizacao_materialize

4 - Em seguida, vamos fazer os links do js e css do materialize no seu html,
neste exemplo vou usar o index.html:

links_materialize

5 - Vamos fazer uma circular image, que é um dos componentes CSS do Materialize.
Adaptando o exemplo no link, o html fica assim:

exemplo_materialize

6 - O resultado do código inserido é este:


site_materialize

7 - Tente restaurar a janela e redimensioná-la, verá que o próprio framework
trata de ajustar automaticamente a tela confome ela aumenta e diminui:

responsivo_materialize

Com apenas esse trecho de código HTML e o trabalho feito pelo Materialize, você conseguiu montar um estrutura responsiva que rodará em tablets, smartphones e PCs adequando o tamanho da tela quando necessário. Por enquanto, esta foi apenas uma breve apresentação do Materialize. A documentação completa do framework pode ser visualizada aqui.

Até a próxima!




Sobre o autor


Lucas Vendramini

Nome: Lucas Vendramini

Site: http://www.purplelabs.com.br


Formado pelo Instituto Federal do Sudeste de Minas Gerais (IFSUDEST-MG) como Técnico em Informática. Atualmente trabalha no site www.purplelabs.com.br como programador Web e apoia projetos Open Source como o EasyJS e outros projetos independentes. Faz pesquisa também na área de comunicação em tempo real. Curioso e autodidata, sempre está a procura de novas tecnologias e projetos para trabalhar.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!