Each component is usable separate from any other component.
All of MDC Web's CSS is generated using Sass. Sass mixins let us make groups of CSS declarations that we want to reuse on multiple components. Subsystems provide a Sass mixin, which the component imports in its Sass file. Each package compiles its Sass files into a single CSS file.
MDC Web does NOT provide any HTML templates. We simply provide documentation with the required HTML structure.
MDC Web components are written in TypeScript to increase
developer velocity and reduce errors. Our npm releases include UMD
typing declaration files for TypeScript users. See Importing JS for more information.
The Foundation contains the business logic that best represents Material Design, without actually referring to any DOM elements. The Foundation delegates to Adapter methods for any logic requiring DOM manipulation.
The Adapter is an interface with all the methods the Foundation needs to implement Material Design business logic. There can be many implementations of the Adapter, allowing for interoperability with different frameworks.
Instantiated with a root element,
the Vanilla Component creates a Foundation instance with a Vanilla
Adapter by overriding the
getDefaultFoundation method of
MDCComponent. The Vanilla Adapter implements the Adapter
APIs and directly references the root element. The Vanilla Component
also exposes proxy methods for any Foundation methods a developer needs
Developers who are simply interested in consuming MDC Web (i.e. not providing a wrapper library) should only need to interact with the Component. They should not need to directly access Foundation or Adapter APIs.