4. 4 / 67
MDL
Material Design Lite (MDL) is a library
of components for web developers
based on Google's Material Design
Philosophy.
Material Design is a visual language that synthesizes
the classic principles of good design with the
innovation and possibility of technology and science.
Material Design Lite lets you add a Material Design look and feel to your websites. It
doesn't rely on any JavaScript frameworks and aims to optimize for cross-device use,
gracefully degrade in older browsers, and o er an experience that is immediately
accessible.
The MDL components are created with CSS, JavaScript, and HTML. You can use the
components to construct web pages and web apps that are attractive, consistent, and
functional. Pages developed with MDL will adhere to modern web design principles like
browser portability, device independence, and graceful degradation.
The MDL component library includes new versions of common user interface controls
such as buttons, check boxes, and text elds, adapted to follow Material Design
concepts. The library also includes enhanced and specialized features like cards, column
layouts, sliders, spinners, tabs, typography, and more.
Ref: Material Design Lite
5. 5 / 67
MD+MDL
Material Design is a uni ed system
that combines theory, resources, and
tools for crafting digital experiences.
Material is a methaphor, a system for uniting style,
and motion under a consistent set of principles..
Material Design Lite is built to provide a lightweight and basic
set of Material Design components and templates for web sites.
The project does not intend to provide structures to create all
possible UX needs, but to provide a low-friction Material Design
implementation you can build on.
Even within Material Design itself, cards speci cally, it is unfeasible to provide every
combination in a seamless manner. When you nd something not provided, such as
dropdowns in the drawer, you may need to code your own component.
The team is committed to providing a great experience to developers while staying true to
the promise of lite.
Ref: Material Design
6. MDL
It's an implementation of the Material Spec targeted at content sites.
Only 27KB gzipped.
How? Vanilla CSS, HTML & JS!
Ref: @addyosmani
6 / 67
66. Refs
1. Material Design Lite
2. Introduction - Material design - Material design guidelines
3. Material Design
4. Deck by @addyosmani - Material Design for the Web
5. Resizer - Material Design
6. A Practical Introduction to Material Design Lite by Google
7. Google Design
8. Introduction - Material design - Material design guidelines
9. google/material-design-lite
66 / 67
67. 67 / 67
END
Eueung Mulyana
https://eueung.github.io/112016/mdl
CodeLabs | Attribution-ShareAlike CC BY-SA