MDC-103 Web: temas do Material Design com cores, formas, elevação e tipo (Web)
Sobre este codelab
1. Introdução
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
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:
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.
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.
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:
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:
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:
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.
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;
}
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.
Agora navegue até http://localhost:8080/home.html para conferir as mudanças na página home.html
.
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.