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

13170 次点击
所在节点    分享创造
61 条回复
fundon
2016-09-05 20:44:57 +08:00
这一波玩的溜!👍
726332269
2016-09-05 20:56:25 +08:00
中文文档赶紧来一波啊,国人写的没中文算什么鬼
xcatliu
2016-09-05 21:10:43 +08:00
@726332269 感谢支持!我等 1.0.0 发布了再写中文文档,这个月之内。
linkgod
2016-09-05 21:27:48 +08:00
很不错,聚焦移动端
sox
2016-09-05 21:32:12 +08:00
建议把 dist 给 gitignore 了 😂
xcatliu
2016-09-05 21:36:24 +08:00
@linkgod 感谢支持
xcatliu
2016-09-05 21:36:34 +08:00
@fundon 感谢支持!
xcatliu
2016-09-05 21:41:09 +08:00
@sox dist ignore 的话对于直接 git clone 的人不是很友好,而且每次发布新版本就不能直接用 git 打包的压缩文件了而得自己上传,不是很方便。然后有的人想直接在 GitHub 上看看 build 之后的代码,所以还是保留 dist 比较好,其他框架基本都保留了。
breeswish
2016-09-05 21:52:19 +08:00
感谢,框架有很多可以学习的地方,不过还是喜欢 foundation :P
foundation 不是拿来直接用的,而是给进一步定制打下了非常好的 foundation
igel
2016-09-05 21:55:37 +08:00
先 MARK
xcatliu
2016-09-05 21:56:18 +08:00
@breeswish 多谢指教,我再去学习下 foundation ~
xcatliu
2016-09-05 22:29:48 +08:00
感觉 V 站的 `<blockquote>` 不是很好看,其他网站的基本都有 `border-left` 比较好看。是否可以改进一下呢 @Livid
scarlex
2016-09-05 22:47:07 +08:00
😂😂😂 我老是看成 mabi.css
herozzm
2016-09-05 22:50:34 +08:00
除了轻,没发现亮点,样式不美观
jiang42
2016-09-06 00:29:09 +08:00
膜拜大神🤓带我飞哇
@xcatliu
designer
2016-09-06 08:21:33 +08:00
支持!
dallaslu
2016-09-06 09:17:14 +08:00
@xcatliu 你可以写自定义 CSS
zuotech
2016-09-06 10:00:18 +08:00
楼主不知道 wechat 团队专门开发了 WEUI 吗?
https://github.com/weui/weui

话说目前看到的没有任何亮点
xcatliu
2016-09-06 10:26:33 +08:00
@zuotech 之前了解过,不过没继续关注了。又看了下,感觉它拥有很丰富的控件,不是我想要的。

其实 Mobi.css 就是我自己在新项目中需要用的轮子,我感觉在做的过程中还挺有收获的,所以分享出来了。它不一定适合所有项目吧
xcatliu
2016-09-06 10:27:24 +08:00
@dallaslu 好,我去找找别人写的 stylish

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

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

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

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

© 2021 V2EX