7 天 600 stars, Mobi.css 是如何诞生的

2016-09-05 20:26:23 +08:00
 xcatliu

受邀写一篇 Mobi.css 的诞生历程,请原谅我吸引眼球的标题,我会努力把这篇文章写得有一些干货的。

GitHub Repo | Homepage

提要:

Mobi.css 是一个轻量、灵活的移动端 CSS 框架。发布一周以来,获得了 600+ stars ,登上了 GitHub Trending Top1 ( CSS ),在 Hacker News 上进入了前三。

这篇文章会先介绍一下创造 Mobi.css 的思路,再介绍一下我在推广 Mobi.css 中的心得。

为什么要创造 Mobi.css

当我在设计一个新的 Focus on 移动端用户的网站(比如面向微信用户的网站)的时候,调研了一些现有的 CSS 框架,应用比较广泛的有 Bootstrap, Foundation, Pure.css, Framework7, Skeleton 等。

他们都很优秀,但是都有一些缺点。

于是我决定自己造一个轮子。

造新轮子之前一定要做好调研,否则可能白费了功夫。

开发过程中的心得

善用工具

CSS 框架相比于 JavaScript, React 等简单得多,但是也不能忽视了工具的使用。我选择了以下工具:

磨刀不误砍柴工,善用工具可以大大提高开发效率。

站在巨人的肩膀上

开源社区上的代码都是别人的积累,如果离开了它们, Mobi.css 很难在短时间内完成开发,我借鉴了以下开源项目:

重视写文档

开源项目要受欢迎,文档是非常重要的。README.md 要让大家能在短时间内了解项目的特点。网站要能够尽可能输出自己的理念。

如果可以的话,最好用英文(或者双语)写。否则只能有中国人来关注你的项目了。要知道,外国开发者比中国开发者多很多倍的。

不要担心自己英语不好,只要表达的内容能让外国人看得懂即可。等项目成熟了,自然会有人帮你修改文档。

注意社区的一些规则

如何推广

不要觉得不好意思推广,我们推广不是功利性的求赞求关注(逃。

而是因为没有人关注的项目,是不可能向好的方向发展的。而如果自己不做主动的推广,项目也很难被关注。

推广这部分其实我并不是很擅长,这里只写出一些我自己的心得吧。

在对的时间发对的帖

一般在下班的时间,大家都会拿出手机刷一刷。这时你的贴最容易被曝光。等到人气上去了,晚上睡觉之前大家再刷一波手机,就有更多人看到了。

发帖的时候只需要简要的说重点,引导用户到 GitHub 或你的网站。但是慎用「求 star 」等字眼,功利性太强。

推广渠道

我用了以下推广渠道(按推广效果排序):

聆听意见,及时反馈

自己的想法总归是一个人的,吸取了别人的建议才能让项目更好的发展。 Mobi.css 就有一部分 API 是听取了别人的建议之后修改的。

当然,自己需要有自己的判断。 Mobi.css 的准则很简单:这个设计是不是 focus on mobile 的。

最重要的是,项目要有价值

没有价值的项目即使推广再多,也没有人会关注的,只会招来一顿猛喷。

总结

Mobi.css 在短时间内获得了很多关注,离不开大家的支持,离不开开源社区的帮助。

我知道这只是 Mobi.css 项目的开始,后面有更长的路要走,感兴趣的可以一起来建设。

GitHub Repo | Homepage

Hacker News 上的讨论 | 上一次讨论帖 | 上上次讨论帖

13191 次点击
所在节点    分享创造
61 条回复
xcatliu
2016-09-06 10:27:55 +08:00
@scarlex Mobi 就是 mobile 的简称啦
xcatliu
2016-09-06 10:33:40 +08:00
@herozzm
除了轻以外,亮点还有为移动端做了很多优化,我尝试了一下其他的框架,虽然他们都说是 mobile first ,但是感觉还是有一些小问题,所以我造了个轮子。另外一个是想输出一些设计理念。

至于样式我还是挺喜欢的,这个看个人喜好吧。要定制也很简单,我在 `_custom.scss` 里面写了个例子,把注释去掉就可以看到夜间主题的效果了。
xcatliu
2016-09-06 10:34:12 +08:00
@jiang42
@designer
@igel 感谢支持!
sox
2016-09-06 10:39:19 +08:00
@zuotech weui 不过也是一个轮子而已,还是仅限于微信的轮子 lol
xcatliu
2016-09-06 11:01:45 +08:00
@zuotech @sox 感觉 weui 还是挺不错的,也很多人在用。
ChiangDi
2016-09-06 11:11:17 +08:00
安卓的 UC 浏览器有兼容性问题
xcatliu
2016-09-06 11:12:39 +08:00
@ChiangDi 感谢反馈,请问是什么手机什么版本的安卓?我去看一下
ChiangDi
2016-09-06 11:14:28 +08:00
@xcatliu 小米 4c 安卓的 5.1 ,安卓上 UC 浏览器本来就对 flex 布局支持有限
xcatliu
2016-09-06 11:18:58 +08:00
@ChiangDi 好的,我去看看 UC 浏览器的问题。你用原生浏览器或谷歌浏览器有问题吗?
xcatliu
2016-09-06 11:33:11 +08:00
Lime
2016-09-06 11:35:29 +08:00
楼主总结的不错!
herozzm
2016-09-06 11:46:50 +08:00
@xcatliu 很多用框架的看中美观这块,比如按钮的阴影细节,渐变,圆角什么的
自己可以定义但是就是去用框架节省时间的意义了,建议多用心做几套风格出来
ChiangDi
2016-09-06 12:03:44 +08:00
@xcatliu 原生浏览器没问题
xcatliu
2016-09-06 12:13:04 +08:00
@Lime 感谢支持
xcatliu
2016-09-06 12:14:37 +08:00
@herozzm 在 1.0.0 发布之后会做一些主题。多谢你的建议!
xcatliu
2016-09-06 12:14:48 +08:00
@ChiangDi 感谢测试
zangbob
2016-09-06 12:20:30 +08:00
同 2 楼,虽然英文能看懂,但是没有中文文档真心不够友好。

哪怕你写个 demo.html ,里面中文注释下呢。。
jaywcjlove
2016-09-06 15:08:23 +08:00
这名字起得太污了。
dphdjy
2016-09-06 15:18:42 +08:00
虽然很小,但是没什么亮点,即使是腾讯若干年前的那个小框架,在实用性也比这个高,如果说提供基本元素来开发,不如直接 boot 的自定义啊。
aksoft
2016-09-06 17:01:43 +08:00
我想知道中国人的东西为啥不写中文。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/304129

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX