Let's check out Material Design Lite

February 25, 2017


Material Design Lite

Preface

I love CSS frameworks, there is a certain magic in adding a css library and a few lines of HTML and getting a polished responsive web page, so come along and check out Material Design Lite.

A big note about the different Material Design Frameworks: Material design is Google's visual language for web pages, mobile apps and more, the specifications and general information can be found here: - There are multiple implementations of this language :
I will be focusing on using Material Design Lite: for static sites ( think portfolios,blogs,stores etc) rather than web and mobile apps, if you want to build those I've written a bit about the subject here:

Let's start by setting up

Step 1: Import Material Design Lite and display a simple component

See the Pen Material Design Lite - setup by Eugenio Keno Leon (@k3no) on CodePen.

Explanation: In order to add Material Design Lite, just include css and Js files and start adding components, in this case we are starting with a basic layout: 
 div class="mdl-layout"
And then adding a card component: 
 murray-card mdl-card mdl-shadow--2dp mdl-card--border
Notice that there are a number of options and an extra class murray-card you can use to customize with extra css rules.

Layouts & grids:

There seems to be 2 main ways of laying out a page in Material Design Lite , Layouts and Grids, let’s check them both:

Step 2: Figure out how to use layouts

See the Pen Material Design Lite - Layouts: Fixed Header by Eugenio Keno Leon (@k3no) on CodePen.

Explanation: Material Design layouts come in various flavors and blocks you can modify to suit your needs, most of the action happens in the first divs where you specify the layout class: 
class="mdl-layout mdl-js-layout mdl-layout--fixed-header
 After that it's just a matter of filling in the rest of the blocks with your content, consult the above example and the excellent documentation for more types of layouts and features: Material Design Lite layouts
Step 3: Figure out how to use the grid

See the Pen Material Design Lite - Grid by Eugenio Keno Leon (@k3no) on CodePen.

Explanation: The grid on the other hand is made with an outer container div: 
class="mdl-grid"
 and a number of div cells 
class="mdl-cell mdl-cell--1-col"
 Cells obey a set of basic rules:
A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size
There are ways to change the display of cells (order, visibility column size,etc,etc) all the options are listed in the documentation: Material Design Lite Grid
Step 4: Combine layouts and grids

See the Pen Material Design Lite - Layouts,Grid & Footer by Eugenio Keno Leon (@k3no) on CodePen.

Explanation: The road to combining layouts and grids is a little bumpy, some refinements need to be made so spacing,backgrounds,margins etc,etc are to your liking, but most of these modifications can simply be made by adding a class name and adding a few CSS Rules, the components, layout and grid are pretty simple, so they play nice and are easy to customize. Notice we also added a Footer component along some cards, a transparent header, drawer and tool bar navigation, and it's all responsive.

Components:

Having dealt with page layout, now it’s time to fill it up with some content, Material Design Lite provides a basic and complete set of options:

Material Design Lite Components

Step 5: Include a component, any component

See the Pen Material Design Lite - Component by Eugenio Keno Leon (@k3no) on CodePen.

Explanation: While each component requires its own configuration, they are pretty much a copy/paste and modify operation, it is worth noting that they seem to be mostly geared towards web content that isn’t particularly app-y.(their words) , if you need something more interactive you can alwasy choose one of the other Material Design Implementations mentioned above.
Step 6: Use multiple components

See the Pen Material Design Lite - Multiple Components by Eugenio Keno Leon (@k3no) on CodePen.

Explanation: Starting from a layout, it is simply a matter of adding components into a grid or various grids, each one is well documented and has a step by step process you can follow, additional modifications can be done via extra css rules. You can also modify the color styles by simply choosing the color combination you want : Material Design Lite Styles

Conclusion:

I loved working with Material Design Lite, it is a very simple and to the point CSS framework, I guess the main question is how does it stack against something like Bootstrap and the other Material Design Frameworks. In my brief experience, it is not as complete and customizable as bootstrap, or App friendly as something like Angular Material, yet if you want to add The material design look to a simple site it is a great option, additionally if you want to use the Google sanctioned implementation this is the only one.

I hope you enjoyed this few code samples and overview of Material Design Lite.

Best,

Keno