Advertisement
  1. Web Design
  2. Material Design Lite

Uma visão geral do Material Design Lite

by
Read Time:5 minsLanguages:

Portuguese (Português) translation by Luiz Garcia (you can also view the original English article)

Eu tenho uma sensação que o CodePen vai ficar absolutamente cheio com Material Design nos próximos meses. Por que?  Porque o Google acabou de lançar seu ansiosamente aguardado Material Design Lite (MDL). Este biblioteca de componentes front-end permite a comunidade web implementar a especificação do Material Design do Google usando Html puro, CSS, e JavaScript.  É uma implementação leve da especificação do Material Design (poucas dependências, baixa recursos, bem focado) por isso, chamando-o de "Lite".

Ao lançar MLD, Google respondeu uma demanda bem óbvia. Eles perceberam o fato que existem esforços da comunidade em construir frameworks inspirados no Material Design, como Bootstrap Material Design, Materialize, e Material UI para citar algum. Com MDL, criado com colaboração com a equipe do Chrome UX, Google estabeleceu um padrão para como o Material Design deve ser implementado nos sites.

Vamos olhar para o que MDL trouxe para a mesa com sua primeira versão!

Componentes do Material Design

Diferente dos Elementos de Material Design do Polymer (também conhecido como Paper Elements) que são desenvolvido para alta interatividade, sites orientado por dados e aplicativos, MDL foca primeiramente em sites com conteúdos simples como blogs, marketing e landing pages.

Nesse lançamento inicial, MDL vem com uma série de componentes, incluindo:

Layout

O componente de layout apresenta uma série de blocos de construção para a construção de páginas. Por exemplo, o grid: uma característica fundamental de qualquer framework front-end. O grid do MDL é construido com Flexbox e uma pequena ajuda do calc() do CSS.  Tem 12 colunas preparadas para grandes janelas, 8 colunas para o que podemos chamar de janelas do tamanho de tablet, e 4 colunas para janelas menores.

O componente de Layout do MDL também inclui navegação, tabs, footers, cada um dos quais tem sido otimizado para diferentes tamanhos de janelas.

Botões

De acordo com os princípios do Material Design, existem vários tipos diferentes de botões, alguns deles sendo:

  • Botão Regular: um básico botão retângulo com uma cor de fundo distinta da cor do texto.
  • Botão achatado: um botão sem uma cor de fundo.
  • Botão de ação flutuante (ou FAB) o próprio do Material Design: um botão circular que flutua na interface, usualmente carregando ações primárias da tela atual, ou em alguns casos, da página.

Cada botão pode ser melhorado com a família de efeitos de ondulação.

Cartões

Um cartão é uma área para exibir um conteúdo, como texto e imagens que geralmente promove algum tipo de ação. Por exemplo, uma imagem com um botão "like" ou "compartilhar", uma lista de músicas com o botão "tocar", ou talvez um nota com um botão "Salvar".

Badges

Uma badge é um circulo pequeno, posicionado perto de um elemento UI, normalmente contendo um número (talvez para indicar novas mensagens não lidas) ou um ícone. Hoje em dia, onde a informação é infinitamente fluida através de nossos dispositivos, um "badge" pode ser considerado um elemento de UI muito importante em qualquer projeto.

E tem mais

Outros elementos essenciais que você irá encontrar no MDL incluem campos de input, sliders, toggles, menus, tooltips, e ícones do Material Design.

Meet the componentsMeet the componentsMeet the components
Conheça os components

Além disso, Google também fornece um par de modelos para ajudá-lo a trabalhar rapidamente, com estrutura de layout adequado. Existem 5 tipos de templates nesse lançamento inicial:

  1. Um blog
  2. Um artigo
  3. Um aplicativo ou landing page
  4. Um dashboard
  5. Uma página com muito conteúdo
The MDL blog layout templateThe MDL blog layout templateThe MDL blog layout template
O modelo de layout de blog bastante saboroso do MDL

Customização

Estilos MDL são estruturados com Sass e a metodologia BEM. Estilos podem ser customizados de várias formas, mesmo antes de você baixar o pacote do framework. Uma forma é com a roda de cor na página Personalizar. A roda de cor permite a você selecionar tonalidades de cores com base na seleção de cores primarias. O personalizador então irá gerar a folha de estilo, que você pode fazer o download, ou link diretamente do Google CDN.

Theme builderTheme builderTheme builder
A visão prévia do construtor de temas do MDL

O arquivo material.min.css resultante é muito pequeno (17,6 kB compactado), mas para quem precisa de total controle para reduzir ao máximo, o código fonte está disponível no repositório do Github.

Suporte a Navegadores

Desde que a maioria dos componentes do MDL é construída com as técnicas de web mais atuais, tais como calc(), Flexbox, querySelector e classList, MDL só irá funcionar perfeitamente nos navegadores mais modernos: Chrome, Firefox, Opera, Microsoft Edge. MDL não vai funcionar bem em navegadores mais antigos, como o IE9, servindo somente a versão de CSS. Os elementos de interatividade (como o efeito ondulação do botão, por exemplo) não estarão presentes.

Dizendo isso, o UI é ainda notavelmente apresentável no IE8 Por exemplo, de uma olhada nos botões e elementos de tabela: 

Considerações finais

Você será perdoado por pensar que agora temos um framework front-end adicional para colocar na nossa caixa de ferramentas ao lado de Bootstrap e Foundation. Entretanto, MDL não tem intenção de substituir, ou se tornar um sucesso do Bootstrap. Material Design é parte da missão do Google de garantir que a interface do usuário, como sua experiência em seus produtos sejam consistentes, uniforme e considerada.

Vamos nos lembrar da idéia principal por um momento:

"Nós nos desafiamos a criar uma linguagem visual para nossos usuários que sintetiza os princípios clássicos de um bom design com a inovação e a possibilidade de ciência e tecnologia". - Introdução do Google Material Design

Então lembre, enquanto MDL encaixa bem com os produtos do Google, pode ser que fique fora de contexto quando implementado em um site que não tem nada a ver com o Google. Entretanto, como nós acabamos de descobrir, o Google provê total controle sobre seu código fonte, permitindo-nos personaliza-lo até o mínimo detalhe. E é isso o que vamos falar no próximo artigo. Então, fique ligado! 

Mais recursos

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.