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 上的讨论 | 上一次讨论帖 | 上上次讨论帖

13213 次点击
所在节点    分享创造
61 条回复
xcatliu
2016-09-06 17:01:49 +08:00
@jaywcjlove 我现在才意识到这名字有多么污!
gamecreating
2016-09-06 17:02:25 +08:00
支持一下
xcatliu
2016-09-06 17:03:06 +08:00
@726332269 @zangbob @aksoft

因为感觉现在 API 可能还会有改动,没有精力维护两份文档。
等 1.0.0 发布(应该在 9 月份之内)之后我会第一时间写出中文文档。

感谢支持!
xcatliu
2016-09-06 17:03:53 +08:00
xcatliu
2016-09-06 17:05:13 +08:00
@dphdjy 腾讯若千年前的小框架是指哪个? boot 是说的 bootstrap 吗?
xcatliu
2016-09-06 17:05:25 +08:00
@gamecreating 感谢支持!
aksoft
2016-09-06 17:11:05 +08:00
@xcatliu 你的态度决定你的项目能走多远。希望越来越好。
aksoft
2016-09-06 17:11:39 +08:00
对于某些说凭啥凭啥要出中文?我只能说去你女马了隔壁。
726332269
2016-09-06 18:23:28 +08:00
@Livid #48 人身攻击
openroc
2016-09-06 18:57:18 +08:00
gogo up !
dphdjy
2016-09-06 21:37:45 +08:00
@xcatliu 忘了。。。
http://data.300hero.net 这个首页轮播就是那个里面的

bootstrap

只是觉得这个方向和大型框架没有可比性,和小组件又不具有表现力,所以单出体积小没有意义,开发者不可能直接导入,自然会对其修改,这样各种自定义组件一出现,体积可能远比其他框架大。
dphdjy
2016-09-06 21:38:17 +08:00
@xcatliu 不过那个框架就手 Q 用的
xcatliu
2016-09-06 22:05:16 +08:00
@dphdjy 这轮播图,一言不合就老司机开车了!
xcatliu
2016-09-07 10:57:39 +08:00
@dphdjy 我考虑过,有做 plugin system 的打算,不过想法还不是很成熟。
scott15975
2016-09-07 11:22:57 +08:00
赞,支持一下
bertonzh
2016-09-07 13:45:46 +08:00
学习了
miao
2016-09-08 08:29:01 +08:00
楼主. 不支持自适应吧? 只针对移动浏览器的?
xcatliu
2016-09-08 08:30:34 +08:00
@miao 电脑上会显示手机上的效果好。你可以看官网的介绍
miao
2016-09-08 08:38:26 +08:00
@xcatliu 明白. 本来我想用 Mobi.css 做一个自适应网站.
发现一个问题,
<div class="col-1-4"> 在电脑和手机上都显示 4 栏,
而不能自动在电脑显示 4 栏, 手机显示 1 栏, 别的 css 框架的办法是 <div class="col-1-4 col-mb-1-2 col-tb-1-3"> 这样就能自动在不同浏览器 自动识别 显示几栏
xcatliu
2016-09-08 08:49:08 +08:00
@miao 以前也有人问这个问题 https://github.com/xcatliu/mobi.css/issues/18

简单来说,我认为使用 Mobi.css 的话,应该只设计手机上的样式,电脑上保持和手机一样就可以了,你应该关注手机用户,不要花时间去设计两套,测试两套。如果你想电脑是 1-4 手机是一整行,可能你需要重新设计了。

另外如果你真的需要,你可以给 row 加 style flex-wrap:wrap 可以在一行放不下的时候换行。但是要精确控制在手机上,则比较麻烦,需要手动加 media query

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

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

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

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

© 2021 V2EX