Como criar um site (responsivo e com o Material Design do Google) usando o Materialize?
E ae galera! Estavam com saudades de conteúdo sobre Front-End?
Hoje vamos falar do Materialize!
Um framework front-end moderno e responsivo, baseado no Material Design
Framework?
Quem me conhece, sabe que não sou o maior fã de frameworks front-end do mundo. Mas não é que eu não goste ou critique quem use: tudo é uma questão de entregar o que for melhor para o Projeto.
Se o seu cliente (ou Projeto) precisa de um design mais elaborado, ousado e original, pelo amor de Deus não use (irresponsavelmente) um framework. Sério. Mas digamos que um design simples, funcional e inspirado no Material Design do Google seja justamente o que o seu projeto precisa: bingo! Para que reinventar a roda?
Achou estranho um projeto inspirado no Material Design? Bem… esse site aqui é inspirado e eu explico nesse artigo. Cada projeto é um projeto e não é porque está se inspirando no Material Design que tudo vai ficar igual.
Mão na massa
Enfim… o objetivo desse artigo é ensinar a usar o Materialize e não uma discussão filosófica sobre layout web (mas podem criar a treta nos comentários) e provavelmente você já está decidido a usar ou aprender a usar o Materialize.
Getting Start
O Materialize foi criado por 4 estudantes da Universidade Carnegie Mellon, segundo a Info:
E é muito simples usá-lo. O primeiro passo é fazer o download no site.
Você pode trabalhar usando SASS ou então o NPM e o Bower, mas não vou falar dessas forma de uso, afinal você é um Front-End esperto e sabe que tem que incluir os arquivos do framework no seu código HTML normalmente, assim como os seu próprios arquivos CSS e JS, além da pasta font com as fontes!
Observação: basta incluir os minificados materialize.min.css e materialize.min.js.
Tudo no lugar?
Confia o checklist:
- O arquivo materialize.min.css incluído no <head>?
- O arquivo materialize.min.js incluído lá no fundo do </body>, segundo as boas práticas de Front-End?
- Você incluiu o jQuery antes do materialize.min.js ?
- Incluiu a pasta /font ?
Ah! Não esqueça de incluir seu CSS e JS depois dos arquivos do Materialize, assim o CSS tem prioridade e o JS pode usar o objeto Materialize.
Sobre as fontes
A fonte utilizada é a Roboto:
Nem preciso falar o porque, né? Ela é ótima, principalmente para leitura (só não uso aqui no site, porque a Opens Sans é outra paixão). A fonte vem com 5 pesos que podem ser usados: 200, 300, 400, 500 e 600.
Mas se você não quiser usar a Roboto, altere o estilo do html:
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
Ainda falando de tipografia, há 6 estilos de parágrafos (do H1 ao H6) para uso.
Ícones
Também temos a fonte dos ícones do Material Design.
Nos meus projetos, dentro da pasta /font deixei apenas a pasta /roboto. Pois, para a utilização dos ícones (e da font Material Icons), a pasta que veio junto do download aparentou não servir para nada, sendo necessário (como escrito na documentação) a inclusão da fonte no <head>:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Com isso incluído, para usar um ícone basta usar a seguinte marcação:
<i class="material-icons">add</i>
E trocar o “add” pelo ícone que você quer. Confira a lista completa no site.
Você ainda pode adicionar classes para alterar o tamanho do ícone:
Os valores para a classe são:
- tiny: 1rem
- small: 2rem
- medium: 4rem
- large: 6rem
Texto fluído
Ainda falando de texto, uma funcionalidade muito legal desse framework é o o Flow Text. Basta acrescentar a class flow-text há um parágrafo e o texto irá variar de tamanho (fonte-size e line-height), buscando a melhor leitura.
Vá na documentação e faça o teste, para ver a diferença.
<p class="flow-text">I am Flow Text</p>
O grid
Pronto! Falamos de texto e agora uma das partes mais importantes: o grid.
Não preciso explicar o que é um grid, né? O importante de saber é que o framework trabalha com um grid de 12 colunas, totalmente responsivas.
O que isso quer dizer? Quer dizer, que sempre as 12 colunas terão a mesma largura, independente do tamanho da tela.
Marcação HTML do grid
<div class="row">
<div class="col s12">This div is 12-columns wide</div>
<div class="col s6">This div is 6-columns wide</div>
<div class="col s6">This div is 6-columns wide</div>
</div>
Ao escrever sua marcação, você precisa ter em mente alguns pontos:
- As colunas devem ser filhas de um elemento com a classe .row.
- Cada coluna deve ter a classe .col, além da classe que dá o seu tamanho.
- Caso queira deslocar uma coluna para a direita, basta usar a classe .offset- junto com o tamanho a ser deslocado, por exemplo, .offset-s2 deslocará seu elemento 2 colunas para a direita.
A class “container”
A classe container não é necessariamente parte do grid. Na verdade, ela significa que seus filhos terão um determinado tamanho de acordo com o tamanho da tela (veja na tabela mais abaixo). Serve principalmente para centralizar o conteúdo com alguma distância das bordas.
Pessoalmente, não usei muito, pois acho um pouco demais a distância das laterais.
Deixando responsivo
OK. Até agora nossa grid se ajusta ao tamanho, mas ser responsivo é mais que isso! É ter a melhor forma não importa o dispositivo e dessa forma, há conteúdo que, por exemplo, ocupará 1/4 da tela em desktop, 1/3 em tablets e a tela toda em celulares, certo? Para esse tipo de situação é que usamos os prefixos das classes de acordo com o tamanho do dispositivo:
| Tipos de Dispositivos | Largura do Dispositivo | Prefixo da Classe | Largura da classe .container | Classe de Deslocamento |
|---|---|---|---|---|
| Mobile | <= 600px | .s | 85% | .offset-s |
| Tablet | <= 992px | .m | 85% | .offset-m |
| Desktop | > 992px | .l | 70% | .offset-l |
Funciona basicamente assim: digamos que a tela seja maior que 992px, as as colunas irão utilizar o tamanho da class com prefixo l, ou seja, uma div com classe .l3 irá ocupar 3/12 do espaço (o espaço de 3 colunas).
Mas e se não tiver classe com esse prefixo? Aí a grid irá usar o valor da faixa logo abaixo, que no caso, seria a faixa com prefixo m e se não tiver, pegará o valor da menor faixa que é o prefixo s.
Da mesma forma, uma tela de 800px (tablet) irá ignorar os valores das classes l e irá usar o valor da classe m (se não existir, usará o valor abaixo que é o s).
Quer ver mais um exemplo?
<div class="row">
<div class="col s12"><p>s12</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
<div class="col s12 m4 l8"><p>s12 m4</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
</div>
<div class="row">
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
</div>
Esse código irá gerar o seguinte grid (de acordo com o dispositivo):
Desktop
Tablet
Mobile
As cores
As cores são um espetáculo a parte!
Os desenvolvedores do Materialize criaram várias paletas, que você pode escolher apenas trocando a classe correspondente. Basicamente você deve colocar a classe da cor e outra classe caso queira variar o tom.
Por exemplo, para o azul #1565c0, você usaria a classe blue, pois faz parte da paleta azul e a classe darken-3 pois é o terceiro tom mais escuro. Assim:
<div class="card-panel blue darken-3">Esse é um card azul 3 tons mais escuro.</div>
Para alterar a cor do texto, você deve acrescentar o sufixo -text à cor da paleta e o prefixo text- à classe do tom, caso haja. Dessa forma, um texto na mesma cor usada acima, deveria ter as classes: blue-text e text-darken-3. Assim:
<div class="card-panel">
<span class="blue-text text-darken-3">Esse é um card com texto azul 3 tons mais escuro.</span>
</div>
Para mais informações (como usar com o SASS) e a tabela completa de cores e paletas, consulte a página de cores da documentação.
Sobre os componentes
A galera do Materialize criou uma série de componentes que facilitam nossa vida. Vamos ver agora um deles:
Navbar: a barra de navegação
A barra de navegação deve ser uma das mais importantes. Ela faz bem o comportamento do que estamos acostumados no Android.
Você pode alinhar o logo à esquerda, à direita ou deixá-lo no centro. Além disso, você pode inserir listas como menus e marcar algum item como ativo, deixar a barra de navegação fixa e inserir menus dropdown.
Há também uma barra especial para pesquisa e uma implementação para o botão de menu nas versões mobile. Abaixo temos o código para incluir esse collapse button:
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
O atributo data-activates se refere ao ID de uma lista, com a classe .side-nav, que será nosso menu lateral:
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
Depois disso, você só precisa inicializar colocando o seguinte código no seu JS (dentro do $(document).ready, claro):
$(".button-collapse").sideNav();
Ficará assim:
Confira tudo isso e os códigos de cada tipo de implementação na documentação.
Rodapé, botões, preloaders e mais…
Além desse que falamos, ainda há muito mais coisa na documentação oficial: etiquetas (badges), botões(buttons), listagens (collections), formulários (forms), paginação (pagination), preloaders e os cards, que falaremos mais abaixo.
Cards: o conceito de cartões do Material Design
Um dos componentes mais legais são os cards.
Eles são o que são: cartões, ou seja, forma de mostrar o conteúdo num quadrado ou retângulo e só. Mas essa simplicidade é extremamente bela e facilita demais a leitura, como podemos ver em todos os (novos) aplicativos Android e até em vários sites.
A marcação exigida por um card é bem simples.
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Título do Cartão</span>
<p>Eu sou um cartão muito simples. Eu sou bom para conter pequenas informações.
Eu sou conveniente por que eu preciso de muito pouca marcação para ser usado efetivamente.</p>
</div>
<div class="card-action">
<a href="#">Isto é um link</a>
<a href="#">Isto é um link</a>
</div>
</div>
</div>
</div>
O código abaixo resulta nesse card aqui:
Ele é bem simples, porem há cards com imagens e até cards que revelam conteúdo com o clique. Dê uma olhada na documentação para mais exemplos.
Toasts: mostrando mensagens para o usuário
Sabe aquelas mensagens simples que aparecem no Android? Tipo um mini-popup ou uma mini-lightbox na parte de baixo da tela? O nome delas é Toast e o Materialize dá suporte ao seu uso de maneira bem simples. Basta executar o seguinte JS:
// Materialize.toast(messagem, tempo antes de sumir, alguma classe extra, função de callback);
Materialize.toast('I am a toast!', 4000);
Olha como fica:
Não esqueça de dar uma olhada na documentação.
Javascript e algumas mágicas
Além do Toast há algumas mágicas muito legais que o framework nos disponibiliza, por exemplo, você pode criar collapsibles (accordions que se expandem quando clicados):
Temos também dropdowns muito legais, que são aqueles menus que se expandem ao serem clicados e recursos para imagens como Material Box (implementação de uma lightbox) e um Slider (responsivo e com o recurso de arrastar com o toque).
Se você quiser mostrar mensagens mais complexas que o Toast, pode usar os recursos de Modals:
Sem falar de implementações de Parallax, posicionamento fixo de compomentes, abas, transições e algumas outras coisinhas legais.
Mostruário
Você pode conferir um monte de exemplo de sites criados usando o Materialize, na página de Mostruário. E ae, viu que não ficou tudo igual?
Tem até um BR:
Conclusão
Pois é galera… completinho esse framework, né? Espero que tenham gostado e que a partir de hoje possam contar com mais essa ferramenta.
Não esqueça de comentar abaixo suas dúvidas e opiniões (isso anima a gente a escrever cada vez mais) e por favor, curta e compartilhe para espalhar a palavra. Abraços e até a próxima!