In 2014 Google published the Material Design specification, a visual language aiming to bring together solid design principles, a consistent user experience across different platforms and devices, and technological and scientific innovation.
July 2015 saw Google release Material Design Lite, a front-end library designed to make it easier to add the material design look and feel to a website.
In this article I’m focusing on the following fundamental principles and components of material design and how you can implement them using the Material Design Lite (MDL) library:
- Typography
- Color
- Layout
- Cards
[author_more]
The Demo Project
The demo project for this article is called Kaptain Kitty. It’s an HTML template aiming to illustrate how you can apply the material design concepts and MDL components I discuss in this article to a web page.
If you’d like to put Material Design Lite to its paces as you dive into the article, you’ll need your favorite code editor and a modern up-to-date browser.
You can view the demo project and its source code on CodePen:
See the Pen Demo Template Using Material Design Lite by SitePoint (@SitePoint) on CodePen.
Let’s begin.
Including Material Design Lite in Your Project
When it comes to including MDL in your project, you have the following options:
- Load the necessary CSS and JavaScript files using [Google’s CDN] (Content Delivery Network).
- Download the minified CSS and JavaScript files and host them on your server.
- Download and build the source code from the MDL project on GitHub.
- If you use Bower to manage your project, you can type the following command to install the MDL library files in the
bower_componentsfolder:bower install material-design-lite --save - If npm is your package manager of choice, run the following command to install the MDL files in the
node_modulesfolder:npm install material-design-lite --save
Google recommends using the CSS and JavaScript files hosted on their CDN. This is the method you’ll find in the demo page for this article.
First off, in the <head> section of your HTML document, include references to the MDL CSS file, Google’s Material Design icons, and the project’s stylesheet, where you’re going to add your own customizations:
[code language="html"]
<link rel="stylesheet"
href="http://ift.tt/1NxWSAi">
<link rel="stylesheet"
href="http://ift.tt/1I7E37E">
<link rel="stylesheet" href="css/styles.css">
[/code]
Next, just before the closing </body> tag, add a reference to the MDL JavaScript file:
[code language="html"]
<script src="http://ift.tt/1TlJTcp">
</script>
[/code]
Typography in Material Design Lite
Material Design’s chosen typefaces for English and English-like languages (Latin, Greek, and Cyrillic characters) are Roboto and Noto.
Noto also supports dense scripts like Chinese, Japanese, and Korean, and tall scripts like Southeast Asian and Middle Eastern languages, e.g., Arabic, Hindi, etc.
To include the Roboto font files in your project, add the following <link> tag at the top of the <head> section of your HTML document:
[code language="html"]
<link rel="stylesheet"
href="http://ift.tt/1nLUIYD">
[/code]
For Latin, Greek, and Cyrillic characters, the material design specification recommends a typographic scale of 12, 14, 16, 20, and 34. You can apply the material design typography principles using MDL by adding a set of specific classes to the markup.
For instance, adding .mdl-typography--display-2 to an <h1> tag and .mdl-typography--display-1 to a <p> tag, adds a font size value of 45px and 34px, respectively:
[code language="html"]
<h1 class="mdl-typography--display-2">Title</h1>
<p class="mdl-typography--display-1">
Sub-title
</p>
[/code]
MDL has a number of classes with typographic scale, accessibility, and readability principles baked in. This makes it easier to display beautiful text content that is pleasant to read irrespective of the device being used to access it.
For a complete list of typography classes, visit the MDL typography component page on GitHub.
Choosing a Color for your MDL Project
Take note of the MDL library stylesheet filename: material.indigo-pink.min.css. The name points to the Material Design color palette implemented in the stylesheet. The default color palette uses indigo as primary color and pink as accent color. But you’re not stuck with these. Below are material design’s recommendations on how to work out a custom color palette and how to implement it using MDL.
Material Design Color Principles
Material design loves combining bold and muted colors, shadows, and highlights:
Color should be unexpected and vibrant.
Google Material Design Spec
However, this doesn’t amount to splashing random colors on your web page. Quite the opposite.
Material design offers a wide range of beautiful color palettes that work harmoniously together. To make it easier to pick colors, each color in a palette has a number label as well as the hexadecimal color value to identify it. Material design guidelines indicate the 500 colors as primary colors. The other colors are best used as accent colors.
When you work out a custom color selection for your website, material design recommends that you pick three hues from the primary palette and one accent color from the secondary palette. Here’s an example:
Limit the use of accent colors to links, your primary action button, and some components like switches and sliders. Avoid using accent colors for body text:
Also, the material design guidelines discourage using the accent colors in large areas of the page and in app bars. Especially important is not to use the same color for both the floating action button and the background:
Now that you have a solid understanding of material design color guidelines, it’s time to make an awesome color selection for your MDL project. Here’s how.
Continue reading %A Practical Introduction to Material Design Lite by Google%
by Maria Antonietta Perna via SitePoint
No comments:
Post a Comment