MDC-103 Web: temas do Material Design com cores, formas, elevação e tipo (Web)

MDC-103 Web:
temas do Material Design com cores, formas, elevação e tipo (Web)

Sobre este codelab

subjectÚltimo out. 11, 2020 atualizado
account_circleEscrito por Liz Mitchell, Abhinay Omkar

1. Introdução

logo_components_color_2x_web_96dp.png

Os componentes do Material Design (MDC, na sigla em inglês) ajudam os desenvolvedores a implementar o Material Design. Criados por uma equipe de engenheiros e designers de UX do Google, os MDC apresentam dezenas de componentes de interface bonitos e funcionais e estão disponíveis para Android, iOS, Web e Flutter.material.io/develop

Nos codelabs MDC-101 e MDC-102, você usou componentes do Material Design (MDC) para criar os elementos básicos do Shrine, um app de comércio eletrônico que vende roupas e artigos domésticos. O fluxo do usuário desse app começa com uma tela de login, que leva o usuário a uma tela inicial com produtos.

Recentemente, o Material Design foi expandido para dar aos designers e desenvolvedores uma maior flexibilidade para expressar a marca do produto. Neste codelab, você usará os MDC para personalizar o app Shrine para refletir o estilo único da marca de mais maneiras do que nunca.

O que você vai criar

Neste codelab, você personalizará o Shrine para refletir a marca usando:

  • Cor
  • Tipografia
  • Elevação
  • Forma
  • Layout

9c51661824dfa934.png

Componentes e subsistemas da Web do MDC usados neste codelab

  • Tema
  • Tipografia
  • Elevação
  • Lista de imagens

O que é necessário

  • Uma versão recente do Node.js, que acompanha o NPM, um gerenciador de pacotes do JavaScript.
  • O exemplo de código (que será feito na próxima etapa)
  • Conhecimento básico de HTML, CSS e JavaScript

Como você classificaria seu nível de experiência com desenvolvimento da Web?

2. Configurar o ambiente de desenvolvimento

Está continuando do MDC-102?

Se você concluiu o MDC-102, o código para este codelab já está pronto. Pule para a etapa 3: Mudar a cor.

Faça o download do app inicial do codelab

O app inicial está localizado no diretório material-components-web-codelabs-master/mdc-103/starter. Insira cd nesse diretório antes de começar.

... ou clone-o do GitHub

Para clonar este codelab do GitHub, execute estes comandos:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-103/starter

Instalar dependências do projeto

No diretório inicial material-components-web-codelabs/mdc-103/starter (ele será o diretório atual, se você seguir a etapa acima), execute:

npm install

Você verá muitas atividades e, no final, o terminal mostrará uma instalação bem-sucedida:

23003b0e5fdf9077.png

Executar o app inicial

No mesmo diretório, execute:

npm start

A webpack-dev-server será iniciada. No navegador, acesse http://localhost:8080/ para ver a página.

61dc5a089bf0986b.png

Pronto. Você verá a página de login do Shrine em execução no navegador. Preencha os campos "Nome de usuário" e "Senha" e clique no botão "Próxima" para ir para a página inicial. Ela vai mostrar uma gaveta de navegação à esquerda, ao lado de uma grade de imagens de produtos.

e2f359c254988d75.png

Embora a gaveta de navegação seja funcional, vamos fazer com que ela corresponda à marca do Shrine mudando a cor, a elevação e a tipografia.

3. Mudar a cor

Este tema de cor foi criado por um designer usando cores personalizadas, mostradas na imagem abaixo. Ele contém cores que foram selecionadas da marca do Shrine e aplicadas ao Material Theme Editor, que as usou como base para criar uma paleta mais completa. Essas cores não são das paletas de cores do Material Design de 2014.

Vamos mudar a cor da gaveta de navegação do app Shrine para refletir esse esquema de cores.

Substituir as cores do tema

Crie um novo arquivo chamado _variables.scss, contendo o seguinte:

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

Em seguida, importe-o na parte superior de _common.scss:

@import "./variables";

Adicionar estilo CSS à gaveta de navegação

Em home.scss, adicione a seguinte instrução de importação após as importações existentes:

@import "@material/ripple/mixins";

Em seguida, adicione os estilos abaixo, criando a classe .shrine-drawer:

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

Atualize a página em http://localhost:8080/home.html. Sua tela inicial ficará assim:

816105f1c5a033f2.png

Vamos alterar a cor da tela de login para combinar com nosso esquema de cores.

Adicionar o estilo CSS à página de login

Em login.scss, adicione as seguintes linhas:

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

Além disso, adicione as seguintes invocações do mixin no seletor de CSS do .username, .password:

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

Atualize a página em http://localhost:8080/. Sua tela de login ficará assim:

9e0172a18582a44e.png

4. Modificar a tipografia e os estilos de etiquetas

Além das mudanças nas cores, o designer também forneceu uma tipografia específica para ser usada no site. Vamos adicionar isso à gaveta de navegação também.

Para instalar o pacote para tipografia, execute:

npm install @material/typography

Adicionar o CSS para tipografia

Em home.scss, adicione a seguinte instrução de importação após as importações atuais:

@import "@material/typography/mdc-typography";

Em seguida, adicione a seguinte invocação de mixin à classe shrine-title:

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

Em seguida, vamos definir o estilo dos itens da gaveta.

Adicionar um separador de linha

Em home.html, adicione o seguinte imediatamente após o elemento <a ...>Featured</a>:

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

Adicione os estilos abaixo a home.scss:

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

Ajustar os itens e rótulos das imagens

Para ajustar os itens e rótulos, adicione os seguintes estilos a home.scss no seletor .product-list:

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

Atualize a página. Sua tela inicial ficará assim:

129ada72a02baf5a.png

5. Ajustar a elevação

Agora que você definiu o estilo da página com as cores e a tipografia específicas do Shrine, vamos conferir a lista de imagens que mostra os produtos do app. Vamos dar mais ênfase aos produtos para dar mais ênfase a eles.

Para instalar o pacote para o Elevation, execute:

npm install @material/elevation

Adicionar a instrução de importação

Em home.scss, adicione a seguinte linha após a última instrução de importação:

@import "@material/elevation/mdc-elevation";

Unir a lista de imagens com um novo div

Em home.html, adicione a seguinte marcação ao redor do elemento <ul>:

<div class="shrine-body">
 
<ul...>
</div>

Mudar a elevação usando mixins Sass

Em home.scss, inclua o seguinte:

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

Impressionante! Você adicionou uma sombra à borda esquerda da superfície branca atrás dos itens da lista de imagens para que ela pareça flutuar um pouco acima da navegação.

66c3d6a82fb8bb23.png

6. Mudar o layout

Em seguida, vamos mudar o layout para mostrar imagens em proporções e tamanhos diferentes, de modo que cada imagem pareça única em relação às outras.

Modificar o HTML

Em home.html, atualize o elemento mdc-image-list para conter a classe mdc-image-list--masonry:

<ul class="mdc-image-list mdc-image-list--masonry product-list">

Adicionar imagens

Em home.html, mude o atributo src de cada elemento img para corresponder às imagens localizadas na pasta assets. Em seguida, atualize o texto do rótulo de cada imagem. Quando terminar, o código vai ficar assim:

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Ginger scarf</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Blue stone mug</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Cerise scallop tee</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Chambray napkins</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Fine lines tee</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Garden strand</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Gatsby hat</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Gilt desk trio</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Kitchen quattro</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Seabreeze sweater</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Shrug bag</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Stella sunglasses</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Surf and perf shirt</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Vagabond sack</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Walter henley (white)</span>
       
</div>
     
</li>
     
<li class="mdc-image-list__item">
       
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
       
<div class="mdc-image-list__supporting">
         
<span class="mdc-image-list__label">Weave keyring</span>
       
</div>
     
</li>
   
</ul>

Atualizar o CSS

Em home.scss, remova o mixin mdc-image-list-standard-columns(4) e o substitua pelo seguinte:

@include mdc-image-list-masonry-columns(4);

Em seguida, adicione os seguintes valores padding à classe product-list em home.scss:

.product-list {
  ...
  padding: 80px 100px 0;
}

9c51661824dfa934.png

Agora, o código deve corresponder ao código incluído na pasta complete/.

7. Testar outro tema

As cores são uma maneira eficiente de expressar sua marca, e uma pequena mudança de cor pode ter um grande efeito na experiência do usuário. Para testar isso, vamos ver como o Shrine ficaria se o esquema de cores da marca fosse completamente diferente.

Modificar CSS

Em _variables.scss, substitua as variáveis declaradas para o tema principal pelas seguintes:

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

Em login.scss, remova os mixins do seletor .username, .password. A aparência será semelhante a esta:

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

Além disso, remova a substituição do mixin mdc-button-ink-color na classe .cancel:

Em home.scss, adicione a seguinte regra à classe .home:

background-color: $mdc-theme-background;

No seletor .shrine-logo-drawer, substitua a propriedade fill pela cor on-primary:

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

Da mesma forma, no seletor .shrine-title, defina a propriedade color como a cor on-primary:

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

Por fim, remova o mixin mdc-elevation usado anteriormente no seletor .shrine-body.

Crie e execute. O novo tema será exibido no navegador.

7fdf830a944e53d7.png

Agora navegue até http://localhost:8080/home.html para conferir as mudanças na página home.html.

7369127decb1a875.png

8. Recapitulação

Você criou um app parecido com as especificações do seu designer.

Próximas etapas

Até agora, você já usou os seguintes componentes do MDC: tema, tipografia, elevação e forma. É possível explorar mais componentes e subsistemas no Catálogo da Web do MDC.

Este codelab exigiu esforço e tempo normais para ser concluído

Quero continuar usando componentes do Material Design no futuro