MDC-103 Web: Temas de Material con color, forma, elevación y tipo (Web)

1. Introducción

Los componentes de Material (MDC) ayudan a los desarrolladores a implementar Material Design. MDC, creado por un equipo de ingenieros y diseñadores de UX en Google, cuenta con decenas de componentes de IU atractivos y funcionales, y está disponible para Android, iOS, la Web y Flutter.material.io/develop.

En los codelabs MDC-101 y MDC-102, usaste componentes de Material (MDC) a fin de compilar los aspectos básicos de una app de comercio electrónico llamada Shrine, en la que se vende ropa y artículos para el hogar. El flujo de usuarios de esta app comienza con una pantalla de acceso que luego lleva al usuario a una pantalla principal que contiene productos.

Recientemente, se expandió Material Design para brindar a los diseñadores y desarrolladores mayor flexibilidad para expresar la marca de su producto. En este codelab, usarás MDC para personalizar la app de Shrine de modo que refleje el estilo único de la marca de más formas que nunca.

Qué compilarás

En este codelab, personalizarás Shrine para reflejar su marca usando lo siguiente:

• Color
• Tipografía
• Elevación
• Forma
• Diseño

Este es el último de 3 codelabs que te guiarán para que compiles una app llamada Shrine.

Estos son los codelabs relacionados:

• MDC-101: Conceptos básicos sobre componentes de Material (MDC)
• MDC-102: Estructura y diseño de Material Design

Componentes web y subsistemas de MDC que se usan en este codelab

• Tema
• Tipografía
• Elevación
• Lista de imágenes

Requisitos

• Una versión reciente de Node.js (que incluye npm, un administrador de paquetes de JavaScript).
• El código de muestra (que se descargará en el siguiente paso)
• Conocimientos básicos de HTML, CSS y JavaScript

¿Cómo calificarías tu nivel de experiencia con el desarrollo web?

Principiante Intermedio Avanzado .

2. Configura tu entorno de desarrollo

¿Vienes de MDC-102?

Si completaste MDC-102, tu código debería estar listo para este codelab. Avanza al paso 3: Cambia el color.

Descarga la app de inicio del codelab

Descargar app de partida

La app de partida se encuentra en el directorio material-components-web-codelabs-master/mdc-103/starter. Asegúrate de cd en ese directorio antes de comenzar.

Ten en cuenta el sufijo -master en el nombre del directorio raíz. Si quieres descargar la app de partida desde el botón anterior, agrega el sufijo -master cada vez que se haga referencia al directorio raíz en el resto de este codelab.

… o clónalo desde GitHub

Para clonar este codelab desde GitHub, ejecuta los siguientes comandos:

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

Obtén más ayuda sobre cómo clonar un repositorio desde GitHub.

Instala dependencias del proyecto

Ejecuta el siguiente comando desde el directorio de inicio material-components-web-codelabs/mdc-103/starter (debería ser tu directorio actual si sigues el paso anterior):

npm install

Verás mucha actividad y, al final, tu terminal debería mostrar una instalación exitosa:

MDC Web usa un preprocesador de CSS llamado Sass. Si usas un preprocesador de CSS diferente (o no usas ninguno), no hay problema. Puedes usar Sass junto con tu preprocesador actual instalando la CLI de sass o usando un complemento (por ejemplo, sass-loader para Webpack, gulp-sass para Gulp o grunt-sass para Grunt) en tu cadena de herramientas de compilación.

Para que nuestro código funcione en navegadores más antiguos, como IE 11, usamos un transpilador llamado Babel para transpilar la sintaxis de JavaScript ES2015 de MDC Web a la sintaxis de JavaScript ES5.

Usaremos webpack para agrupar nuestros archivos y entregar nuestro sitio localmente. Ya se estableció la configuración de webpack para este proyecto en el archivo webpack.config.js. Para obtener más detalles sobre cómo se configuró, consulta la guía de introducción.

Cómo ejecutar la app de inicio

En el mismo directorio, ejecuta lo siguiente:

npm start

Se iniciará la webpack-dev-server. Dirige tu navegador a http://localhost:8080/ para ver la página.

Si no pudiste ejecutar npm install o npm start correctamente, detén tu entorno de desarrollador y soluciona los problemas.

¡Listo! Deberías ver la página de acceso de Shrine ejecutándose en tu navegador. Completa los campos de Nombre de usuario y Contraseña, y haz clic en "Siguiente" para ir a la página principal. Debería mostrar un panel lateral de navegación a la izquierda, junto a una cuadrícula de imágenes de productos.

Mientras funciona el panel lateral de navegación, vamos a hacer que coincida con la marca de Shrine cambiando su color, elevación y tipografía.

3. Cambiar el color

Un diseñador creó este tema con colores personalizados (consulta la imagen más abajo). Contiene colores seleccionados de la marca de Shrine que se aplicaron en Material Theme Editor, donde se expandieron para crear una paleta más completa. (Estos colores no provienen de las paletas de colores de Material de 2014).

Cambiemos el color del panel lateral de navegación de la app de Shrine para reflejar ese esquema de colores.

Anula los colores del tema

Crea un nuevo archivo llamado _variables.scss que contenga lo siguiente:

$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;

Luego, impórtalos en la parte superior de _common.scss:

@import "./variables";

Cualquier variable global que desees anular (p.ej., $mdc-theme-primary o $mdc-theme-secondary) debe declararse antes de importar los componentes estilos en tus archivos *.scss. En este caso, _common.scss es un parcial que se importa antes que cualquier otro elemento en login.scss y home.scss, por lo que se aplicará a ambas páginas. estilos.

Cómo agregar estilos de CSS al panel lateral de navegación

En home.scss, agrega la siguiente sentencia de importación después de las importaciones existentes:

@import "@material/ripple/mixins";

Luego, agrega los siguientes estilos y crea la clase .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);
  }
}

Importamos @material/ripple/mixins para admitir nuestro uso de la combinación mdc-states-activated que proporciona. El paquete Ripple de MDC proporciona combinaciones de mdc-ripple y mdc-states, ya que ripple está directamente relacionado con el sistema de estados.

Actualiza la página en http://localhost:8080/home.html. Ahora, la pantalla principal debería verse de esta manera:

Cambiemos el color de la pantalla de acceso para que coincida con nuestro esquema de colores.

Agrega estilos de CSS a la página de acceso

En login.scss, agrega las siguientes líneas:

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

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

Además, agrega las siguientes invocaciones de combinación dentro del selector CSS .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);
  }
  ...
}

Actualiza la página en http://localhost:8080/. La pantalla de acceso debería verse de esta manera:

4. Modifica los estilos de tipografía y etiquetas

Además de los cambios de color, tu diseñador también te dio una tipografía específica para usar en el sitio. Agreguemos eso también al panel lateral de navegación.

Si deseas instalar el paquete para Typography, ejecuta lo siguiente:

npm install @material/typography

Agrega CSS para la tipografía

En home.scss, agrega la siguiente sentencia de importación después de las importaciones existentes:

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

Luego, agrega la siguiente invocación de combinación a la clase shrine-title:

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

La tipografía se puede establecer con la combinación de Sass, como lo hicimos aquí, o mediante la inclusión de la clase de tipo específica (p.ej., class="mdc-typography--headline6") en el elemento.

A continuación, aplicaremos un estilo a los elementos del panel lateral.

Cómo agregar un separador de línea

En home.html, agrega lo siguiente justo después del elemento <a ...>Featured</a>:

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

Agrega los siguientes estilos 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;
}

Ajusta los elementos de imagen y las etiquetas

Para ajustar los elementos y las etiquetas, agrega los siguientes estilos a home.scss dentro del selector .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);
  }
}

Actualiza la página. Ahora, la pantalla principal debería verse de esta manera:

5. Ajusta la elevación

Ahora que aplicaste un estilo a la página con el color y la tipografía específicos de Shrine, echemos un vistazo a la lista de imágenes que muestra los productos de Shrine. Destaquemos los productos haciendo más hincapié en ellos.

Para instalar el paquete de Elevation, ejecuta lo siguiente:

npm install @material/elevation

Agrega la sentencia de importación

En home.scss, agrega la siguiente línea después de la última sentencia de importación:

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

Une la lista de imágenes con un elemento div nuevo

En home.html, agrega el siguiente lenguaje de marcado alrededor del elemento <ul>:

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

Cambia la elevación con combinaciones de Sass

En home.scss, agrega lo siguiente:

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

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

La elevación se aplica invocando la combinación de Sass mdc-elevation dentro de un selector que representa los elementos que deseas elevar.

¡Impresionante! Agregaste una sombra al borde izquierdo de la superficie blanca detrás de los elementos de lista de imágenes para que parezca flotar ligeramente por encima de la navegación.

6. Cambia el diseño

A continuación, cambiemos el diseño para mostrar imágenes en diferentes tamaños y relaciones de aspecto, de modo que cada imagen se vea única respecto de las demás.

Modifica el código HTML

En home.html, actualiza el elemento mdc-image-list para que contenga la clase mdc-image-list--masonry:

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

Agrega imágenes

En home.html, cambia el atributo src de cada elemento img para que coincida con las imágenes ubicadas en la carpeta assets. Luego, actualiza el texto de la etiqueta para cada imagen. Cuando se complete, se verá de la siguiente manera:

    <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>

Actualiza el CSS

En home.scss, quita la combinación mdc-image-list-standard-columns(4) y reemplázala por la siguiente:

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

Luego, agrega los siguientes valores padding a la clase product-list en home.scss:

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

Tu código ahora debería coincidir con el que se incluye en la carpeta complete/.

Actualmente, el componente de la lista de imágenes incluye 2 variantes, estándar y albañilería, que permiten que los elementos de la lista tengan un tamaño diferente o se distribuyan de una manera específica.

7. Prueba otro tema

El color es una forma poderosa de expresar tu marca; un pequeño cambio de color puede generar un gran efecto en la experiencia del usuario. Para probarlo, observarás cómo se vería Shrine si el esquema de colores de la marca fuera completamente diferente.

Modifica CSS

En _variables.scss, reemplaza las variables que declaraste para el tema principal por lo siguiente:

$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;

En login.scss, quita las combinaciones del selector .username, .password. Se verá de la siguiente manera:

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

Además, quita la anulación de combinación mdc-button-ink-color en la clase .cancel:

En home.scss, agrega la siguiente regla a la clase .home:

background-color: $mdc-theme-background;

Dentro del selector .shrine-logo-drawer, reemplaza la propiedad fill por el color on-primary:

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

De manera similar, dentro del selector .shrine-title, configura la propiedad color para que sea el color on-primary:

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

Por último, quita la combinación mdc-elevation que se usó antes en el selector .shrine-body.

Realiza la compilación y ejecuta la aplicación. El nuevo tema debería aparecer en tu navegador.

Ahora, navega a http://localhost:8080/home.html para ver los cambios en la página home.html.

8. Resumen

Ya creaste una aplicación que se asemeja a las especificaciones de tu diseñador.

La app completa de MDC-103 está disponible en este directorio: material-components-web-codelabs/mdc-103/complete

Puedes probar tu versión de la página en comparación con la página de ese directorio. No olvides ejecutar npm install primero en ese directorio.

Próximos pasos

Ya utilizaste estos componentes de MDC: tema, tipografía, elevación y forma. Puedes explorar más componentes y subsistemas en el catálogo web de MDC.

Pude completar este codelab con una cantidad de tiempo y esfuerzo razonables.

Totalmente de acuerdo De acuerdo Neutral En desacuerdo Totalmente en desacuerdo

Me gustaría seguir usando los componentes de Material en el futuro.

Muy de acuerdo De acuerdo Ni feliz ni triste En desacuerdo Muy en desacuerdo .