Material Design is a concept created by Google and published around 2014. It extends the ‘flat design’ concept by creating layers (moving along the Z-axis). This includes methods of shadowing as well as various animations for components that users interact with. Each of the layers represent a ‘material’ that reacts differently to light (thereby giving a textural appearance). It goes beyond the traditional flat design concept, which represents more like a pen and paper. Microsoft’s ‘Metro Design’ found on Windows 8+ and Windows Phone is an example that followed the flat design concept.

When done right, material design will give the user an intuitive experience of looking down on a board of flat layers, each having its own material. This design concept is thought to be intuitive for the user maximizing the overall user experience. Material design is found in many Android mobile apps (all Google products practice it). The concept has been applied to other platforms as well, including Apple apps and web apps (the tools/libraries are currently supported on all major browsers). This post focuses on the web-based implementation of material design.

There are two popular main strategies for incorporating material design into web applications: Material Design Components (MDC) and Material Design Lite (MDL). These libraries are not cross compatible and so the developer must select one or the other. Both differ in syntax and usage. MDC is extensible and supports integration into other web frameworks whereas Material Design Lite is more focused on being a lightweight library (as the name implies) that can be quickly applied to give the material design look and feel. As of 2017, MDL has lost support and is being succeeded by MDC-Web.

Using MDC-Web

According to material.io, the MDC web components can be used at the minimum by referencing the javascript and css files here:

https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

Once those are referenced, there needs to be a JavaScript function call to instantiate the MDC component, for example:

mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));

Though this is the simple approach, it is not recommended by the material design team. Instead, they recommend packaging up each of the needed components (using Webpack) and also using an ES2015 compiler to ensure the components work on all browsers. Their documentation on each of the web components takes this approach, as can be seen here:

https://material.io/develop/web/components/input-controls/checkboxes/

Note that for each MDC-Web component used, it needs to be installed via NPM. Each of the components are styled in SASS and therefore require a webpack transpiler. Each of the MDC components are prefixed with ‘mdc-*’, example ‘mdc-text-field’.

Once a MDC-Web component is installed through NPM, we reference it’s style in the SCSS file and instantiate it in the JS file. On the JS file, the component needs to be imported before instantiation.

When changing a color for a component, the variable representing the color you want to change (ex. $mdc-theme-primary or $mdc-theme-secondary) must be declared before importing the component into your *.scssfile.

SASS Mixins

MDC-Web components have mixin feature where certain styles can be ‘mixed into’ the component. This can be done in the SCSS or by adding the specific mixin class into the element on the HTML. Example:

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

Responsiveness

MDC-Web components provide responsive layout design using the typical 12 column grids found in other frameworks. MDC-web also has platform specific keywords for identifying the screen size. These are “desktop”, “tablet” and “phone”. For example, to adjust a grid’s margin based on the platform, we can have the following CSS:

.mdc-grid {
  --mdc-layout-grid-margin-desktop: 32px;
  --mdc-layout-grid-margin-tablet: 8px;
  --mdc-layout-grid-margin-phone: 1px;
}

Datepicker

In the past we would often use another third party library to implement datepickers. Though these libraries exist for MDC-Web as well (some examples linked below), the material design team suggests using native datepickers for web components. This means using the browser’s HTML5 implementation for input fields of type date.

<input type='date' ... >

Most modern browsers have a native date picker and therefore, a third party library is unnecessary unless supporting older browsers. Some examples of datepickers using material design:

https://puranjayjain.github.io/md-date-time-picker/

https://www.cssscript.com/demo/beautiful-material-design-date-time-picker/

Icons

Material design team provides their own set of icons which are SVG based. These can be found at the link below. The icons are responsive and can be resized based on the view modes (desktop, tablet, phone).

https://material.io/tools/icons/?icon=exposure_neg_1&style=baseline