「MDUI」一个轻量级、无依赖的 Material Design 前端框架

[zdhxiong]

Github ： https://github.com/zdhxiong/mdui

文档： http://www.mdui.org/docs/

MDUI 是一个轻量级的 Material Design 前端框架，对照着 Material Design 文档进行开发，争取 1:1 实现 Material Design 中的组件。

多主题支持

MDUI 拥有 19 种主色、 16 种强调色、和一种夜间主题。只需添加一个 CSS 类即可实现主题的切换。

可以点击官方文档右上角按钮观看主题切换效果。

轻量级

包含所有主题的 CSS 文件仅 26.4KB minified + gzip

JavaScript 文件仅 12KB minified + gzip

且没有任何依赖

响应式

移动优先，可适配所有屏幕。

0.2.0 版本已发布，主要更新为：

• 内置了一个 DOM 操作库，拥有和 jQuery 类似的语法，包含 CSS 选择器、DOM 操作、事件等功能。可以通过 mdui.JQ 来调用该库。
• 修复在触控屏上，浮动操作按钮、滑块、Tab 选项卡、菜单等组件无法用鼠标操作的 bug。

[zdhxiong]

@iq72 现在应该好了

[iq72]

@zdhxiong 还是不行，但是，查了下 ERR_SPDY_PROTOCOL_ERROR 好想事 chrome 的锅

[makry]

star 支持

[sox]

楼主果然一丝不苟没有作假

[LWXYFER]

@zdhxiong get.

[wolfan]

@zdhxiong win10-Chrome 版本 55.0.2883.87 m (64-bit)，控制台没有啥报错，反正呐，就是没有涟漪效果。

[wolfan]

@zdhxiong 不过用模拟器打开涟漪效果就反道出来了，话说……，这是什么神奇的效果呐~

[viosey]

CSS 丢了 +1

[zdhxiong]

@viosey 并没有啊。

[viosey]

@zdhxiong

[zdhxiong]

@viosey 奇怪了，我静态资源用的都是 http ，怎么到你这里就变成 https 了

[viosey]

@zdhxiong 懂了，我用的强制 HTTPS 插件。估计是因为 upyun 支持 HTTPS ，所以资源强制走 HTTPS ，然后你只有 http...
话说为什么不都走 HTTPS 呢？感觉不是很友好啊

[zdhxiong]

@viosey 现在应该好了

[viosey]

@zdhxiong Nice! 框架很棒。 我的 Hexo Material Design 主题 https://github.com/viosey/hexo-theme-material 有打算使用这个框架来重构

[kimwang]

感谢楼主，正需要一个漂亮，轻量的前端框架，先欣赏、学习一下。

[ishowman]

IE10 以下不支持吗？看来比较适合用在移动端

[zdhxiong]

@ishowman 只支持 IE10 以上。

[jeanim]

很棒，感谢楼主

[xingso]

这个厉害了。。支持下楼主

[maomaomao001]

建议去掉响应式，毕竟有单独的响应式框架

[zdhxiong]

@maomaomao001 MDUI 就是你说的 “单独的响应式框架”

[manihome]

这个好 已 star⭐️

[ck65]

之前用 MDUI 撸了个半成品 web app （ Vue.js + MDUI ），手机观看效果最佳。。
https://whatair.mogita.cn/
框架使用体验很不错，功能顺手。只是每个 class 名都要加 mdui- 前缀略繁琐，而且会让 html 标签变得非常长。。

[maomaomao001]

@zdhxiong 不是吧，你这不是还带各种组件嘛，市面上有单独的布局的 css 框架了，很全面的

[pynix]

貌似不错。。

[zdhxiong]

@maomaomao001 MDUI 支持自定义打包，你不想要组件，可以把组件全部去掉；不想要响应式布局，可以把响应式布局模块去掉。

[springmarker]

http://www.tikitiki.cn 用的 0.1.2 撸的一个

[ab]

好厉害啊

[plzzzzg]

收藏 回头 star

[only0jac]

提个建议，headroom 在手机端一点也不流畅，刚开始以为自己手机不行，后来换了个单独的 headroom 插件，极度流畅

[nicevar]

不错，正在寻找一个轻量级的做新的东西，以前用过 jQueryMobile 和 sencha touch，感觉不太行，这两天看了一下 vue，还是有点啰嗦了，试试楼主的大作

[TriiHsia]

好赞！收藏了，打算作为下一个项目的前端。

[KiseXu]

很不错，楼主辛苦了

[KiseXu]

楼主，有没有捐赠方式，想给项目捐赠

[zdhxiong]

@KiseXu http://www.mdui.org/design/
这儿有捐赠二维码

[zdhxiong]

@KiseXu 捐赠已到账，非常感谢

[KiseXu]

@zdhxiong 😊 加油 💪

[visonnn]

Wow，很赞。

[omygod]

nice

[osacar]

@ck65 在 vue cli 中你是如何引入 MDUI 的？请教一下方法，多次尝试都没有成功。

[ck65]

@osacar bower 安装后直接在 index.html 引入 css 和 js。这个项目比较挫，当时还不会模块化引入。。

[osacar]

@ck65 使用 webpack 能行么？你说的模块化引入又是如何操作？请指教。

[ck65]

@osacar 抱歉没有尝试过，有个 issue 里作者建议 cdn 引入，也就是直接引文件。https://github.com/zdhxiong/mdui/issues/70

[enious]

@zdhxiong 楼主怎么个自定义打包法，你的文档完全没有说明

[zdhxiong]

@enious 用 gulp custom 命令，命令的参数在这里有介绍： https://www.mdui.org/docs/download#build

[nVoxel]

作者能简单说下类似 [组件的在线说明文档怎么制作的？]( https://www.v2ex.com/t/454106#reply1) 问题里的问题么？

这种文档一般是怎么生成的？

[yhxx]

官网好像挂了？

[wfdaj]

@zdhxiong 请问如何使用 gulp 自定义 mdui ?
按照网站提示，命令行是这样吗？ gulp --custom -primary-colors:teal ？
错误提示是：ReferenceError: primordials is not defined