Material Design Lite:Material Design风格网站框架

material_design_lite

Material Design Lite 能帮你制作Material Design样式的网站。它不依赖任何JS框架,针对于跨设备使用优化,并自动降低性能适配旧版浏览器,快速体验手到擒来。

组件

mdl_component

Material Design Lite(MDL)为Web开发者们提供了一个组件库,设计来源于Google的Material Design理念:“这是一种融合了优秀设计的经典法则与探讨科技可能性的创新视觉语言。”开发者们如果想要合理地使用Material Design Lite组件,理解Material Design的来由和原理很重要。如果你还没有阅读过 Material Design 入门介绍,你可以先看看,再尝试使用组件库。

模板

博客

blog

这是个针对移动端的自适应模板,包含案例图片、文字博文、CTA订阅、搜索&分享链接,以及一个内置评论、计数器、书签功能扩展文章页。

ANDROID.COM MDL 皮肤

android-dot-com

这是个Material Design Lite 针对当前 android.com 站点的简化版本,保留了水平导航栏文字内容、焦点图片跑马灯展示以及长表单滚动子页面。

仪表盘

dashboard

这是个模块化自适应模板,自带数据可视化展示、清晰的纵向导航、用户档案、搜索等模块,并留有升级和过滤器的空间。

作品集

portfolio

这是个富有现代感、简洁美观的模板,可用于创建作品集或博客站点。此模板包含一个带有瀑布流header组件的顶部导航、供于展示不同内容形式的卡片,以及一个底部footer。

多文字页面

text-only

该模板适用于信息密度大、更新频率高、对可读性有要求的站点,它包含一个固定水平顶部导航、焦点标注、卡片展示、及一个可容纳深度内容链接表格的站点地图作为底部。

独立文章页

article

这个模板布局干净清晰,专为文本内容优化,拥有面包屑导航、搜索、及简单的header和footer,可作为一个展示型的卡片使用。

风格

Material Design Lite 是Material Design的轻量版,为web特别优化设计。如果您需要了解其他平台的设计规范细节请查看  Material Design 站点 。

typography

注意:该部分仅限于CSS展示header及显示样式,如果您需要了解更多字体样式规范,请查看 Material Design 规范 。

如果需要在您的网页中嵌入Roboto字体,请在您的HTML文档<head>部分开头加入以下代码。

开发资源

官方网站:http://www.getmdl.io
开源地址:https://github.com/google/material-design-lite

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer