Materialize: O Framework baseado em Material Design

,

Tempo de leitura: 11 minutos

Se você não sabe, o material design foi desenvolvido em 2014 pelo Google.

Com o propósito de trazer um design mais limpo e uma aparência mais objetiva e consistente para aplicativos e páginas mobile em diferentes plataformas, utilizando gráficos mais robustos e cheio de cores.

É uma combinação bem elaborada dos fundamentos do bom design clássico com a adição de tecnologia e ciência.

Outras linguagens que competem com ela é o metro design, flat design, realism design etc.

MUI, Material Foudation, Material Design Lite, Componentes Material para Web e Materialize são todos os materiais de design css mais populares da web.

Mas nesse tutorial completo vou me deter a explicar somente sobre o Framework Materialize.

O que nós iremos aprender hoje?

// O que é Materialize

// Configuração básica de modelos do Materialize

O que é Materialize?

o que é materialize

O materialize é um Framework Front-End responsivo baseado totalmente em Material Design.

A diferença do materialize para outros frameworks front-end como Bootstrap ou Foundation é que o Materialize é completamente baseado no Material Design do Google, enquanto o Bootstrap e o Foundation se baseiam na primeira linguagem de design para dispositivos moveis e na linguagem de design plano.

Configuração básica de modelos do Materialize

Você pode começar baixando os arquivos CSS e JS do materialize aqui.

Depois de fazer isso você pode criar o index.html e o css/style.css e crie uma pasta para as imagens.

CSS    

materialize.min.css

style.css

JS   

materialize.min.js

images/


No index.html temos arquivos CSS e JS importados. Você pode utilizar o código abaixo.

Agora vamos aprender como utilizar o Materialize Frameworks nos seus Websites.

1.  Cor no Materialize

Entendendo que você já está com o Materialize instalado vamos ver como trabalhar com as cores.
Materialize fornece as classes para colocar essas cores nas fontes e no plano de fundo.
<div class="container">
    <h4>Background Color</h4>
    <div class="card-panel light-blue ccent-1">
        This is a card panel with a light-blue accent-1 class
    </div>
    <h4>Text Color</h4>
    <div class="card-panel">
        <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
    </div>
</div>

Para mais classes de cores e cores de fundo, você pode consultar o link abaixo.

Paleta de cores Materialize

2. Materialize Grid

Materialize usa o sistema de grade responsivo fluido de 12 colunas padrão.

.s , .m  e .l  – Essas classes são usadas para definir a largura das colunas para telas pequenas, médias e grandes.

Exemplo:

<div class=“row”>

<div class=“red lighten-1 col s12 m6 l3”>

     1

</div>

<div class=“red lighten-2 col s12 m6 l3”>

     2

</div>

<div class=“red lighten-3 col s12 m6 l3”>

     3

</div>

<div class=“red lighten-4 col s12 m6 l3”>

     4

</div>
</div>

Resultado:

Large Device: Dispositivo Grande

Large-grid

Medium-device: Dispositivo Medio

Medium-grid

Small-device: Dispositivo pequeno

Small-grid

3. Botões no Materialize

Aqui vamos explicar diferentes tipos de botões.

Botão levantado:  É um botão padrão que significa ações e procura dar profundidade a uma página praticamente plana.

Botões grandes:   .btn–large   Tem uma altura maior para os botões.

Botões Pequenos:  .btn–small   Tem uma altura menor para os botões.

Botão Flutuante:   É um significado para funções muito importantes.

Botão plano:   geralmente é usado em elementos que já possuem profundidade como cards ou modais.

Botão Enviar:  Quando você usa um botão para enviar um formulário, em vez de usar uma tag de entrada, use uma tag de botão com um tipo de envio.

Botões desativados: um elemento desativado é inutilizável e não clicável. Elementos desativados geralmente são renderizados em cinza por padrão nos navegadores.

Exemplo:

4. Cards

Vamos explicar agora os variados tipos de cards ou cartas.

1) Cartão Básico

Exemplo:

<div class="container">
  <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 blue-text text-lighten-5">Título do Card</span>
          <p>Eu sou um cartão muito simples.</p>
        </div>
        <div class="card-action">
          <a href="#" class="red-text text-lighten-2">Este é um link</a>
          <a href="#" class="red-text text-lighten-2">Este é um link</a>      
        </div>
      </div>
    </div>
  </div>
</div>
2) Imagens em cartões

Neste exemplo, eu explico como criar um cartão de imagem com um botão de ação flutuante.

Exemplo:

<div class="container">
    <div class="row">
        <div class="col s12 m5">
            <div class="card">
                <div class="card-image">
                    <img src="https://galeri13.uludagsozluk.com/678/bulut_1023204.jpg">
                    <span class="card-title">Card Title</span>
                    <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
                </div>
                <div class="card-content">
                    <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
                </div>
            </div>
        </div>
    </div>
</div
3) Cartão pegajoso

Aqui você pode adicionar um cartão que revela mais informações depois de clicado. Você pode tornar sua ação de cartão sempre visível adicionando a classe a .sticky–action o cartão geral e o div .card–reveal com uma classe de span .card–title dentro para fazer este trabalho. Adicione a classe t0 .activator  dentro do cartão para permitir que ele abra o cartão.

Exemplo:

<div class="container">
    <div class="row">
        <div class="card sticky-action col s12 m5">
            <div class="card-image waves-effect waves-block               waves-light">
                <img class="activator"                       src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
            </div>
            <div class="card-action">
                <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i>
                </span>
                <p><a href="#">Isso é um link</a></p>
            </div>
            <div class="card-reveal">
                <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i>
                </span>
                <p>Veja mais algumas informações sobre esse produto que só são reveladas depois de clicadas.</p>
            </div>
        </div>
    </div>

5. Forms

Aqui eu explico diferentes tipos de elementos de formulários.

Caixa de seleção e botões de rádio.

Exemplo:

<form action="#">
    <!--   Checkbox -->
    <div class="custom-checkbox">
        <h4>Checkbox</h4>
        <p>
            <label>
                <input type="checkbox" />
                <span>Red</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox"checked="checked" />
                <span>Yellow</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox"class="filled-in" checked="checked" />
                <span>Filled in</span>
            </label>
        </p>
        <p>
            <label>
                <input id="indeterminate-checkbox"type="checkbox" />
                <span>Indeterminate Style</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox"checked="checked" disabled="disabled" />
                <span>Green</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox" disabled="disabled" />
                <span>Brown</span>
            </label>
        </p>
    </div>
    
    <!--   Radio buttons -->
    <div class="custom-radio">
        <h4>Radio Buttons</h4>
        <p>
            <label>
                <input name="group1" type="radio" checked />
                <span>Red</span>
            </label>
        </p>
        <p>
            <label>
                <input name="group1" type="radio" />
                <span>Yellow</span>
            </label>
        </p>
        <p>
            <label>
                <input class="with-gap" name="group1" type="radio" />
                <span>Green</span>
            </label>
        </p>
        <p>
            <label>
                <input name="group1" type="radio" disabled="disabled"/>
                <span>Brown</span>
            </label>
        </p>
    </div>
</form>
Chips e Switches

Chips podem ser usados ​​para representar pequenos blocos de informação. Eles são mais comumente usados ​​para contatos ou para tags.

Switches são caixas de seleção especiais usadas para estados binários, como on / off.

<form action="#">
    <!--   Chips -->
    <div class="custom-chips">
        <h4>Chips</h4>
        <div class="chip">
            <img src="https://ucommphotosrv.unl.edu/styles/square_thumbnail/public/photos/141118_Yeates_005RT.jpg" alt="Contact Person">
            Jane Doe
        </div>
        <div class="chip">
            Tag
            <i class="close material-icons">close</i>
        </div>
    </div>
    
    <!--   Switches -->
    <div class="custom-switch">
        <h4>Switch</h4>
        <!-- Switch -->
        <div class="switch">
            <label>
                Off
                <input type="checkbox">
                <span class="lever"></span>
                On
            </label>
        </div>
        <!-- Disabled Switch -->
        <div class="switch">
            <label>
                Off
                <input disabled type="checkbox">
                <span class="lever"></span>
                On
            </label>
        </div>
    </div>
</form>
text-input e icon-prefix

Icon-prefix

Você pode adicionar um prefixo de ícone para tornar o rótulo de entrada do formulário ainda mais claro. Basta adicionar um ícone à classe .prefix  antes da entrada e da etiqueta.

<form action="#">
    <!--   Text-input -->
    <div class="custom-input">
        <h4>Text Inputs</h4>
        <div class="row">
            <div class="input-field col s6">
                <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                <label for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
                <input id="last_name" type="text" class="validate">
                <label for="last_name">Last Name</label>
            </div>
        </div>
    </div>
    
    <!--   Icon-prifix -->
    <div class="custom-input">
        <h4>Icon Prefixes</h4>
        <div class="row">
            <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input id="icon_prefix" type="text" class="validate">
                <label for="icon_prefix">First Name</label>
            </div>
            <div class="input-field col s6">
                <i class="material-icons prefix">phone</i>
                <input id="icon_telephone" type="tel" class="validate">
                <label for="icon_telephone">Telephone</label>
            </div>
        </div>
    </div>
</form>

Conclusão de Materialize: O Framework baseado em Material Design

conclusao materialize

Gostou do artigo? Materialize é espetacular para quem deseja algo bem desenhado e ao mesmo tempo simples.

No nosso Curso de Front-end Completo temos algumas aulas super completas de como trabalhar com o materialize, inclusive desenvolvemos alguns projetos com ele que tenho certeza irá te ajudar muito em sua caminhada!

Abraços!

Artigos relacionados