由谷歌创建和设计的 Material Design(材料设计)是一种设计语言,结合成功的设计的经典原则以及创新科技。谷歌的目标是开发一个设计系统,让所有的产品在任何平台上拥有统一的用户体验。

Materialize 是一个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作,为您提供默认的样式,结合了您的自定义组件。此外,他们还改进动画和过渡,为开发人员提供流畅的体验。

Material

快速上手

下载

Materialize使用了两种方式来构建。选择任何一种你比较喜欢的方式引入到项目中。

Materialize

此版本(标准版)包含压缩后和未压缩两种.是用这个版本你不用安装任何额外的东西,只需要引入静态文件就行,如果你不了解Sass的话就用这种。
MATERIALIZE

Sass

这个版本包含了SCSS源文件,此版本中你可以自由选择要使用哪些组件。显然,如果选择这个版本你首先需要安装Sass预编译器。
SOURCE

NPM

通过NPM下载最新的标准版。包含了未压缩和压缩后的两种.

npm install materialize-css

Bower

通过Bower下载最新的标准版。包含了未压缩和压缩后的两种.

bower install materialize

安装

项目结构

下载完成后,解压到你的项目中。目录大概是这样。

标准版包含压缩和未压缩两种不同的版本,min版本意味着这是压缩后的,使用这个能显著减少加载时间。通常压缩版用在生产环境中,未压缩版用在开发环境中。

  MyWebsite/
 |--css/
 | |--materialize.css
 |
 |--font/
 | |--material-design-icons/
 | |--roboto/
 |
 |--js/
 | |--materialize.js
 |
 |--index.html

HTML

下一步,你要确保静态文件在适当的位置被引用。通常css文件在页面的head标签中引用,javascript文件在页面的底部引用。通过下面这个例子我想你懂得。

需要注意的是你必须在引用javascript前引用Jquery文件!

<!DOCTYPE html>
 <html>
 <head>
 <!--Import materialize.css-->
 <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>

 <!--Let browser know website is optimized for mobile-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 </head>

 <body>
 <!--Import jQuery before materialize.js-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="js/materialize.min.js"></script>
 </body>
 </html>

第三方选项

部分社区也提供了些额外的方法在项目中引入Materialize。不过这些可能没有经过测试,从而不能保证一直都是最新版本。

RubyGem

gem 'materialize-sass'

MeteorPackage

meteor add materialize:materialize

EmberPackage

  # install via npm
  $ npm install ember-cli-materialize --save-dev
  # make ember-cli fetch internal dependencies
  $ ember g ember-cli-materialize

Sass

如果你下载了Sass版本,请仔细阅读以下内容,否则请忽略。

编译

好吧,你会发现下载文件中全是.scss文件,而不是常规的.css文件,并且还包含了大量的独立组件。不幸的是,浏览器并不能解析Sass,所以你必须先把这些文件编译为常规的.css文件。之后你便可以把这些引入到你的项目了。

 MyWebsite/
    |--css/
    |  |--materialize.css <-- compiled from scss/materialize.scss
    |
    |--font/
    |  |--material-design-icons/
    |  |--roboto/
    |
    |--js/
    |  |--materialize.js
    |
    |--scss/
    |  |--materialize.scss
    |  |--components/
    |
    |--index.html
项目地址:

中文版:https://github.com/p412726700/material
官方版:https://github.com/Dogfalo/materialize

-完-