cmui / cmui Goto Github PK

View Code? Open in Web Editor NEW

186.0 11.0 46.0 471 KB

Lightweight UI solution for mobile web.

Home Page: https://cmui.cmcm.app/

License: MIT License

CSS 0.65% JavaScript 58.10% HTML 1.79% Stylus 39.45%

css mobile-web ui framework components widgets cmui

cmui's Introduction

CMUI

CMUI is a UI framework for mobile web. It provides rich widgets and simple interfaces out-of-the-box, which helps developers get rid of details of styling and troubles of compatibility, and focus on building their own applications.

CMUI 是一个专攻移动网页的 UI 框架，它提供了丰富的组件和简洁的接口，开箱即用。CMUI 帮助开发者摆脱样式细节和兼容性困扰，从而腾出更多精力投入到业务开发中。

兼容性

浏览器支持

支持以下移动平台的主流浏览器：
- iOS 10+
- Android 4.4+
同样支持以下桌面浏览器：
- Firefox (Latest)
- Chrome (Latest)
- Safari (Latest)

（更多细节参见 CMUI 的浏览器分级支持策略。）

外部依赖

Underscore 1.8+
Zepto 1.1+
Gearbox 0.7+

安装与使用

传统方式

通过 npm 3 安装：
```
$ npm install cmui
```

在页面中加载 CMUI 的样式文件、脚本文件及必要的依赖：

<!DOCTYPE html>
<html>
<head>
	...
	<link rel="stylesheet" href="node_modules/cmui/dist/cmui.css">
</head>
<body>
	...
	<script src="node_modules/underscore/underscore-min.js"></script>
	<script src="node_modules/zepto.js/dist/zepto.min.js"></script>
	<script src="node_modules/cmui-gearbox/dist/gearbox.min.js"></script>
	<script src="node_modules/cmui/dist/cmui.js"></script>
</body>
</html>

通过 Stylus 加载

如果你的项目以 Stylus 作为 CSS 预处理器语言，则可以在你的源码中直接引入 CMUI 的样式入口文件：

@import './node_modules/cmui/src/css/theme/baixing/index'

在这种方式下，你可以在源码中使用 CMUI 提供的高级 API：

变量
Mixin

演示与文档

建议使用 iOS/Android 设备访问：CMUI Demo

谁在用？

以下网站基于 CMUI 构建（请使用 iOS/Android 设备访问）：

百姓网 - 手机版 (m.baixing.com)
~~优e网 - 手机版 (m.uemall.com)~~（已下线）
~~薇姿官方电子商城 - 手机版 (m.vichy.com.cn)~~（已改版）

参与开发

功能模块

CMUI 的部分模块已经分离出去，成为独立项目。这些模块以开发依赖的方式引入，并打包到发布文件中。因此，参与这些独立项目的开发即可修改这些模块。

CSS Reset - Zero
Stylus Library - Brush

构建

把本项目的代码 fork 并 clone 到本地。
在项目根目录执行 npm install，安装必要的依赖。
在项目根目录执行 npm run dist，运行构建脚本。
构建生成的发布文件将存放在 /dist 目录下。

单元测试

把本项目的代码 fork 并 clone 到本地。
在项目根目录执行 npm install，安装必要的依赖。
在浏览器中打开以下文件即可运行单元测试：
- test/test-dev.html - 测试源码（用于开发阶段的测试）

Thanks

CMUI is based on these open source projects:

Normalize.css

CMUI team is using JetBrains IDE (WebStorm) with Open Source License:

License

MIT License

cmui's People

Contributors

Stargazers

Watchers

Forkers

git4liu fivenamefour quenteenfix ajccom xuemengfei 88baby66 chenny zpbx lpj0017 mashuangshuang zhengjunwei inwikipedia joshchanq asd1355215911 evanoxu blueeye1015 cube3power iuyes ifa6 14686039 zangjinjin fishfaceeast xuelixiang fan90910 keji58 sundogzhang webin magic-coder liwensuo kevinandleekai lyt9304 jnan77 longshaoye msi1979 swpigris81 zeeny yangxiaochun-admin cnbin diycp liebertleos ykl124 hhy5277 kexin1021 superyyao chenglei12345 liuyu520

cmui's Issues

把 Brush 的源码整合进来，减少依赖层级，降低构建复杂度

把 Brush 的源码复制到 src/css/vendor/ 目录，并加入代码库（类似对 Normalize.css 和 Zero 的处理方式）。这样当其它项目引入 CMUI 时，不需要管理太多的依赖。

CSS3 动画 Loading 图标在较早的浏览器中没有动画效果

PR #3 用 CSS3 动画 Loading 图标取代了 GIF 动画。不过在 iOS 6- 和所有版本的 Android 自带浏览器中，都不能正常播放动画。

据 @myst729 提示，这些较早的浏览器不支持伪元素的 animate。（参： http://css-tricks.com/transitions-and-animations-on-css-generated-content/ ）

可能需要以真实的元素代替伪元素来实现动画效果。

需要把 normalize.css 升级到 3.0.3

3.0.3 更新内容：
necolas/normalize.css@3.0.2...3.0.3

注册到 Bower，允许其它项目通过 Bower 来安装 CMUI

Use npm (instead of Bower) to manage external dependencies.

使用 npm 来管理外部依赖

目前的外部依赖是通过 Bower 管理的，打算迁移到 npm，以减少整体架构的复杂度。

[BX Theme] `article > main` 布局似乎考虑过多了，反而限制了实际开发的便利性

article > main 默认设置了左右内边距，而如果其内容区块需要显示为全宽时，则需要调用 full-width-block() 这个 mixin——它的原理是通过水平方向上负外边距来突破 main 的内容区的。而这些内容区块自己可能也需要设置水平内边距，于是整个过程就变得相当折腾了。

为 article > main 指定默认的左右内边距是为了快速实现简单页面——直接写内容即可，内容不会贴到边。但实际开发中这种场景其实非常有限，几乎所有的页面都是经过充分美化的。

使用 clean-css 压缩 CSS 会导致 Firefox 下样式异常

问题

目前在使用 CSS 代码压缩工具是 clean-css，使用方便，压缩率高。

但存在一个问题，它默认会把所有 rgba(*,*,*,0) 转换成 transparent。而（我估计）在 Firefox 内核中 transparent 是直接绑定了 rgba(0,0,0,0) 的，那么在发生颜色插值运算的场景下（transition、gradient、不同边框色的斜边交界等），Firefox 在计算中间色调时会出现问题，观感上表现为半透明的黑色乱入。

对 CMUI 的样式来说，这个问题会影响到按钮和列表等元素的渐变背景等。

解决方案

在使用 clean-css 压缩 CSS 代码时，增加 -c * 参数，强制关闭这种透明色转换行为。

$ cleancss -o cmui.min.css --s1 -d -c * cmui.css

Implement building tasks based on Gulp/Grunt

建立基于 Gulp/Grunt 的构建过程

我在开发时是用我本地的一个 Shell 脚本（批处理）来做 dist 文件的合并、压缩的。由于这只是个临时方案，我并没有把这个脚本提交到代码库。其它开发者在参与开发时，需要各自处理构建问题，一来不方便，二来构建结果不统一。

未来需要把这个构建过程规范化，把它建立在通用的工具链之上。方案可能是 Gulp 或 Grunt，至少需要完成以下基本的构建任务：

源码合并
~~源码压缩~~

[已移走] CMUI 之微信兼容性报告

本文已迁移到 https://github.com/CMUI/doc/issues/4。

路径问题

路径都是下面这样的，如果整个项目不是托管在根目录下就会404，在local预览也404

C:\Users\IBM_ADMIN\Desktop\CMUI-master\dist\cmui.css (8 hits)
    Line 328:   background: url(/src/img/ui-loading-32x32-white-black.gif) no-repeat center center;
    Line 332:   background: url(/src/img/ui-loading-32x32-black-white.gif) no-repeat center center;
    Line 513:   background: url(/src/img/ui-loading-48x48-white-black.gif) no-repeat center center;
    Line 517:   background: url(/src/img/ui-loading-48x48-black-white.gif) no-repeat center center;
    Line 695:   background: url(/src/img/ui-loading-32x32-white-black.gif) no-repeat center center;
    Line 698:   background: url(/src/img/ui-loading-32x32-black-white.gif) no-repeat center center;

把演示页面从 CMUI 代码库中转移到 demo 项目中

让 CMUI 代码库更纯粹，只管理项目源码。
CMUI/demo 项目已建好，要用起来。

使用 Bower 来管理外部依赖

做完这件事情，就可以移除 deps 目录，把外部依赖库移出代码库。

Underscore 升级到 1.7 之后，Loading 组件不能正常工作

主要原因是 _.union() API 的行为有变化。以下代码在 1.6- 和 1.7 中的结果不同：

_.union([1], 2)

必须写成以下方式才能得到预期结果：

_.union([1], [2])

除此以外，Underscore 1.7 的很多 API 行为都有变化。

API 变得更严格我很理解并赞同，但 API 行为变化之后大版本号并没有变，感觉很不爽，险些中招啊。Lo-dash 嘲讽 Underscore 不支持 semver 果然是有道理的。