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

[xcatliu]

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

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

• GitHub
• Homepage

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

感谢大家的支持，第一次获得 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

发布了新版本

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

发布了新版本

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

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

[Martox]

先赞后看

[haiyang416]

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

[maomaomao001]

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

[teriyaki888]

支持

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

[hanxiV2EX]

支持，已 star

[xcatliu]

@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]

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

[RoshanWu]

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

[xcatliu]

@Troevil 根据 caniuse

caniuse.com/#feat=flexbox

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

[xcatliu]

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

[RoshanWu]

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

[xcatliu]

@RoshanWu 感谢支持！

[guyskk]

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

[hansnow]

已 star 支持

[panlilu]

兹瓷

[0915240]

支持支持

[0915240]

已 star

[BOYPT]

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

[xcatliu]

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

[xcatliu]

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

[BOYPT]

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

[bertonzh]

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

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

[bertonzh]

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

[xcatliu]

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

多谢建议！

[yoa1q7y]

这里感觉还可以调整一下

[xcatliu]

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

多谢建议！

[tkpc]

赞

[shellcodecow]

很赞，收藏

[horizon]

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

[xcatliu]

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

[arslion]

ಠ_ಠ 为什么要这样

[xcatliu]

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

[acdea4effdbb420d]

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

[xcatliu]

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

[sammiriam]

赞一个

[andypinet]

input 不要直接改

[xcatliu]

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

[andypinet]

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

[xcatliu]

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

[newbieo0O]

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

[ChiangDi]

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

[avenger]

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

[arens]

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

[hjse7en]

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

[xcatliu]

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

[xcatliu]

@arens 感謝支持

[xcatliu]

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

[xcatliu]

@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]

很不错~~

[xcatliu]

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

[hjse7en]

@xcatliu 还是留点边距好点

[shisaq]

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

[726332269]

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

[kn007]

非常漂亮

[xcatliu]

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

[xcatliu]

@bertonzh Autoprefixer 已加

[xcatliu]

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

[xcatliu]

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

[726332269]

@xcatliu 小米 5 ， uc 浏览器

[xcatliu]

@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]

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

[wolfan]

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

[xcatliu]

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

[xcatliu]

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

[xcatliu]

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

[Zhangcongjie]

赞！

[scys]

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

[xcatliu]

@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]

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

[juleswang]

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

[zangbob]

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

[ajan]

挺好的

[passion336699]

能给个 less 的吗 @_@

[xcatliu]

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

[xcatliu]

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

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

[xcatliu]

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

[xcatliu]

@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