首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

  •  7
     
  •   xcatliu · 2016-09-05 20:26:23 +08:00 · 10587 次点击
    这是一个创建于 1140 天前的主题,其中的信息可能已经有所发展或是发生改变。

    受邀写一篇 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 等。

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

    • Bootstrap: 太大太笨重了,对于桌面端用户我希望展示与手机端一样的页面,可能再加上一个二维码,将用户导向微信(类似于微信公众号的文章在网页中的样式)
    • Foundation: 没有实践过,看上去也很大,大部分都是我不需要的功能
    • Skeleton: 在移动端有一些 bug ,overflow:auto; 的滑动不平滑,<select> 样式太丑,官网的 <pre><code> 在 iPhone 里根本不 work ,说明他们没有在手机上测试过
    • Framework7: 适合做 WebApp ,而我不太喜欢那种仿原生 App 的设计
    • Pure.css: 很优秀,足够小巧,没什么特别的缺点,如果定制一下应该也可以满足需求。不过我还希望框架层面能够有一些针对移动端的设计

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

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

    开发过程中的心得

    善用工具

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

    • Sass (scss)/Autoprefixer: CSS 预处理器都大同小异, Sass 功能比较全,所以选择了它。移动端也需要兼容不同设备, Autoprefixer 可以自动加上 -webkit- 等前缀
    • Ejs/Marked/Highlight.js: 构建 website 的工具,一开始是手写 HTML ,发现根本 hold 不住。这些工具后期可以用静态网站生成器替换
    • Gulp: 构建工具,串起其他工具
    • Travis CI/GitHub Pages/Coding Pages: 静态页面服务,一开始手动部署网站,后来发现太麻烦了,就用 Travis 自动部署了

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

    站在巨人的肩膀上

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

    • Normalize.css: 大部分 _reset.scss 部分是借鉴它的。没有直接引入它的原因是有少部分它的代码是不需要的
    • Bootstrap v4: 使用最广泛的 CSS 框架,可借鉴的太多了
    • Pure.css/Skeleton: 借鉴了手机上的样式
    • 微信公众号的 desktop 版: 借鉴了在 desktop 上的样式,以及中文字体
    • 以及很多其他框架

    重视写文档

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

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

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

    注意社区的一些规则

    • 标明 License
    • 遵守版本号规则,不要乱做 Breaking changes

    如何推广

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

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

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

    在对的时间发对的帖

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

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

    推广渠道

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

    • Hacker News
    • V2EX
    • 开发者头条
    • SegmentFault
    • Hacpai
    • Startup News
    • 光谷社区
    • Reddit

    聆听意见,及时反馈

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

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

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

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

    总结

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

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

    GitHub Repo | Homepage

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

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

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

    其实 Mobi.css 就是我自己在新项目中需要用的轮子,我感觉在做的过程中还挺有收获的,所以分享出来了。它不一定适合所有项目吧
        20
    xcatliu   2016-09-06 10:27:24 +08:00
    @dallaslu 好,我去找找别人写的 stylish
        21
    xcatliu   2016-09-06 10:27:55 +08:00
    @scarlex Mobi 就是 mobile 的简称啦
        22
    xcatliu   2016-09-06 10:33:40 +08:00
    @herozzm
    除了轻以外,亮点还有为移动端做了很多优化,我尝试了一下其他的框架,虽然他们都说是 mobile first ,但是感觉还是有一些小问题,所以我造了个轮子。另外一个是想输出一些设计理念。

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

    哪怕你写个 demo.html ,里面中文注释下呢。。
        38
    jaywcjlove   2016-09-06 15:08:23 +08:00
    这名字起得太污了。
        39
    dphdjy   2016-09-06 15:18:42 +08:00 via Android   ♥ 1
    虽然很小,但是没什么亮点,即使是腾讯若干年前的那个小框架,在实用性也比这个高,如果说提供基本元素来开发,不如直接 boot 的自定义啊。
        40
    aksoft   2016-09-06 17:01:43 +08:00
    我想知道中国人的东西为啥不写中文。
        41
    xcatliu   2016-09-06 17:01:49 +08:00
    @jaywcjlove 我现在才意识到这名字有多么污!
        42
    gamecreating   2016-09-06 17:02:25 +08:00   ♥ 1
    支持一下
        43
    xcatliu   2016-09-06 17:03:06 +08:00
    @726332269 @zangbob @aksoft

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

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

    bootstrap

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

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

    另外如果你真的需要,你可以给 row 加 style flex-wrap:wrap 可以在一行放不下的时候换行。但是要精确控制在手机上,则比较麻烦,需要手动加 media query
        61
    miao   2016-09-08 08:51:52 +08:00
    @xcatliu 谢谢你. 这样处理,确实麻烦了一些. 那么 Mobi.css 就是专为移动而生, 桌面显示的效果和手机一样. 谢谢你.
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3145 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 28ms · UTC 10:43 · PVG 18:43 · LAX 03:43 · JFK 06:43
    ♥ Do have faith in what you're doing.