5
(3)
5
(3)

Há muito tempo quero falar um pouco sobre desenvolvimento de sites utilizando layouts baseados no Material Design do Google, mas entre fazer e falar há um abismo enorme. Minha verdadeira intenção é compartilhar um pouco a maneira mais fácil de desenvolver um layout utilizando todos aqueles conceitos que a Google tem implementado atualmente.

Primeiros Passos

Materialize é um Framework desenvolvido para facilitar e agilizar nosso desenvolvimento quando o assunto é Material Design. Além de ágil, possui uma infinidade de vantagens que permitem que na maioria das vezes dispensam o uso de outros frameworks para complementá-lo.

Para baixar os arquivos do Materialize clique em Getting Started, lá você verá uma documentação explicando como fazer o download dos arquivos e todas as maneiras que você tem para fazer isso, ou também pode usar a CDN dele como geralmente muitos fazem com o JQUERY. Os arquivos são bem distribudos e não diferem dos demais Frameworks que existem.

Vamos para as vantagens dele

Uma das principais vantagens é o fato de ser muito similar ao Material Design desenvolvido pela google. Outra vantagem que podemos observar são os amplos recursos de JQuery que ele possui como: Slider, Lightbox, Captions, Modais, Transitions, Waves entre muitos outros. Melhor do que falar é mostrar. Esses recursos ficam na categoria JavaScript.

O sistema de grid usado é bastante parecido com os frameworks já existentes, como o Bootstrap.







<body>
      <div class="container"> <!-- Container similar ao utilizado em outros Frameworks -->
            <div class="row"> <!-- Row também similar ao utilizado em outros Frameworks -->
                 <div class="col s12 m4 l4">Eu sou uma coluna</div> <!-- Coluna com 3 tamanhos-->
            </div>
      </div>
</body>

Entendendo as colunas

É muito simples, assim como o bootstrap que trabalha com 4 tamanhos de coluna, muito pequeno, pequeno, médio e grande, o materialize decidiu trabalhar com 3 tamanhos que são pequeno médio e grande, nada que assuste ou prejudique o andamento do projeto. Para saber mais entre no menu CSS e acesse o submenu Grid

Alguns pequenos diferenciais que ele possui

Alguns diferenciais que ele possui são os botões, o modal, os cards, as collections e o mais importante talves de todos o menu lateral, vou mostrar alguns desses abaixo.

Cards

Sidenav

Vendo essa belezinha funcionar ^^

A seguir vemos um exemplo de tema construído usando o materialize css.

http://demo.geekslabs.com/materialize/v3.1/

Bem, aqui terminamos esse maravilhoso assunto sobre um Framework bem simples e maneiro de usar. Espero ter ajudado um pouco a todos. Obrigado ^^.

O que você achou disso?

Clique nas estrelas

Média da classificação 5 / 5. Número de votos: 3

Nenhum voto até agora! Seja o primeiro a avaliar este post.

O que você achou disso?

Clique nas estrelas

Média da classificação 5 / 5. Número de votos: 3

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Compartilhar.

Sobre o autor

Full-Stack Developer e Software Engineer, especialista em Python e JavaScript, professor e palestrante de assuntos voltados à programação web, desktop e mobile, ciência de dados entre outros assuntos. Escritor dos Livros Python de A a Z e Flask de A a Z.

Deixe uma resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.