Tableless

Busca Menu

Material Design com Materialize

Seja o primeiro a comentar por

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

O 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 ^^

Eu poderia colocar um milhão de exemplos feitos aqui, mas não tenho os direitos autorais deles então caso queira ver o showcase do site acesse o link Showcase e veja. Mas para não deixar vocês sem nenhum exemplo deixo aqui um site feito por mim através do materialize, espero que gostem o link está na imagem e abaixo dela.



blog.loguei.com

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

Publicado no dia