MENU Mário Valney

Como criar um site (responsivo e com o Material Design do Google) usando o Materialize?

Front 14 de agosto de 2015 7 comentários
Front
  • 14 - 08 - 15
  •        
  • 7

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:

Kevin Louie, Alan Chang, Alex Mark e Alvin Wang
Kevin Louie, Alan Chang, Alex Mark e Alvin Wang

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:

  1. O arquivo materialize.min.css incluído no <head>?
  2. O arquivo materialize.min.js incluído lá no fundo do </body>, segundo as boas práticas de Front-End?
  3. Você incluiu o jQuery antes do materialize.min.js ?
  4. 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:

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:

Icon size

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 DispositivosLargura do DispositivoPrefixo da ClasseLargura da classe .containerClasse de Deslocamento
Mobile<= 600px.s85%.offset-s
Tablet<= 992px.m85%.offset-m
Desktop> 992px.l70%.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

Large

Tablet

Medium

Mobile

Small

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:

menu

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:

card-simples

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:

toast

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):

"Popout" - Collapsible capaz de criar popouts ao ser expandido
“Popout” – Collapsible capaz de criar popouts ao ser expandido

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:

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:
absurdoburger

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!

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



    Não se preocupe: não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


    Deixe seu comentário! Dúvida sobre como comentar
    ou vai postar código? Leia antes.