Let's check out Material Design Lite
February 25, 2017
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.
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:
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.
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.
The grid on the other hand is made with an outer container div:
and a number of div cells
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.
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.
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
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.