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

Mobi.css v3 发布了,一个轻量、可拓展、移动端优先的 CSS 框架

  •  
  •   xcatliu ·
    xcatliu · 2017-09-04 02:00:56 +08:00 · 5490 次点击
    这是一个创建于 2398 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简单介绍

    • 轻量级:压缩 gzip 后只有 2.6 kb
    • 可拓展:可以引入 plugin 来拓展 Mobi.css ,并且每个 plugin 都可以独立于框架使用
    • 移动端优先:为移动端设计,在桌面端也表现良好

    前贴: https://www.v2ex.com/t/302356

    Q&A

    Mobi.css 有哪些其他框架没有的特性呢?

    1. flexbox 很好用 http://getmobicss.com/docs/flexbox.html
    2. 每个 plugin 可以独立使用,即使你不想用 Mobi.css ,也可以只用其中一个 plugin
    3. 认为只使用 margin-top 分隔块比较好,所以几乎所有 margin-bottom 都为 0

    为什么从 v1 直接跳到 v3 了?

    因为开发了 v2 一段时间之后,遇到一些问题,过了一段时间才找到解决方案,此时以及离 v2 beta 版相差有点远了,所以就直接跳到了 v3

    有 qq 群或微信群讨论吗?

    有,qq 群 378244667 微信请加我 xcatliu,注明姓名和来自 v2ex,我拉你进群


    其他问题可以在下面留言 😆

    44 条回复    2017-09-27 12:54:10 +08:00
    ericls
        1
    ericls  
       2017-09-04 02:57:27 +08:00   ❤️ 1
    非常好!
    vacker
        2
    vacker  
       2017-09-04 04:15:53 +08:00 via Android   ❤️ 1
    支持下
    xcatliu
        3
    xcatliu  
    OP
       2017-09-04 08:07:11 +08:00 via iPhone
    @ericls 😁
    xcatliu
        4
    xcatliu  
    OP
       2017-09-04 08:07:25 +08:00 via iPhone
    @vacker 感谢支持!
    hteen
        5
    hteen  
       2017-09-04 08:14:47 +08:00 via iPhone   ❤️ 1
    一直等 2 的我有点懵逼了😅
    xcatliu
        6
    xcatliu  
    OP
       2017-09-04 08:19:34 +08:00 via iPhone
    @hteen 其实和 2 区别不大哈,只是用了 lerna 管理多模块,构建改成了 postcss 加 nextcss,使用了 rem 做长度单位
    xcatliu
        7
    xcatliu  
    OP
       2017-09-04 08:24:36 +08:00 via iPhone
    @hteen 没有用 lerna 的时候,升级版本号真是改到我手软 😂
    kitty7030
        8
    kitty7030  
       2017-09-04 08:37:40 +08:00   ❤️ 1
    真小
    akaayy
        9
    akaayy  
       2017-09-04 09:10:15 +08:00 via Android   ❤️ 1
    真短
    jjplay
        10
    jjplay  
       2017-09-04 10:09:44 +08:00   ❤️ 1
    真快
    designer
        11
    designer  
       2017-09-04 10:10:02 +08:00 via iPhone   ❤️ 1
    支持!
    ChiangDi
        12
    ChiangDi  
       2017-09-04 10:15:52 +08:00   ❤️ 1
    大佬,Follow the rule of margin-top-only 是什么意思呢
    Hilong
        13
    Hilong  
       2017-09-04 10:30:55 +08:00 via Android   ❤️ 1
    看到你这个帖子才发现已经过去一年了,去年第一版出来我就用上了,引入进来就为了用 flexbox,后面那个项目做完了。就没再关注了,没想到作者还在更新,支持一下,后面在自己的个人项目里再引入进来看看
    chuanqirenwu
        14
    chuanqirenwu  
       2017-09-04 10:38:58 +08:00   ❤️ 1
    xcatliu
        15
    xcatliu  
    OP
       2017-09-04 12:07:44 +08:00
    @ChiangDi 意思就是遵循了只是用 margin-top 的设定
    谢谢提醒,还来还是我表达的不清楚,我想象怎么改
    xcatliu
        16
    xcatliu  
    OP
       2017-09-04 12:09:06 +08:00
    windfarer
        17
    windfarer  
       2017-09-04 12:45:58 +08:00 via Android   ❤️ 1
    资磁一下
    joyqi
        18
    joyqi  
       2017-09-04 12:47:17 +08:00   ❤️ 1
    搞 mobi。。。
    xcatliu
        19
    xcatliu  
    OP
       2017-09-04 14:21:15 +08:00
    @Hilong 感谢支持呀,现在如果只想用 flexbox,可以只引入这个 plugin 就行啦。
    https://github.com/mobi-css/mobi.css/tree/master/packages/mobi-plugin-flexbox/dist
    xcatliu
        20
    xcatliu  
    OP
       2017-09-04 14:21:54 +08:00
    @ChiangDi 改成了
    Only use margin-top to set gaps between block elements
    xcatliu
        21
    xcatliu  
    OP
       2017-09-04 14:26:12 +08:00
    @joyqi 千万不要用拼音去读。。
    xcatliu
        22
    xcatliu  
    OP
       2017-09-04 14:26:55 +08:00
    ChiangDi
        23
    ChiangDi  
       2017-09-04 16:07:08 +08:00   ❤️ 1
    @xcatliu 嗯...我问得就是为什么只用 margin top...
    chuanqirenwu
        24
    chuanqirenwu  
       2017-09-04 17:22:23 +08:00 via iPad   ❤️ 1
    @xcatliu 说错了,是这个页面里的文档里的链接失效了。
    xcatliu
        25
    xcatliu  
    OP
       2017-09-04 17:43:01 +08:00
    @ChiangDi 感谢!已修复
    xcatliu
        26
    xcatliu  
    OP
       2017-09-04 17:45:03 +08:00
    @ChiangDi 因为我觉得应该由每个元素自己决定它应该距离上面的元素多远
    This technique allows each section to determine the spacing it needs from the element above it.
    chuanqirenwu
        27
    chuanqirenwu  
       2017-09-04 18:32:34 +08:00   ❤️ 1
    @xcatliu 关于 margin top 的理念,bootstap 则认为 margin top 会导致一些布局问题,因此 bootsrtap 中所有元素都只设置 margin bottom,top 都被重置为 0。

    我在实际使用中也发现,margin top 有时会不方便,尤其是在已经设置了 padding 的容器里,必须再把第一个元素的 margin top 设为 0。
    xcatliu
        28
    xcatliu  
    OP
       2017-09-04 19:19:20 +08:00
    @chuanqirenwu 当时我开发的时候看到过 Bootstrap 对 margin top or bottom 的讨论:
    https://github.com/twbs/bootstrap/issues/18958
    我更认同 margin-top 的理念。

    1. h1 ~ h6 与上个段落之间应该有一个较大的空隙,并且 h2 的空隙应该比 h3 大。如果只设置 margin-bottom 无法实现。在那个 issue 中他也没解释清楚怎么解决这个问题。看 bootstrap 的官网,他是用另外的 css 实现了 h1, h2, h3 的不同 margin-top https://getbootstrap.com/docs/4.0/getting-started/introduction/
    2. Bootstrap 认为 margin top 的布局问题是指,如果在一个 box 中使用 h2,并且我们选择只设置 margin-top,那么这时就得写额外的代码去掉 margin-top 了。但其实这个问题很好解决,在框架层面的 box 里设置第一个元素的 margin-top 为 0 即可。
    3. 也可以使用 util 覆盖 margin-top 和 margin-bottom,很方便
    chuanqirenwu
        29
    chuanqirenwu  
       2017-09-04 21:35:46 +08:00
    @xcatliu 嗯嗯,看来也很有道理。感谢 mobi.css
    ctt
        30
    ctt  
       2017-09-04 22:17:49 +08:00
    收藏!
    ctt
        31
    ctt  
       2017-09-04 22:36:03 +08:00   ❤️ 1
    真心不错,简单易用,不会琢磨 css 的终于能把自己的简陋网页改进下了!感谢!
    xcatliu
        32
    xcatliu  
    OP
       2017-09-04 22:52:32 +08:00
    @ctt 感谢支持~
    flowfire
        33
    flowfire  
       2017-09-05 00:41:23 +08:00 via Android   ❤️ 1
    logo 有点丑…………那个 m 中间尖尖的怪怪的
    xcatliu
        34
    xcatliu  
    OP
       2017-09-05 09:57:13 +08:00 via iPhone
    @flowfire 设计能力堪忧 😂直接模仿的 css3 的 logo
    givebest
        35
    givebest  
       2017-09-05 10:06:12 +08:00
    dyxang
        36
    dyxang  
       2017-09-07 22:47:03 +08:00 via Android   ❤️ 1
    虽然我的关注点不对,但是我还是要问一句,为什么没有中文?
    学生党伤不起啊,英语不好
    xcatliu
        37
    xcatliu  
    OP
       2017-09-07 23:00:42 +08:00 via iPhone
    @dyxang 因为还没有时间写中文的文档,后面会有的😁
    lieqishi
        38
    lieqishi  
       2017-09-08 10:07:16 +08:00   ❤️ 1
    刚看了,但是还不太明白~主要适合什么场景呢?有什么特别明显的特点吗?
    xcatliu
        39
    xcatliu  
    OP
       2017-09-08 10:36:15 +08:00
    适合什么场景:移动端,重内容。
    有什么明显的特点:
    1. flexbox 很好用 http://getmobicss.com/docs/flexbox.html
    2. 每个 plugin 可以独立使用,即使你不想用 Mobi.css ,也可以只用其中一个 plugin
    3. 认为只使用 margin-top 分隔块比较好,所以几乎所有 margin-bottom 都为 0
    xcatliu
        40
    xcatliu  
    OP
       2017-09-08 10:37:02 +08:00
    @lieqishi 适合什么场景:移动端,重内容。
    有什么明显的特点:
    1. flexbox 很好用
    2. 每个 plugin 可以独立使用,即使你不想用 Mobi.css ,也可以只用其中一个 plugin
    3. 认为只使用 margin-top 分隔块比较好,所以几乎所有 margin-bottom 都为 0
    hasbug
        41
    hasbug  
       2017-09-26 08:54:43 +08:00
    国人的吗? 怎么都纯英文文档。。。
    xcatliu
        42
    xcatliu  
    OP
       2017-09-26 12:46:11 +08:00
    @hasbug 还没空写中文呀,以后有空了会补上的
    fzmsss
        43
    fzmsss  
       2017-09-27 11:06:23 +08:00
    猫 想知道 pc 浏览器的兼容性 主要 ie10 以上
    xcatliu
        44
    xcatliu  
    OP
       2017-09-27 12:54:10 +08:00
    @fzmsss 新版本( 3.1.1 )已兼容 ie10 及以上
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2842 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 13:17 · PVG 21:17 · LAX 06:17 · JFK 09:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.