「Mobi.css」轻量，灵活的移动端 css library， built with love

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2995 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近做了一个 css library ，颇废了一番功夫。

这里先把它分享给大家，欢迎 star ，欢迎试用！

PS ：将来 Homepage 会转到 http://getmobicss.com/ ，目前这个域名我已经买了，但是说需要 60 天才能转移。

简单介绍

Mobi.css 是一个轻量，灵活的移动端 css library 。特点如下：

只有 2.8kb after gzip ，比 Skeleton, Pure.css, Bootstrap v4 等所有 css 库都小
大量使用 Flexbox ，非常灵活， Homepage 基本上没有写额外的 css ，只有不到 10 行的 inline-style
Focus on mobile ，在 desktop 端相当于展示的还是 mobile 的页面，不过可以在左侧或右侧加上侧边栏

更多介绍请看 Homepage

最后奉上 Mobi.css 的 Logo

Mobi.css Logo

第 1 条附言 · 2016-08-29 18:41:53 +08:00

感谢大家的支持，第一次获得 GitHub Trending CSS 分类的 Top 1

GitHub Trending CSS Top 1

根据反馈做了一些更新：

Mobi.css v0.2.0 | GitHub | Homepage

Breaking Changes

Change col-half, col-third, col-quarter to col-1-2, col-1-3, col-1-4
Change section, paragraph, clear-margin-top to mt-30, mt-15, mt-0

New Features

Add autoprefixer for compatiblity

Other Changes

Update font-size of pre from 1.4rem to 1.5rem
Small changes to alerts colors
Small changes to the colors of disabled buttons

第 2 条附言 · 2016-08-30 23:13:12 +08:00

发布了新版本

Mobi.css v0.3.1 | GitHub | Homepage

新的域名已经可以访问了： http://getmobicss.com ，老域名会 301 跳转

更新日志

Breaking Changes

Remove alerts (#9)
Remove top middle bottom left center right (#10)

New Features

A new class label

Other Changes

Small changes to radio and checkbox
Remove background of hovered links

第 3 条附言 · 2016-09-01 23:59:48 +08:00

发布了新版本

Mobi.css v0.4.1 | GitHub | Homepage

更新日志（v0.4.1 ~ v0.3.1）

Breaking Changes

Remove col-custom, now we can use col and max-width to achieve custom column (#11)
Rewrite _reset.scss, so that <table> and <input>s in <form> will not be reset, we need to add class="table" to <table> and class="form" to <form>. This will let Mobi.css be more friendly to third party libraries (#14)

New Features

Add a new class btn, new we can make an <a> to a button by adding class="btn"
Add _custom.scss so that people can easily generate their own Mobi.css
Add some typography styles such as <mark>, <sup>, etc

Other Changes

Remove pre { margin-left: "-15px", margin-right: "-15px" } when screen width larger than container, so that pre will not look odd
Use opacity to achieve [disabled]
Update <h4>, <h5>, <h6> font-size

Bugfixes

Fix a container bug, container's width is not the same when container-side shows

第 4 条附言 · 2016-09-03 18:10:29 +08:00

Mobi.css v1.0.0-alpha.1 发布啦，欢迎试用！
https://www.v2ex.com/t/303683

77 条回复 • 2016-09-03 18:09:56 +08:00

Martox

2016-08-29 01:42:55 +08:00 via Android

先赞后看

haiyang416

2016-08-29 02:05:47 +08:00 via Android

大致看了下，还不错，支持。

maomaomao001

2016-08-29 02:21:56 +08:00 via Android

建议
1: 做好 select 和 checkbox 的样式
2: 布局里的 1/2 啊，四分之之类的请用数字代替(50,25)
或者 1-2,1-4 这样的

teriyaki888

2016-08-29 04:55:34 +08:00

支持

真心不喜欢那些大坨 js 框架

hanxiV2EX

2016-08-29 08:05:18 +08:00 via iPhone

支持，已 star

xcatliu

2016-08-29 08:37:16 +08:00 via iPhone

@maomaomao001 感谢你的建议！

第一条建议能描述具体一点吗？我是故意保留了 checkbox 和 radio 的原始样子，觉得手机中的样式挺好的。你的意思是要修改他们的样式吗？还是说在一些手机上有 bug ？

第二条建议，我思考了一下，觉得确实不是很方便， quarter 不是很好拼。决定下个版本中改为 col-1-2 col-1-3 col-1-4

另外 section paragraph clear-margin-top 也想改成更好记的 mt-30 mt-15 mt-0

我记录在 issues 里面了，今天有时间的时候再改

Troevil

2016-08-29 08:39:23 +08:00

问题来了大量使用 Flexbox , 兼容性怎么保证呢

RoshanWu

2016-08-29 08:45:02 +08:00

@Troevil 确实，已被 Android 4.3 以下的折腾死。。。

xcatliu

2016-08-29 08:45:46 +08:00 via iPhone

@Troevil 根据 caniuse

caniuse.com/#feat=flexbox

绝大部分手机浏览器是支持 flexbox 的，相信已经基本上可以安全使用了。

xcatliu

2016-08-29 08:48:01 +08:00 via iPhone

@Troevil @RoshanWu Android 4.3 以下确实还有问题。。。只能等它绝迹了

RoshanWu

2016-08-29 08:52:52 +08:00

@xcatliu 呵呵，不管怎么样，还是送上 star 表示兹瓷

xcatliu

2016-08-29 08:54:49 +08:00 via iPhone

@RoshanWu 感谢支持！

guyskk

2016-08-29 08:59:12 +08:00 via Android

@xcatliu col-6 col-4 col-3 不是更好吗，分母固定 12

hansnow

2016-08-29 09:19:42 +08:00

已 star 支持

panlilu

2016-08-29 09:23:42 +08:00 via iPhone

兹瓷

0915240

2016-08-29 09:36:35 +08:00

支持支持

0915240

2016-08-29 09:36:51 +08:00

已 star

BOYPT

2016-08-29 09:41:11 +08:00

嗯…… flexbox 的 grid ……感觉像轻量的 boostrap 4 ……不过觉得固定比例分配还是得要有……

xcatliu

2016-08-29 09:45:11 +08:00

@guyskk 谢谢建议。不过我觉得移动端不需要 12 格的 grid ，所以没有用 12 格的概念

xcatliu

2016-08-29 09:46:36 +08:00

@BOYPT 谢谢建议。固定比例分配是什么意思？现在应该是固定比例的分配

BOYPT

2016-08-29 09:49:16 +08:00

@xcatliu 噢我看漏了，说的就是 col-half, col-third and col-quarter ，已经有了。应该比较足够用了， nice job

bertonzh

2016-08-29 09:55:28 +08:00

4.3 下 flex 是老语法，需要用 autoprefixer 做后处理，看了下你的 dist 文件，没有 `-webkit-flex`，没有 `-webkit-box`，在低端版本下肯定惨不忍睹了。

而且即使是使用了 autoprefixer ， flex 在 4.3 下和标准的浏览器有些地方还是有区别，需要特殊处理。

bertonzh

2016-08-29 09:58:11 +08:00

checkbox 和 radio 最好处理下，不同系统的差异还是比较大的。而且自定义起来也没啥兼容性问题。

xcatliu

2016-08-29 10:04:57 +08:00 via iPhone

@bertonzh Autoprefixer 稍后加上， checkbox 和 radio 我再去调研一下各平台的样式。

多谢建议！

yoa1q7y

2016-08-29 10:14:01 +08:00

这里感觉还可以调整一下

xcatliu

2016-08-29 10:18:54 +08:00 via iPhone

@yoa1q7y 嗯这个是系统的 radio 样式，我稍后做一些调整吧

多谢建议！

tkpc

2016-08-29 10:21:50 +08:00

shellcodecow

2016-08-29 10:34:02 +08:00

很赞，收藏

horizon

2016-08-29 10:39:06 +08:00

楼主有时间能不能分享一下要写这种的 css library 的设计思路呢。

xcatliu

2016-08-29 10:45:35 +08:00

@horizon 嗯，等当前版本基本稳定之后写个分享。感谢支持！

arslion

2016-08-29 11:11:30 +08:00

ಠ_ಠ 为什么要这样

xcatliu

2016-08-29 11:15:01 +08:00 via iPhone

@arslion 太细心了。。。我都没注意到，稍后改过来。多谢！

acdea4effdbb420d

2016-08-29 11:17:55 +08:00

看起来不错，希望能长期坚持

xcatliu

2016-08-29 11:24:13 +08:00 via iPhone

@acdea4effdbb420d 谢谢支持，后续打算先做个 hexo 主题

sammiriam

2016-08-29 11:35:39 +08:00

赞一个

andypinet

2016-08-29 11:38:39 +08:00

input 不要直接改

xcatliu

2016-08-29 12:13:06 +08:00

@andypinet 谢谢关注。请问可以描述具体一点吗？没有理解 input 不要直接改是什么意思

andypinet

2016-08-29 13:11:39 +08:00

@xcatliu bootstrap2 直接对 input 添加样式导致问题 bootstrap3 统一成 form-control 类

xcatliu

2016-08-29 13:13:48 +08:00 via iPhone

@andypinet 懂了，回头我看看相关的资料，多谢建议！

newbieo0O

2016-08-29 14:22:01 +08:00

单选按钮和文字没对齐啊，太挤了。 Mac Safari

ChiangDi

2016-08-29 14:33:26 +08:00

现在一般要求兼容到安卓 4.0 以上

avenger

2016-08-29 14:37:12 +08:00

目前在用 PureCss ，看楼主的描述，所以这个是专门为 mobile 设计的了？
除了文件更小以外，能说说其它优势吗？重新造一个轮子的意义何在？

arens

2016-08-29 15:04:43 +08:00

已 Star ，支持纯 CSS 框架，希望能继续维护

hjse7en

2016-08-29 16:09:05 +08:00

移动端，代码块宽度占满屏幕，看着难受

xcatliu

2016-08-29 16:28:28 +08:00

@newbieo0O 感謝測試，稍後修正一下。

xcatliu

2016-08-29 16:31:25 +08:00

@arens 感謝支持

xcatliu

2016-08-29 16:45:23 +08:00

@hjse7en 主要是考慮到移動端屏幕太小了，看代碼不方便，能大一點區域就大一點

xcatliu

2016-08-29 18:13:35 +08:00

@avenger 感谢关注， Purecss 确实是一个很好的 css library ，我也参考了一些它的代码。下面回答一下你的问题。

Mobi.css 是专门为 mobile 设计的。针对 desktop 只保留了一个 sidebar 用于放二维码等不需要展示在 mobile 的内容。

其他优势：

1. 2.8kb vs 4.6kb 其实并不算优势， Mobi.css 后面可能会更大一些。但是应该会保持在 4kb 以内。所以并不是强调它是最小的吧，只是借此说明它重视移动端的小体积。
2. Mobi.css 重度依赖于 flexbox ，在很多场合它比传统的 css 更适合 grid ，也更加灵活。相信未来拥抱 flexbox 是一个趋势。
3. 提供一些针对移动端的样式，比如 scrollable ，将来会添加一些常用的。
4. 提供一些移动端开发的小技巧。

老实说 Purecss 是一个很好的选择，基本上需要的功能都有。而且足够小。不过如果只需要做移动端页面的话， Mobi.css 也是一个不错的选择。

重新造一个轮子的意义：

1. 学习知识，分享知识。我在做的过程中把其他库源码基本上都看了一遍，也查阅了很多资料。相信这个借鉴了很多库的 Mobi.css 可以给一些人也带来帮助，即使不用它而只看它源码。
2. 输出自己的设计观念，希望 mobile 上能够有更好的作品出现（一些站点对 mobile 上的设计非常匮乏）。
3. 获得 star ，使自己的 GitHub Profile 更好看哈哈 https://github.com/xcatliu 欢迎 Follow

iamjs

2016-08-29 18:52:27 +08:00

很不错~~

xcatliu

2016-08-29 19:47:14 +08:00 via iPhone

@maomaomao001 @guyskk @BOYPT col-half 已改为 col-1-2 其他的也改过来了，详见 append

hjse7en

2016-08-29 19:59:27 +08:00

@xcatliu 还是留点边距好点

shisaq

2016-08-29 20:07:12 +08:00

赞赞赞，轮子造得棒！记得更新 readme ，也添加一些兼容性的说明

726332269

2016-08-29 20:11:29 +08:00 via Android

@xcatliu 你的那只猫在手机上看起来很大，让上面的文字都没法看了，不是做的自适应吗？

kn007

2016-08-29 20:15:01 +08:00

非常漂亮

xcatliu

2016-08-29 21:18:37 +08:00

@maomaomao001 @bertonzh @yoa1q7y @newbieo0O
现在没有 Macbook 可供调试，等我找台 Macbook 再修复 radio 和 checkbox 的问题。

xcatliu

2016-08-29 21:18:56 +08:00

@bertonzh Autoprefixer 已加

xcatliu

2016-08-29 21:28:36 +08:00

@kn007 @shisaq 多谢支持！嗯，稍后更新 readme 。兼容性说明等我测试完所有设备再加。

xcatliu

2016-08-29 21:29:12 +08:00

@726332269 应该做的是自适应，请问你是什么设备看的？

726332269

2016-08-29 21:43:53 +08:00 via Android

@xcatliu 小米 5 ， uc 浏览器

xcatliu

2016-08-29 21:44:15 +08:00

@hjse7en 感谢建议！不过 bootstrap v4 和 purecss 都是没有边距的， Skeleton 在手机上样式很糟糕。
我个人也觉得不要边距比好合适。不过 Mobi.css 很容易 build 一份自己的。只需要改一下 src/_variables.scss 里面的参数即可。如果有人需要有边距的可以自己 build 一份。

http://v4-alpha.getbootstrap.com/getting-started/introduction/
http://purecss.io/base/
http://getskeleton.com/

726332269

2016-08-29 21:46:04 +08:00 via Android

@xcatliu 我用 chrome 看起来就正常，大小合适。

wolfan

2016-08-29 21:50:59 +08:00

我的印个力士字典呐。。。
还好代码是一看就明白呀，要不然有字典也学不会，果然这是一个高端社区，但俺这个山里农民果断拉低了你们的下线呐，啊，我还是默默的继续拉低好了，嘻嘻。

xcatliu

2016-08-29 22:17:54 +08:00

@wolfan 哈哈，我的英语也不怎么好，很多 Chinish ，不过外国人应该看得懂就行啦。还没时间写中文文档，等稳定后会写中文文档的。

xcatliu

2016-08-29 22:25:33 +08:00

@726332269 感谢反馈，我已记录到 issue ，将来会修复。

xcatliu

2016-08-29 22:30:02 +08:00

@shisaq 已更新 README ，丰富了很多。

Zhangcongjie

2016-08-29 22:59:21 +08:00

赞！

scys

2016-08-30 00:30:56 +08:00

有个建议，尽量在一个版本内如 1.0.0 -> 1.9.9 之间的变量名不要变化： D
---
一直在用 foundation ，虽然没有看到几个人说这个好不好用。

xcatliu

2016-08-30 00:45:56 +08:00 via iPhone

@scys 感谢建议，现在还是 0.x.x 所以 breaking change 的时候只会升级 minor 版本号。非 breaking change 升级 patch 版本号。

等发布了 1.0.0 以后， breaking change 就会升级 major 版本号了。

这应该是符合 semantic version 的规则的。低于 1.0.0 都是不稳定的。

1.0.0 应该会在一个月内发布。

xcatliu

2016-08-30 00:59:03 +08:00 via iPhone

@scys 现在不建议用在生产环境，欢迎持续关注。如果想用在生产环境，建议等发布了 1.0.0 以后。那时就不会改 api 了。

juleswang

2016-08-30 08:51:47 +08:00

支持下，前面的评论很有道理，不要重复造轮子（在公司造的还不够多么）

zangbob

2016-08-30 09:23:26 +08:00

已 Star ，吃瓜群众表示殷切等待可用于生产环境的版本。

ajan

2016-08-30 13:56:38 +08:00

挺好的

passion336699

2016-08-31 09:27:17 +08:00

能给个 less 的吗 @_@

xcatliu

2016-08-31 09:42:04 +08:00 via iPhone

@passion336699 我个人认为 scss 比 less 优秀，所以会优先支持 scss ，目前版本还不稳定，不打算写一份 less 的版本。等推出 1.0.0 之后会考虑。

xcatliu

2016-09-02 00:04:16 +08:00

@andypinet 谢谢你的建议， v0.4.0 版本开始，去掉了对 `<table>` 和 `<input>` 的 reset ，添加了 `table`, `form`, `btn` 这三个 classes

相关 issue ： https://github.com/xcatliu/mobi.css/issues/14

xcatliu

2016-09-02 00:07:37 +08:00

@arslion logo 的问题应该已经改过来了

xcatliu

2016-09-03 18:09:56 +08:00

@0915240 @726332269 @BOYPT @ChiangDi @Martox @RoshanWu @Zhangcongjie @acdea4effdbb420d @ajan @andypinet @arens @arslion @avenger @bertonzh @guyskk @haiyang416 @hansnow @hanxiV2EX @hjse7en @horizon @iamjs @juleswang @kn007 @maomaomao001 @newbieo0O @panlilu @passion336699 @sammiriam @scys @shellcodecow @shisaq @teriyaki888 @tkpc @wolfan @yoa1q7y @zangbob

抱歉群发打扰大家了。不过 Mobi.css v1.0.0-alpha.1 发布啦，欢迎试用！
https://www.v2ex.com/t/303683