In the last chapter, we saw how the Materialize framework provides an intuitive way to create material web pages. Material Design Lite (MDL), as we saw in Chapter 8, Material Web Frameworks, offers a similarly simple mechanism and is probably even easier to pick up. The reason for this is the slightly different approach used by MDL. This approach involves starting with standard HTML elements and then adding the MDL classes. This not only makes it very easy to learn, but also makes it the ideal tool for adapting our existing web pages into Material Design ones. Perhaps the best way to think of MDL is as an enhanced set of traditional HTML components. Another differing feature is how many of the desired effects can be implemented with some very simple and intuitive CCS.
In this chapter, you will learn how to:
Create a page layout with a transparent header
Add navigation options
Customize the header
Include a side bar
Add tabs
Create a search field
Add drop-down menus...