Materialize - Uma estrutura CSS de material design

Do Google Design material O objetivo é funcionar bem na Web e também em aplicativos para dispositivos móveis. Está ganhando popularidade com os desenvolvedores e, se você quiser adotá-lo também, há muitas maneiras de implementar o Material Design no seu site. Você pode usar Polymer ou Angular, ou você pode usar materializar.

Materializar é um Estrutura CSS baseada nos princípios do Material Design com suporte ao Sass para um melhor desenvolvimento. Ele carrega o estilo padrão para facilitar o uso e possui documentação detalhada.

Você pode encontrar muitos componentes úteis dentro de: diálogo, modal, selecionador de data, botões de material, paralaxe, cartões e muito mais. Ele também tem muitas opções de navegação que você pode escolher, como menu suspenso, slide no menu e guias. Materializar também usa um Sistema de 12 redes com 3 consultas de mídia de tamanho de tela padrão: uma largura máxima de 600px é um dispositivo móvel, um dispositivo tablet de 992px e um arquivo com mais de 992px é considerado um dispositivo de desktop.

Começando

Existem duas maneiras de começar a usar Materialize: use CSS padrão ou Sass. Ambas as fontes podem ser baixadas aqui. Você também pode obtê-los com o bower usando o seguinte comando:

 instalação do bower materializar 

Depois de obter os fontes, certifique-se de vinculá-los corretamente no seu arquivo de projeto ou compilar a fonte, se você estiver usando a versão Sass.

Características

Nesta seção, explicarei alguns recursos que Materialize oferece.

1. Mixins Sass

Este framework carrega Sass Mixins, que adiciona automaticamente todos os prefixos do navegador quando você escreve certas propriedades CSS. É um ótimo recurso para garantir compatibilidade em todos os navegadores, com tão pouco barulho e código quanto possível.

Dê uma olhada nas seguintes propriedades de animação:

 -webkit-animação: 0,5s; -moz-animação: 0.5s; -o-animação: 0.5s; -ms-animação: 0.5s; animação: 0.5s; 

Essas linhas de código podem ser reescritas com uma única linha de mixagem Sass da seguinte forma:

 animação @include (.5s); 

Há cerca de 19 mixins principais acessível. Para ver a lista completa, vá para a categoria Sass no MISTURAS aba.

2. Fluxo de texto

Enquanto outras estruturas de frontend usam texto fixo, o Materialize implementa texto verdadeiramente responsivo. O tamanho do texto e a altura da linha também são dimensionados de forma responsiva para manter a legibilidade. Quando se trata de telas menores, a altura da linha é dimensionada.

Para usar o Flow Text, você pode simplesmente adicionar fluxo de texto classe em seu texto desejado. Por exemplo:

 
Este é o texto do fluxo.
 

Confira a demonstração aqui na seção Fluxo de texto.

3. efeito de ondulação com ondas

Material Design também vem com feedback interativo, um exemplo notável é o efeito cascata. Em Materializar, esse efeito é chamado Ondas. Basicamente, quando os usuários clicam ou tocam / tocam em um botão, cartão ou qualquer outro elemento, o efeito aparece. As ondas podem ser facilmente criadas adicionando efeito de ondas classe em seus elementos.

Este trecho dá-lhe o efeito de ondas.

 Enviar 

As ondulações são cinza por padrão. Mas em uma situação onde você tem um fundo de cor escura, você pode querer mudar a cor. Para adicionar uma cor diferente, basta adicionar ondas- (cor) para o elemento. Substitua o "(cor)" por um nome de cor.

 Enviar 

Você pode escolher entre 7 cores: luz, vermelho, amarelo, laranja, roxo, verde e azul-petróleo. Você sempre pode criar ou personalizar suas próprias cores se essas cores não atenderem às suas necessidades.

4. Sombra

Para entregar relacionamentos entre elementos, o Material Design recomenda o uso de elevação nas superfícies. Materialize cumpre este princípio com o seu z-depth- (número) classe. Você pode determinar a profundidade da sombra alterando o número (de 1 a 5):

 
 
Profundidade de sombra 3
  
 

Todas as profundidades de sombra são demonstradas com a imagem abaixo.

5. Botões e ícones

No Material Design, existem três tipos principais de botões: botão levantado, fab (botão de ação flutuante) e botão plano.

(1) Botão levantado

O botão levantado é o botão padrão. Para criar este botão, basta adicionar um btn classe para seus elementos. Se você quiser dar o efeito de onda quando clicado ou pressionado, vá com isto:

 Botão 

Alternativamente, você também pode dar ao botão um ícone à esquerda ou à direita do texto. Para o ícone, você precisará adicionar personalizado tag com o nome e a posição da classe de ícones. Por exemplo:

 Baixar 

No trecho acima, usamos mdi-file-file-download classe para o ícone de download. Há cerca de 740 ícones diferentes você pode usar. Para vê-los, vá até a página Sass na guia Ícones.

(2) Botão Flutuante

Um botão flutuante pode ser criado anexando flutuante classe e seu ícone desejado. Por exemplo:

No Material Design, o botão plano é frequentemente usado na caixa de diálogo. Para criá-lo, basta adicionar btn-flat para o seu elemento assim:

 Declínio 

Além disso, os botões podem ser desativados com o Desativado classe e feito maior usando btn-large classe.

6. Grade

Materializar usa um padrão Grade responsiva de 12 colunas sistema. A capacidade de resposta é dividida em três partes: pequeno (s) para celular, médio (m) para tablet e grande (l) para desktop.

Para criar colunas, use s, m ou l para indicar o tamanho, seguido pelo número da grade. Por exemplo, quando você deseja criar um layout de tamanho médio para o dispositivo móvel, inclua um s6 classe em seu layout. s6 apoia pequeno-6 o que significa 6 colunas no pequeno dispositivo.

Você também deve incluir um col classe no layout que você cria e colocá-lo dentro de um elemento que tem o linha classe. Isso é para que o layout possa ser colocado em colunas corretamente. Aqui está um exemplo:

 
 
Eu tenho 12 colunas ou largura total aqui
 
4 colunas (um terço) aqui
 
4 colunas (um terço) aqui
 
4 colunas (um terço) aqui
 
 

Aqui estão os resultados:

Por padrão, col s12 é de tamanho fixo e otimizado para todo o tamanho da tela, basicamente o mesmo col s12 m12 l12. Mas se você quiser especificar o tamanho das colunas para diferentes dispositivos. Tudo o que você precisa fazer é listar os tamanhos adicionais da seguinte forma:

 
 
Minha largura sempre tem 12 colunas em todos os lugares
 
Eu tenho 12 colunas no celular, 6 no tablet e 9 no desktop
 
 

Veja como isso se parece:

Essas são apenas algumas características do Materialize. Para saber mais sobre os outros recursos, vá para a página de documentação.