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

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

  •  
  •   xcatliu · 20 天前 · 2218 次点击

    简单介绍

    • 轻量级:压缩 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,我拉你进群


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

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

    我在实际使用中也发现,margin top 有时会不方便,尤其是在已经设置了 padding 的容器里,必须再把第一个元素的 margin top 设为 0。
        28
    xcatliu   19 天前
    @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,很方便
        29
    chuanqirenwu   19 天前
    @xcatliu 嗯嗯,看来也很有道理。感谢 mobi.css
        30
    ctt   19 天前
    收藏!
        31
    ctt   19 天前   ♥ 1
    真心不错,简单易用,不会琢磨 css 的终于能把自己的简陋网页改进下了!感谢!
        32
    xcatliu   19 天前
    @ctt 感谢支持~
        33
    flowfire   19 天前 via Android   ♥ 1
    logo 有点丑…………那个 m 中间尖尖的怪怪的
        34
    xcatliu   19 天前 via iPhone
    @flowfire 设计能力堪忧 😂直接模仿的 css3 的 logo
        35
    givebest   19 天前
        36
    dyxang   16 天前 via Android   ♥ 1
    虽然我的关注点不对,但是我还是要问一句,为什么没有中文?
    学生党伤不起啊,英语不好
        37
    xcatliu   16 天前 via iPhone
    @dyxang 因为还没有时间写中文的文档,后面会有的😁
        38
    lieqishi   16 天前   ♥ 1
    刚看了,但是还不太明白~主要适合什么场景呢?有什么特别明显的特点吗?
        39
    xcatliu   16 天前
    适合什么场景:移动端,重内容。
    有什么明显的特点:
    1. flexbox 很好用 http://getmobicss.com/docs/flexbox.html
    2. 每个 plugin 可以独立使用,即使你不想用 Mobi.css ,也可以只用其中一个 plugin
    3. 认为只使用 margin-top 分隔块比较好,所以几乎所有 margin-bottom 都为 0
        40
    xcatliu   16 天前
    @lieqishi 适合什么场景:移动端,重内容。
    有什么明显的特点:
    1. flexbox 很好用
    2. 每个 plugin 可以独立使用,即使你不想用 Mobi.css ,也可以只用其中一个 plugin
    3. 认为只使用 margin-top 分隔块比较好,所以几乎所有 margin-bottom 都为 0
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1593 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 54ms · UTC 08:32 · PVG 16:32 · LAX 01:32 · JFK 04:32
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1