MDC-102 Web: Material Structure and Layout (Web)

1. Introduction

Material Components (MDC) help developers implement Material Design. Created by a team of engineers and UX designers at Google, MDC features dozens of beautiful and functional UI components and is available for Android, iOS, web and Flutter.material.io/develop

In codelab MDC-101, you used two Material Components (MDC) to build a login page UI: the text field and button. Now let's expand upon this by adding navigation, structure, and data.

What you'll build

In this codelab, you'll build a home page for an app called Shrine, an e-commerce app that sells clothing and home goods. It will contain:

• A navigation drawer
• An image list full of products

This is the second of three codelabs that guide you through building a site for a product called Shrine. It's recommended to do all of the codelabs in order, as they progress sequentially.

The related codelabs can be found at:

• MDC-101: Material Components (MDC) Basics
• MDC-103: Material Design Theming with Color, Shape, Elevation and Type

By the end of MDC-103, you'll build a website that looks like this:

MDC Web components in this codelab

• Drawer
• Image list

In this codelab, you'll use the default components provided by MDC Web. You'll learn to customize them in MDC-103: Material Design Theming with Color, Shape, Elevation and Type.

What you'll need

• A recent version of Node.js (which comes bundled with npm, a JavaScript package manager).
• The sample code (to be downloaded in the next step)
• Basic knowledge of HTML, CSS, and JavaScript

How would you rate your level of experience with web development?

Novice Intermediate Proficient

2. Set up your development environment

Continuing from MDC-101?

If you completed MDC-101, your code should be prepared for this codelab. Skip to step 3: Add a navigation drawer.

Download the starter codelab app

Download starter app

The starter app is located in the material-components-web-codelabs-master/mdc-102/starter directory. Be sure to cd into that directory before beginning.

Note the -master suffix in the name of the root directory. If you are downloading the starter app from the button above, please append the -master suffix whenever the root directory is referred to for the rest of this codelab.

...or clone it from GitHub

To clone this codelab from GitHub, run the following commands:

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

For more help: Cloning a repository from GitHub

Install project dependencies

Your current directory should be material-components-web-codelabs/mdc-102/starter. From there, run the following command:

npm install

After a lot of activity appears, your terminal should show a successful install:

MDC Web uses a CSS preprocessor called Sass. If you're using a different CSS preprocessor (or none at all), that's OK! You can use Sass alongside your current preprocessor by installing the sass CLI or using a plugin (for example, sass-loader for Webpack, gulp-sass for Gulp, or grunt-sass for Grunt) in your build toolchain.

In order for our code to work in older browsers like IE 11, we use a transpiler called Babel to transpile MDC Web's ES2015 JavaScript syntax down to ES5 JavaScript syntax.

We'll be using webpack to bundle our files and to locally serve our site. The webpack configuration for this project has already been set up for you in the webpack.config.js file. For more details on how it was configured, see the Getting Started guide.

Run the starter app

In the same directory, run this:

npm start

The webpack-dev-server will start. Point your browser to http://localhost:8080/ to see the page.

If you were unable to run npm install or npm start successfully, stop and troubleshoot your developer environment.

Success! You should see the Shrine login page from the MDC-101 codelab.

Now that the login page looks good, let's populate the app with some products. Enter a valid username and password, then click the "Next" button to go to the home page.

Alternatively, just navigate to http://localhost:8080/home.html to go to the home page.

3. Add a navigation drawer

When the user signs in, a homepage is revealed that says, "You did it!" That's great! But now our user needs actions to take and a sense of where they are in the app. To help with that, let's add navigation.

Navigation refers to the components, interactions, visual cues, and information architecture that enable users to move through an app or site. It helps make content and features discoverable, so that tasks are easy to complete.

Material Design navigation patterns offer a high degree of usability. The Material navigation drawer provides navigation and quick access to other actions. Let's add one.

Install MDC Drawer and List

To install the packages for the drawer component, run:

npm install @material/drawer @material/list

Note: We install the list component in addition to drawer, because the drawer's markup makes use of the list component for its navigation items.

Add the HTML

In home.html, replace "You did it!" with the following markup for the drawer and its items:

<aside class="mdc-drawer shrine-drawer">
  <div class="mdc-drawer__header">
    <svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
      <g>
        <g>
          <path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
             M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
        </g>
        <rect fill="none" width="24" height="24"/>
      </g>
    </svg>
    <h1 class="shrine-title">SHRINE</h1>
  </div>
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
        <span class="mdc-list-item__text">Featured</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Apartment</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Accessories</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Shoes</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Tops</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Bottoms</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Dresses</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">My Account</span>
      </a>
    </nav>
  </div>
</aside>

Add the CSS

In home.scss, add the following import statements after the existing import:

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

At the bottom of home.scss, add the following styles:

.shrine-logo-drawer {
  display: block;
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  text-align: center;
  margin: 5px auto;
}

For this codelab, you only need the base styles for the drawer and list components. You'll have a chance to customize these components in MDC 103: Material Design Theming with Color, Shape, Elevation and Type.

Add the JavaScript

We need to instantiate the MDC List inside the navigation drawer for proper keyboard navigation. Open home.js, which is currently empty, and add the following code:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

Note: We use the standard Navigation Drawer variant in this codelab. The standard variant has no drawer-specific logic, so we instantiate the MDCList inside of it directly. Dismissible and modal variants also exist, which use a dedicated MDCDrawer component for additional features. You can find out more about the MDC Navigation Drawer variants in the documentation.

Refresh the page at http://localhost:8080/home.html. Your home page should now look like this:

Now the home page has a persistent navigation drawer displaying various navigation items, with the first item active.

4. Add images with text labels

Now that our app has some structure, let's organize the content by placing it in an image list.

The image list component is designed to display a set of images in a repeated pattern. These images may be accompanied by supporting information, such as text labels.

Install MDC Image List

To install the package for the image list component, run:

npm install @material/image-list

Add the HTML for a list with one item

Let's start by adding an image list next to the navigation drawer. We'll start the list by adding a single item, which consists of an image and a text label.

In home.html, add the following HTML after the end of the <aside> element:

<ul class="mdc-image-list product-list">
  <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>

The list includes an additional class, product-list, which will apply custom styles, both in this tutorial and in MDC-103.

Add the CSS

First, in home.scss, add an import for the image list component styles after the existing imports:

@import "@material/image-list/mdc-image-list";

Next, add the following styles after the initial home page styles:

.product-list {
  @include mdc-image-list-standard-columns(4);

  overflow: auto;
}

These styles instruct the image list to display images across four columns, ensuring that the image list scrolls independently of the drawer.

Refresh the page. The home page should now look like this:

An image list is intended to display many images in a collection, so let's add more images to better see how the component works.

In home.html, copy the existing <li> element:

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

Then paste it after the existing item (before the closing </ul> tag) 15 times. This will result in a total of 16 images. Don't worry about unique images and titles yet; you'll get to those in MDC-103.

Refresh. Now the home page should look like this:

The image list displays four images per row, and the images automatically size to fit the available screen space.

5. Recap

Your site has a basic flow that takes the user from the sign in page to a home page, where products can be viewed. In just a few lines of code, you added a drawer and an image list to present content. The home page now has a basic structure and content.

The completed MDC-102 app is available in this directory: material-components-web-codelabs/mdc-102/complete

You can test your version of the app against the app in that directory. Don't forget to run npm install in that directory first.

Next steps

With the drawer and image list, you've now used two more Material Design core components from the MDC Web library! You can explore more components by visiting the MDC Web Catalog.

While it's fully functioning, the home page doesn't yet express any particular brand or point of view. In MDC-103: Material Design Theming with Color, Shape, Elevation and Type, you'll customize the style of these components to express a vibrant, modern brand.

I was able to complete this codelab with a reasonable amount of time and effort

Strongly agree Agree Neutral Disagree Strongly disagree

I would like to continue using Material Components in the future

Strongly agree Agree Neutral Disagree Strongly disagree