MDC Web is split into packages. Each package is either a Subsystem or a Component. Subsystems apply to many components. They generally describe style (e.g. color) or motion (e.g. animation). Component packages tend to rely on many subsystem packages. But component packages rarely depend on other component packages. Components require an HTML structure. Some components are static, but most are dynamic and include some JavaScript.
Each component is usable separately from any other component.
All of MDC Web's CSS is generated using Sass. Sass mixins lets 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 has split each dynamic component's JavaScript into two pieces: Foundation and Adapter. This lets us reuse Foundation code across multiple web platforms, e.g. React and Angular, by re-implementing only the Adapter. For now we've only implemented a vanilla JavaScript version of the Adapter.
The Foundation contains the business logic that best represents Material Design, without actually referring to any HTML elements. This lets us isolate HTML logic into the Adapter. Foundation has-a Adapter.
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!
Instantiated with a root element, the Vanilla Component creates a Foundation with a Vanilla Adapter. The Vanilla Adapter implements the Adapter and directly references the root element. The Vanilla Component also exposes proxy methods for any Foundation methods a developer needs to access.