Google对Material Design Lite的实用介绍

青旅半醒 2022-12-03 10:00 86阅读 0赞

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.

Google在2014年发布了[Material Design规范][Material Design specification] ，这是一种**视觉语言，**旨在将扎实的设计原则，跨不同平台和设备的一致用户体验以及技术和科学创新结合在一起。

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.

Google在2015年7月发布了[Material Design Lite][] ，这是一个前端库，旨在简化向网站添加材料设计外观的感觉。

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:

在本文中，我将重点介绍材料设计的以下基本原理和组件，以及如何使用Material Design Lite(MDL)库实现它们：

*  Typography
    
    版式
 *  Color
    
    颜色
 *  Layout
    
    布局
 *  Cards
    
    牌

## 示范项目 **(**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.

本文的演示项目称为Kaptain Kitty。 这是一个HTML模板，旨在说明如何将我在本文中讨论的材料设计概念和MDL组件应用于网页。

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.

如果您想在阅读本文时跟上Material Design Lite的步伐，则需要您最喜欢的代码编辑器和现代化的最新浏览器。

You can view the demo project and its source code on CodePen:

您可以在CodePen上查看演示项目及其源代码：

See the Pen [Demo Template Using Material Design Lite][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[演示模板使用材料设计精简版][Demo Template Using Material Design Lite]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

Let’s begin.

让我们开始。

## 在您的项目中包括Material Design Lite **(**Including Material Design Lite in Your Project**)** ##

When it comes to including MDL in your project, you have the following options:

在项目中包含MDL时，您有以下选择：

*  Load the necessary CSS and JavaScript files using \[Google’s CDN\] ([Content Delivery Network][]).
    
    使用\[Google的CDN\]( [Content Delivery Network][] )加载必要CSS和JavaScript文件。
 *  Download the [minified CSS and JavaScript files][] and host them on your server.
    
    下载[缩小CSS和JavaScript文件，][minified CSS and JavaScript files]并将其托管在您的服务器上。
 *  Download and build the source code from the [MDL project on GitHub][].
    
    从[GitHub上][MDL project on GitHub]的[MDL项目][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_components` folder: `bower install material-design-lite --save`
    
    如果使用[Bower][]管理项目，则可以键入以下命令以将MDL库文件安装在`bower_components`文件夹中： `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_modules` folder: `npm install material-design-lite --save`
    
    如果[npm][]是您选择的软件包管理器，请运行以下命令以将MDL文件安装在`node_modules`文件夹中： `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.

Google建议使用CDN上托管CSS和JavaScript文件。 您可以在本文的演示页面中找到此方法。

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:

首先，在HTML文档的`<head>`部分中，包括对MDL CSS文件，Google的Material Design图标和项目的样式表的引用，您将在其中添加自己的自定义项：

Next, just before the closing `</body>` tag, add a reference to the MDL JavaScript file:

接下来，在结束`</body>`标记之前，添加对MDL JavaScript文件的引用：

## Material Design Lite中的版式 **(**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][].

Material Design为英语和类似英语的语言(拉丁，希腊和西里尔字母)选择的字体是[Roboto][]和[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.

Noto还支持**密集的**脚本，如中文，日语和韩语，以及**较高的**脚本，如东南亚和中东语言，例如阿拉伯语，北印度语等。

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:

要将Roboto字体文件包含在您的项目中，请在HTML文档的`<head>`部分顶部添加以下`<link>`标记：

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.

对于拉丁，希腊和西里尔字母，材料设计规范建议印刷比例为12、14、16、20和34。您可以通过向标记添加一组特定的类来使用MDL应用材料设计印刷原理。

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:

例如，加入`.mdl-typography--display-2`到`<h1>`标签和`.mdl-typography--display-1`到`<p>`标签，添加的字体大小值`45px`和`34px`分别：

<h1 class="mdl-typography--display-2">Title</h1>
    <p class="mdl-typography--display-1">
      Sub-title
    </p>

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.

MDL具有许多具有印刷规模，可访问性和可读性原则的类。这使显示漂亮的文本内容变得更容易，而无论使用哪种设备访问它，它都易于阅读。

For a complete list of typography classes, visit the [MDL typography component page][] on GitHub.

有关印刷术类的完整列表，请访问GitHub上的[MDL印刷术组件页面][MDL typography component page] 。

## 为您的MDL项目选择颜色 **(**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.

记下MDL库样式表文件名： *material.indigo-pink.min.css* 。 该名称指向样式表中实现的“ [材料设计”调色板][Material Design color palette] 。 默认调色板使用靛蓝作为原色，使用粉红色作为重点色。 但是您并不会坚持这些。 以下是材料设计的有关如何制定自定义调色板以及如何使用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][Material Design color palette]
> 
> 颜色应该是出乎意料的和鲜艳的。 [Google Material Design规格][Material Design color palette]

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.

材料设计提供了多种美丽的调色板，这些调色板可以和谐地协同工作。 为了使选择颜色更容易，调色板中的每种颜色都有一个数字标签以及一个十六进制颜色值来标识它。 材质设计指南指示500种颜色**主**色调。 其他颜色最好用作**重点**色。

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.

现在，您对材料设计颜色准则有了深刻的了解，是时候为您的MDL项目做出很棒的颜色选择了。 这是如何做。

### 在Material Design Lite中自定义默认调色板 **(**Customizing the Default Color Palette in Material Design Lite**)** ###

You can switch from the default indigo-pink palette to your own custom palette in either of the following ways.

您可以通过以下两种方式之一从默认的靛蓝色调色板切换到自己的自定义调色板。

If you’re using Google’s CDN, like I’ve done in the demo for this article, follow these steps:

如果您使用的是Google的CDN(如本文的演示中所述)，请按照以下步骤操作：

*  Locate the URL to the MDL stylesheet file inside the `href` attribute of the `<link>` tag in the `<header>` section of your HTML page
    
    在HTML页面的`<header>`部分的`<link>`标记的`href`属性内找到MDL样式表文件的URL。
 *  Replace *indigo* with your chosen primary color and *pink* with your favorite accent color.
    
    将*靛蓝*替换为您选择的原色，并将*粉红色*替换为您最喜欢的强调色。

For instance, let’s say the colors you select from the material design palettes are teal as primary and amber as accent. Here’s what the URL to the MDL stylesheet hosted on Google CDN looks like:

例如，假设您从材质设计调色板中选择的颜色是蓝绿色为主色调，琥珀色为主色调。 Google CDN上托管的MDL样式表的URL如下所示：

You’re done!

你完成了！

If you’d rather host the compiled and minified MDL files on your server, the MDL website has you covered. There you’ll find the [Customize and Preview tool][], which lets you select a primary and accent color palette from an interactive color wheel. You can then download the CSS for your chosen theme and plug it straight into your project:

如果您希望将经过编译和缩小的MDL文件托管在服务器上，请访问MDL网站。 您将在此处找到“ [定制和预览”工具][Customize and Preview tool] ，它使您可以从交互式色轮中选择主要和重点色的调色板。 然后，您可以下载所选主题CSS，并将其直接插入项目中：

The HTML demo for this article uses the default indigo-pink palette, but you’re free to experiment with different color selections using either of the methods outlined above.

本文HTML演示使用默认的靛蓝粉红色调色板，但是您可以使用上面概述的任何一种方法随意尝试不同的颜色选择。

## MDL布局组件 **(**MDL Layout Component**)** ##

MDL offers a number of commonly-used web components, including layout, buttons, cards, switches, etc. Start building the structure of your HTML template using the [layout component][] of Material Design Lite.

MDL提供了许多常用的Web组件，包括布局，按钮，卡片，开关等。开始使用Material Design Lite的[布局组件][layout component]来构建HTML模板的结构。

MDL encloses the entire layout inside a container element with the classes of `.mdl-layout .mdl-js-layout`.

MDL将整个布局包含在`.mdl-layout .mdl-js-layout`类的容器元素内。

Start by adding the following code snippet after the opening `<body>` tag of your HTML document:

首先在HTML文档的`<body>`标记后添加以下代码段：

MDL uses [CSS flexbox][] for layout. The `.mdl-layout` element is a **flex container** with the `flex-direction` property set to `column`.

MDL使用[CSS flexbox][]进行布局。 `.mdl-layout`元素是一个**flex容器** ，其`flex-direction`属性设置为`column` 。

The layout component includes the following four sub-components:

布局组件包括以下四个子组件：

*  Navigation layouts
    
    导航布局
 *  Grid
    
    格
 *  Tabs
    
    标签
 *  Footer
    
    页脚

### 使用标签导航 **(**Using Tabs for Navigation**)** ###

You can build your navigation by choosing from the following options:

您可以通过选择以下选项来构建导航：

*  Transparent header
    
    透明标题
 *  Fixed drawer, no header
    
    固定抽屉，无标题
 *  Fixed header
    
    固定头
 *  Fixed header and drawer
    
    固定页眉和抽屉
 *  Scrolling header
    
    滚动标题
 *  Waterfall header – header that contracts on page scroll.
    
    瀑布头–在页面滚动时收缩的头。

You’re free to look into the options above on the [MDL navigation layouts section][] and experiment with each of them for your project.

您可以在[MDL导航布局部分中][MDL navigation layouts section]随意查看上面的选项，并为您的项目尝试每个选项。

As for the HTML demo that accompanies this article, I’ve opted for a tabbed navigation using the [Tabs component][]. The beauty of tabs is that, although the content is sectioned out into mutually exclusive screens, all sections are physically placed on the same page. This means that when users click on a tabbed navigation link, they won’t need to wait for the server to load a new page in their browser. All the content is instantly available, thereby creating a pleasant experience for site visitors.

至于本文随附HTML演示，我选择了使用[Tabs组件][Tabs component]进行标签式导航。 标签的优点在于，尽管将内容分成互斥的屏幕，但所有部分实际上都放置在同一页面上。 这意味着，当用户单击选项卡式导航链接时，他们无需等待服务器在其浏览器中加载新页面。 所有内容均立即可用，从而为站点访问者创造愉悦的体验。

To quickly build a tabbed header layout, follow these steps:

要快速构建选项卡式标题布局，请按照下列步骤操作：

Add two more classes to the layout container element you coded earlier – `.mdl-layout--fixed-header` and `.mdl-layout--fixed-tabs`:

向您先前编写的布局容器元素中添加另外两个类`.mdl-layout--fixed-header`和`.mdl-layout--fixed-tabs` ：

Note how MDL organizes CSS using namespaced [BEM][] classes. If you’re not familiar with BEM methodology, [Working with BEM at Scale – Advice From Top Developers][Working with BEM at Scale _ Advice From Top Developers] by Patrick Catanzariti offers a superb overview.

注意MDL如何使用命名空间的[BEM][]类组织CSS。 如果您不熟悉BEM方法，那么Patrick Catanzariti [撰写的“大规模BEM －顶级开发人员][Working with BEM at Scale _ Advice From Top Developers]的[建议”][Working with BEM at Scale _ Advice From Top Developers]将为您提供绝佳的概述。

Next, code the `<header>` section as follows:

接下来，对`<header>`部分进行编码，如下所示：

<header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        
        <span class="mdl-layout-title">Your Title</span>
      </div>
      
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
        <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
        <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
      </div>
    </header>

Finally, you need to add the corresponding content panels:

最后，您需要添加相应的内容面板：

<main class="mdl-layout__content">
      
      <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
        <div class="page-content">
          
          content panel 1
        </div>
      </section>
    
      
      <section class="mdl-layout__tab-panel" id="fixed-tab-2">
        <div class="page-content">
          
            content panel 2
        </div>
      </section>
    </main>

The panel with `id="fixed-tab-1"` has the `.is-active` class and will be displayed by default.

`id="fixed-tab-1"`的面板具有`.is-active`类，默认情况下将显示。

### 在抽屉组件中放置额外的内容 **(**Placing Extra Content in the Drawer Component**)** ###

The demo also uses a **drawer** section. A drawer is a side panel that you can hide and show with the click of a button. You can also choose to keep the drawer open and fixed so that its content always stays in full view.

该演示还使用了一个**抽屉**部分。 抽屉是一个侧面板，单击按钮即可隐藏和显示。 您还可以选择使抽屉保持打开状态和固定状态，以便其内容始终保持完整视图。

Drawers are great for adding widgets, sharing buttons, and extra navigation links to a web page without cluttering the design.

抽屉非常适合在不使设计混乱的情况下向窗口添加小部件，共享按钮以及额外的导航链接。

Using the code snippet you added earlier, just after the `<header>` section, write the code below to add a drawer component to your layout:

使用您先前添加的代码段，在`<header>`部分之后，编写以下代码，以将抽屉组件添加到布局中：

<div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Your Title</span>
    </div>

View these [snippets in action][] or inspect the [demo project’s source code][demo project_s source code] for a full implementation of the tabbed navigation and drawer components.

查看[实际操作中][snippets in action] [的代码][demo project_s source code] [片段][snippets in action]或查看[演示项目的源代码][demo project_s source code] ，以获取选项卡式导航和抽屉组件的完整实现。

### Material Design Lite网格 **(**The Material Design Lite Grid**)** ###

Material Design Lite uses a 12-column grid for desktop screens, 8-column grid for tablets (up to 800px), and a 4-column grid for mobile screen sizes (up to 500px).

Material Design Lite对桌面屏幕使用12列网格，对于平板电脑使用8列网格(最大800像素)，对于移动屏幕尺寸使用4列网格(最大500像素)。

You enclose the grid columns inside a container element with a class of `.mdl-grid`:

您将网格列包含在容器元素内，并带有`.mdl-grid`类：

By default, the grid columns container element spans the entire width of the screen. If this is not what you want, it’s up to you to define its width in your stylesheet.

默认情况下，网格列容器元素跨越屏幕的整个宽度。 如果这不是您想要的，则取决于您在样式表中定义其宽度。

For instance, the demo project for this article implements both **full-screen** and **centered boxed** sections:

例如，本文的演示项目实现了**全屏**和**居中的方框**部分：

The layout is achieved by wrapping each section in a different `.mdl-grid` element and giving the boxed section an additional custom class with a CSS `max-width` value of `960px`.

通过将每个节包装在不同的`.mdl-grid`元素中并为装箱的节提供附加的自定义类(CSS `max-width`值为`960px` )来实现布局。

The HTML:

HTML：

And the CSS:

和CSS：

.intro-section {
      max-width: 960px;
    }

Also, if you’d like to have no margins between grid columns, MDL has a handy class that you can add to the grid columns container element – `.mdl-grid--no-spacing`:

另外，如果您希望网格列之间没有边距，那么MDL可以提供一个方便的类，您可以将其添加到网格列容器元素– `.mdl-grid--no-spacing` ：

This will give you something like this:

这会给你这样的东西：

Next, you build the **columns** inside the `.mdl-grid` element by adding a `<div>` element with the class of `.mdl-cell`. Here’s the code for a 3-column grid:

接下来，通过添加具有`.mdl-cell`类的`<div>`元素，在`.mdl-grid`元素内构建**列** 。 这是3列网格的代码：

If you’d like to override the default column size, you need to add a `.mdl-cell--{number}-col` class with a number ranging from 1 to 12. Here’s the code for a 2-column grid:

如果要覆盖默认的列大小，则需要添加一个`.mdl-cell--{number}-col`类，其数字范围为1到12。这是2列网格的代码：

Check out the [**live demo on CodePen**][live demo on CodePen].

[**在CodePen上观看实时演示**][live demo on CodePen] 。

If your design requires it, MDL offers handy utility classes to hide columns at specific screen sizes:

如果您的设计需要，MDL提供了方便的实用程序类来隐藏特定屏幕尺寸的列：

*  `.mdl-cell--hide-desktop` hides the column on desktop screen sizes (larger than 840px)
    
    `.mdl-cell--hide-desktop` cell- `.mdl-cell--hide-desktop`在桌面屏幕尺寸(大于840px) `.mdl-cell--hide-desktop`隐藏该列
 *  `.mdl-cell--hide-tablet` hides the column on tablet-screen sizes (larger than 480px)
    
    `.mdl-cell--hide-tablet` cell- `.mdl-cell--hide-tablet`在平板电脑屏幕尺寸(大于480px)上隐藏该列
 *  `.mdl-cell--hide-phone` hides the column on mobile screen sizes (less than and up to 480px)
    
    `.mdl-cell--hide-phone` cell- `.mdl-cell--hide-phone`隐藏移动屏幕尺寸(小于和等于480px)上的列

To see this in action, view the welcome section of [the demo project][demo project_s source code] at different screen sizes. You’ll soon notice that the decorative pink circles next to the list items are not visible on small screens:

要查看实际效果，请以不同的屏幕尺寸查看[演示项目][demo project_s source code]的欢迎部分。 您很快就会注意到，列表项旁边的装饰性粉红色圆圈在小屏幕上不可见：

## Material Design Lite卡组件 **(**The Material Design Lite Cards component**)** ##

The card UI pattern has been gaining popularity for quite some time now, especially thanks to websites like [Pinterest][].

卡UI模式已经流行了一段时间了，特别是由于[Pinterest之类的][Pinterest]网站。

Here’s how material design defines the card component:

材料设计如何定义卡组件：

> A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject. [Material design spec][]
> 
> 卡是一种材料，可以用作更详细信息的入口。 卡片可以包含照片，文字和有关单个主题的链接。 [材料设计规格][Material design spec]

You can add different types of content to a single card, but make sure it’s all **related to a core topic**. Also, avoid placing too much information or too many links and buttons inside a card. Rather, point users to a dedicated page where you’ve laid out more detailed information about the topic.

您可以在一张卡片上添加不同类型的内容，但要确保它们都**与核心主题相关** 。 另外，请避免在卡内放置太多信息或太多链接和按钮。 而是将用户指向专门的页面，在该页面上您已布置了有关该主题的详细信息。

Here’s how you can add a simple card to your page using the [MDL card component][]:

这是使用[MDL卡组件][MDL card component]向页面添加简单卡的[方法][MDL card component] ：

<div class="mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Card title</h2>
      </div>
      <div class="mdl-card__media">
        <img src="card-img.jpg" alt="">
      </div>
      <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aenan convallis.
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          Read more
        </a>
      </div>
    </div>

You wrap the card content inside a container element with the class of `.mdl-card`. The `.mdl-shadow--{number}dp` class lets you take control of the drop shadow’s depth: adding 3, 4, 6, 8, or 16 to this class will result in a deeper drop shadow.

您可以使用`.mdl-card`类将卡片内容包装在容器元素中。 `.mdl-shadow--{number}dp`类可让您控制投影的深度：向该类添加3、4、6、8或16将产生更深的投影。

Next, you add a container for the following card sections:

接下来，为以下卡片部分添加一个容器：

*  Card title, using the `.mdl-card__title` class
    
    卡标题，使用`.mdl-card__title`类
 *  Card media, using the `.mdl-card__media` class
    
    卡媒体，使用`.mdl-card__media`类
 *  Card text content using the `.mdl-card__supporting-text` class
    
    使用`.mdl-card__supporting-text`类的卡片文本内容
 *  Card actions using the `.mdl-card__actions` class, if your card includes an action button or similar elements.
    
    如果您的卡片包含操作按钮或类似元素，则使用`.mdl-card__actions`类进行卡片操作。

Finally, you flesh out this structure with the appropriate content making sure your title tag has a class of `.mdl-card__title-text`.

最后，使用适当的内容来`.mdl-card__title-text`此结构，确保您的标题标签具有`.mdl-card__title-text` 。

Here’s the live snippet on CodePen:

这是CodePen上的实时代码段：

See the Pen [Material Design Lite Cards][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen]的Pen [Material Design Lite卡][Material Design Lite Cards] ( [@SitePoint][SitePoint] )。

You can also turn a grid cell into a card component by adding the appropriate `.mdl-card` class to an element with the `.mdl-cell` class:

您还可以通过将适当的`.mdl-card`类添加到具有`.mdl-cell`类的元素来将网格单元变成卡组件：

You can find this approach in the accompanying demo project. This is a great way to achieve a responsive tiled layout:

您可以在随附的演示项目中找到此方法。 这是实现自适应平铺布局的好方法：

## 结论 **(**Conclusion**)** ##

This article has been all about exploring the Material Design Lite library by Google and putting it into practice in a real HTML web template.

本文旨在探讨Google的Material Design Lite库，并将其在实际HTML Web模板中付诸实践。

MDL is not a comprehensive framework like, for example, [Bootstrap][]. It doesn’t have you covered for all the components and styles your application most likely needs. Therefore, expect to code some features yourself.

MDL不是像[Bootstrap][]这样的全面框架。 它没有涵盖应用程序最可能需要的所有组件和样式。 因此，期望自己编写一些功能。

However, the library is still evolving and it might surprise us with some new stuff in future releases. Also, the web offers a rich material design ecosystem of resources for designers and developers, most of them free.

但是，该库仍在不断发展，它可能会在将来的发行版中为我们带来一些新的惊喜。 此外，网络为设计师和开发人员提供了丰富的材料设计生态系统资源，其中大多数是免费的。

You can use the [HTML template][demo project_s source code] for this article, together with the [templates on the MDL website][], as one more resource to start experimenting with MDL and building your own awesome material design project.

您可以将本文的[HTML模板][demo project_s source code]与[MDL网站上][templates on the MDL website]的[模板][templates on the MDL website]一起使用，作为开始尝试MDL并构建自己的出色材料设计项目的另一资源。

By the way, don’t forget to share your experience of using Material Design Lite with the SitePoint community!

顺便说一句，不要忘了与SitePoint社区分享您使用Material Design Lite的经验！

> 翻译自: [https://www.sitepoint.com/practical-introduction-material-design-lite-google/][https_www.sitepoint.com_practical-introduction-material-design-lite-google]

[Material Design specification]: http://google.com/design/spec
[Material Design Lite]: http://getmdl.io/
[Demo Template Using Material Design Lite]: http://codepen.io/SitePoint/pen/oxXdov/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[Content Delivery Network]: https://developers.google.com/speed/libraries/
[minified CSS and JavaScript files]: https://storage.googleapis.com/code.getmdl.io/1.0.6/mdl.zip
[MDL project on GitHub]: https://github.com/google/material-design-lite
[Bower]: http://bower.io/
[npm]: https://www.npmjs.com/
[Roboto]: https://www.google.com/fonts/specimen/Roboto
[Noto]: https://www.google.com/get/noto/
[MDL typography component page]: https://github.com/google/material-design-lite/tree/master/src/typography
[Material Design color palette]: https://www.google.com/design/spec/style/color.html
[Customize and Preview tool]: http://getmdl.io/customize/index.html
[layout component]: http://getmdl.io/components/index.html#layout-section
[CSS flexbox]: https://drafts.csswg.org/css-flexbox/
[MDL navigation layouts section]: http://getmdl.io/components/index.html#layout-section/layout
[Tabs component]: http://getmdl.io/components/index.html#layout-section/tabs
[BEM]: https://en.bem.info/
[Working with BEM at Scale _ Advice From Top Developers]: https://www.sitepoint.com/working-bem-scale-advice-top-developers/
[snippets in action]: http://codepen.io/SitePoint/pen/GZJdxj
[demo project_s source code]: http://codepen.io/SitePoint/pen/oxXdov
[live demo on CodePen]: http://codepen.io/SitePoint/pen/oxXddN
[Pinterest]: https://uk.pinterest.com/
[Material design spec]: https://www.google.com/design/spec/components/cards.html
[MDL card component]: http://getmdl.io/components/index.html#cards-section
[Material Design Lite Cards]: http://codepen.io/SitePoint/pen/EKjLLJ/
[Bootstrap]: http://getbootstrap.com/
[templates on the MDL website]: http://getmdl.io/templates/index.html
[https_www.sitepoint.com_practical-introduction-material-design-lite-google]: https://www.sitepoint.com/practical-introduction-material-design-lite-google/