CSS Material Design

Start using Materialize in your website

Posted by Gloomymoon on 2016-11-29

1 About Meterial Design

Material Design是由Google发布的全平台设计规范，其原则如下：
Material is the metaphor
Google认为材质的触感可以通过纸片的隐喻来表达，通过在设计上运用符合运动规律的动画交互、通过光影打造层及设计的关系来创造全新的虚拟交互控件，将设计从2D拓展到了3D。

Bold, graphic, intentional
视觉设计上不仅要生动形象，还要表达 信息架构、意义、帮助用户聚焦，为用户使用提供指引，凸现当前页面的核心功能，确认设计的目的。

Motion provides meaning
交互动画的目本是吸引用户的注意，表达当下页面发生的变化，因此也与对视觉要求一样，反映设计的目的和意义

因为Google自带被墙属性，对于看厌了iOS、boostrap和Metro风格的高逼格同学，Materail Design确实看上去更高大上。

Material Design是一个设计规范，制订了一套遵循优秀设计的经典定则，让不同平台的应用都保持统一的外观。与iOS 7的走向极端的扁平化不同，Material Design仍然保留了阴影、光线、层次，以及现实世界中的物理法则，虽然不模拟现实，但是构建了真实的感觉。

Google自家的一系列应用已经来是陆续换上Material Design。对于Material Design规范可以参看官方文档，不想翻墙的同学可以前往新的官方网站：www.material.io，或非官方翻译版：帮你全面彻底搞定MATERIAL DESIGN的学习笔记、MATERIAL DESIGN设计规范学习心得

Google官方发布了Material Design Lite(MDL)，一套基于CSS、JS和HTML的Material Design风格的组件实现方案，不依赖于任何第三方JS库，并针对各平台优化，向下支持到IE9。

此外还有第三方实现：

2 Flask Materialize

flask-material是一个基于flask-boostrap且封装了MaterializeCSS的开源实现。因为MDL的发布，该项目作者计划迁移到基于官方的CSS框架下。

2.1 Installation

直接通过pip安装即可：

1
pip install flask-material

2.2 Init

在flask项目中使用flask-material，首先需要在主程序的__init__.py中初始化插件：

1
2
3
4
5
6
7
8
9
10
from flask_material import Material

material - Material()

def create_app(config_name):
    app = Flask(__name__)
    app.config.from_object(config[config_name])
    config[config_name].init_app(app)
    material.init_app(app)
    ...

强制调用本地的css和js，还需要修改config.py配置文件：

1
2
3
class Config:
    MATERIAL_SERVE_LOCAL = True
    MATERIAL_QUERYSTRING_REVVING = False

注意一定要添加MATERIAL_QUERYSTRING_REVVING = False配置行，否则程序会报错。配置完之后只要在html模板文件开头添加{ % extends "material/base.html" % }，就能够调用MaterializeCSS的css和js：

1
2
3
<link href="/static/material/css/materialize.min.css" rel="stylesheet" media="screen">
<script src="/static/material/js/jquery.min.js"></script>
<script src="/static/material/js/materialize.min.js"></script>

2.3 Using Material Icons

良心Google将900+ Material Icon全部开源，包括共Web使用的Icon font、SVG和PNG文件。因为自带被墙属性，所以不推荐在应用里tongguoCDN的方式引用Icon font（<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">）。我们需要将Icon Font下载到本地。
下载icon font下的所有文件，到项目的static/font目录中，然后再base.html中添加相应的css引用即可：

1
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='font/material-icons.css') }}">

在html中就可以渲染icon了：

1
<i class="material-icons">face</i>

你也可以给icons添加更多辅助样式，比如大小和颜色等：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

具体可参见material design icons/。

2.4 Basic Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{ % extends "material/base.html" % }
{% import "material/utils.html" as util %}
{% import "material/wtf.html" as wtf %}

{% block title %}Hello, world!{% endblock %}

{% block content %}
<div class="container">
        <div class="row">
                <div class="col s12 m6">
                    {{ util.card('Hello world!', wtf.quick_form(form) )}}
                </div>
                <div class="col s12 m6">
                    {{ util.card('Isn\'t Flask great?', '<p>I really do enjoy it!</p>', [['https://github.com/HellerCommaA', 'My Github']])}}
                </div>
        </div>
</div>
{% endblock %}

由于flask-material模板使用的说明文档不全，而且已经跟久没有更新，与MaterializeCSS相差已经非常大了，因此强烈建议迁移到最新的MaterializeCSS。

3 MaterializeCSS

3.1 Update CSS and JS

MaterializeCSS对于各种Components的使用都有详细的案例，因此可以在原先falsk-material的基础上，将CSS和JS文件替换掉。从这里下载获取最新的zip包，将包中的css、fonts、js文件夹尽数复制到%project_dir%\venv\Lib\site-packages\flask_material\static目录下，覆盖即可。

3.2 Color

http://materializecss.com/color.html

3.3 Grid

http://materializecss.com/grid.html

3.4 Helpers

http://materializecss.com/helpers.html

3.5 Media

http://materializecss.com/media-css.html

3.6 Shadow

http://materializecss.com/shadow.html

3.7 Table

http://materializecss.com/table.html

3.8 Typography

http://materializecss.com/typography.html

3.9 Badges

http://materializecss.com/badges.html

3.10 Buttons

http://materializecss.com/buttons.html

3.11 Cards

http://materializecss.com/chips.html

3.12 Collections

http://materializecss.com/collections.html

http://materializecss.com/footer.html

3.14 Forms

http://materializecss.com/forms.html

3.15 Navbar

http://materializecss.com/navbar.html

3.16 Pagination

http://materializecss.com/pagination.html

3.17 Preloader

http://materializecss.com/preloader.html

FEATURED TAGS
CSS Material Design