基于Google Material Design的现代化响应式前端框架-UE设工库

由谷歌创建和设计的 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