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.
- Material Design Lite: Google sanctioned standalone implementation
- Angular Material: which is the open source non-google implementation for Angular
- Bootstrap Material: A mix of css frameworks
- Material ui: For React
- Ember paper For ember.js
- And more there is probably an implementation for your favorite language out there
Let's start by setting up
And then adding a card component:div class="mdl-layout"
Notice that there are a number of options and an extra class murray-card you can use to customize with extra css rules.murray-card mdl-card mdl-shadow--2dp mdl-card--border
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:
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 layoutsclass="mdl-layout mdl-js-layout mdl-layout--fixed-header
and a number of div cellsclass="mdl-grid"
Cells obey a set of basic rules:class="mdl-cell mdl-cell--1-col"
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
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:
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.