V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xcatliu
V2EX  ›  程序员

「Mobi.css」轻量,灵活的移动端 css library, built with love

  •  
  •   xcatliu ·
    xcatliu · 2016-08-29 01:32:42 +08:00 · 9907 次点击
    这是一个创建于 3009 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近做了一个 css library ,颇废了一番功夫。

    这里先把它分享给大家,欢迎 star ,欢迎试用!

    PS :将来 Homepage 会转到 http://getmobicss.com/ ,目前这个域名我已经买了,但是说需要 60 天才能转移。

    简单介绍

    Mobi.css 是一个轻量,灵活的移动端 css library 。特点如下:

    • 只有 2.8kb after gzip ,比 Skeleton, Pure.css, Bootstrap v4 等所有 css 库都小
    • 大量使用 Flexbox ,非常灵活, Homepage 基本上没有写额外的 css ,只有不到 10 行的 inline-style
    • Focus on mobile ,在 desktop 端相当于展示的还是 mobile 的页面,不过可以在左侧或右侧加上侧边栏

    更多介绍请看 Homepage

    最后奉上 Mobi.css 的 Logo

    Mobi.css Logo

    第 1 条附言  ·  2016-08-29 18:41:53 +08:00

    感谢大家的支持,第一次获得 GitHub Trending CSS 分类的 Top 1

    GitHub Trending CSS Top 1

    根据反馈做了一些更新:

    Mobi.css v0.2.0 | GitHub | Homepage

    Breaking Changes

    • Change col-half, col-third, col-quarter to col-1-2, col-1-3, col-1-4
    • Change section, paragraph, clear-margin-top to mt-30, mt-15, mt-0

    New Features

    • Add autoprefixer for compatiblity

    Other Changes

    • Update font-size of pre from 1.4rem to 1.5rem
    • Small changes to alerts colors
    • Small changes to the colors of disabled buttons
    第 2 条附言  ·  2016-08-30 23:13:12 +08:00

    发布了新版本

    Mobi.css v0.3.1 | GitHub | Homepage

    新的域名已经可以访问了: http://getmobicss.com ,老域名会 301 跳转

    更新日志

    Breaking Changes

    • Remove alerts (#9)
    • Remove top middle bottom left center right (#10)

    New Features

    • A new class label

    Other Changes

    • Small changes to radio and checkbox
    • Remove background of hovered links
    第 3 条附言  ·  2016-09-01 23:59:48 +08:00

    发布了新版本

    Mobi.css v0.4.1 | GitHub | Homepage

    更新日志(v0.4.1 ~ v0.3.1)

    Breaking Changes

    • Remove col-custom, now we can use col and max-width to achieve custom column (#11)
    • Rewrite _reset.scss, so that <table> and <input>s in <form> will not be reset, we need to add class="table" to <table> and class="form" to <form>. This will let Mobi.css be more friendly to third party libraries (#14)

    New Features

    • Add a new class btn, new we can make an <a> to a button by adding class="btn"
    • Add _custom.scss so that people can easily generate their own Mobi.css
    • Add some typography styles such as <mark>, <sup>, etc

    Other Changes

    • Remove pre { margin-left: "-15px", margin-right: "-15px" } when screen width larger than container, so that pre will not look odd
    • Use opacity to achieve [disabled]
    • Update <h4>, <h5>, <h6> font-size

    Bugfixes

    • Fix a container bug, container's width is not the same when container-side shows
    第 4 条附言  ·  2016-09-03 18:10:29 +08:00
    Mobi.css v1.0.0-alpha.1 发布啦,欢迎试用!
    https://www.v2ex.com/t/303683
    77 条回复    2016-09-03 18:09:56 +08:00
    Martox
        1
    Martox  
       2016-08-29 01:42:55 +08:00 via Android   ❤️ 1
    先赞后看
    haiyang416
        2
    haiyang416  
       2016-08-29 02:05:47 +08:00 via Android   ❤️ 1
    大致看了下,还不错,支持。
    maomaomao001
        3
    maomaomao001  
       2016-08-29 02:21:56 +08:00 via Android   ❤️ 1
    建议
    1: 做好 select 和 checkbox 的样式
    2: 布局里的 1/2 啊,四分之之类的请用数字代替(50,25)
    或者 1-2,1-4 这样的
    teriyaki888
        4
    teriyaki888  
       2016-08-29 04:55:34 +08:00   ❤️ 1
    支持

    真心不喜欢那些大坨 js 框架
    hanxiV2EX
        5
    hanxiV2EX  
       2016-08-29 08:05:18 +08:00 via iPhone   ❤️ 1
    支持,已 star
    xcatliu
        6
    xcatliu  
    OP
       2016-08-29 08:37:16 +08:00 via iPhone
    @maomaomao001 感谢你的建议!

    第一条建议能描述具体一点吗?我是故意保留了 checkbox 和 radio 的原始样子,觉得手机中的样式挺好的。你的意思是要修改他们的样式吗?还是说在一些手机上有 bug ?

    第二条建议,我思考了一下,觉得确实不是很方便, quarter 不是很好拼。决定下个版本中改为 col-1-2 col-1-3 col-1-4

    另外 section paragraph clear-margin-top 也想改成更好记的 mt-30 mt-15 mt-0

    我记录在 issues 里面了,今天有时间的时候再改
    Troevil
        7
    Troevil  
       2016-08-29 08:39:23 +08:00
    问题来了 大量使用 Flexbox , 兼容性怎么保证呢
    RoshanWu
        8
    RoshanWu  
       2016-08-29 08:45:02 +08:00
    @Troevil 确实,已被 Android 4.3 以下的折腾死。。。
    xcatliu
        9
    xcatliu  
    OP
       2016-08-29 08:45:46 +08:00 via iPhone
    @Troevil 根据 caniuse

    caniuse.com/#feat=flexbox

    绝大部分手机浏览器是支持 flexbox 的,相信已经基本上可以安全使用了。
    xcatliu
        10
    xcatliu  
    OP
       2016-08-29 08:48:01 +08:00 via iPhone
    @Troevil @RoshanWu Android 4.3 以下确实还有问题。。。只能等它绝迹了
    RoshanWu
        11
    RoshanWu  
       2016-08-29 08:52:52 +08:00   ❤️ 1
    @xcatliu 呵呵,不管怎么样,还是送上 star 表示兹瓷
    xcatliu
        12
    xcatliu  
    OP
       2016-08-29 08:54:49 +08:00 via iPhone
    @RoshanWu 感谢支持!
    guyskk
        13
    guyskk  
       2016-08-29 08:59:12 +08:00 via Android   ❤️ 1
    @xcatliu col-6 col-4 col-3 不是更好吗,分母固定 12
    hansnow
        14
    hansnow  
       2016-08-29 09:19:42 +08:00
    已 star 支持
    panlilu
        15
    panlilu  
       2016-08-29 09:23:42 +08:00 via iPhone
    兹瓷
    0915240
        16
    0915240  
       2016-08-29 09:36:35 +08:00
    支持支持
    0915240
        17
    0915240  
       2016-08-29 09:36:51 +08:00
    已 star
    BOYPT
        18
    BOYPT  
       2016-08-29 09:41:11 +08:00   ❤️ 1
    嗯…… flexbox 的 grid ……感觉像轻量的 boostrap 4 ……不过觉得固定比例分配还是得要有……
    xcatliu
        19
    xcatliu  
    OP
       2016-08-29 09:45:11 +08:00
    @guyskk 谢谢建议。不过我觉得移动端不需要 12 格的 grid ,所以没有用 12 格的概念
    xcatliu
        20
    xcatliu  
    OP
       2016-08-29 09:46:36 +08:00
    @BOYPT 谢谢建议。固定比例分配是什么意思?现在应该是固定比例的分配
    BOYPT
        21
    BOYPT  
       2016-08-29 09:49:16 +08:00
    @xcatliu 噢 我看漏了,说的就是 col-half, col-third and col-quarter ,已经有了。应该比较足够用了, nice job
    bertonzh
        22
    bertonzh  
       2016-08-29 09:55:28 +08:00   ❤️ 1
    4.3 下 flex 是老语法,需要用 autoprefixer 做后处理,看了下你的 dist 文件,没有 `-webkit-flex`,没有 `-webkit-box`,在低端版本下肯定惨不忍睹了。

    而且即使是使用了 autoprefixer , flex 在 4.3 下和标准的浏览器有些地方还是有区别,需要特殊处理。
    bertonzh
        23
    bertonzh  
       2016-08-29 09:58:11 +08:00
    checkbox 和 radio 最好处理下,不同系统的差异还是比较大的。而且自定义起来也没啥兼容性问题。
    xcatliu
        24
    xcatliu  
    OP
       2016-08-29 10:04:57 +08:00 via iPhone
    @bertonzh Autoprefixer 稍后加上, checkbox 和 radio 我再去调研一下各平台的样式。

    多谢建议!
    yoa1q7y
        25
    yoa1q7y  
       2016-08-29 10:14:01 +08:00   ❤️ 1


    这里感觉还可以调整一下
    xcatliu
        26
    xcatliu  
    OP
       2016-08-29 10:18:54 +08:00 via iPhone
    @yoa1q7y 嗯这个是系统的 radio 样式,我稍后做一些调整吧

    多谢建议!
    tkpc
        27
    tkpc  
       2016-08-29 10:21:50 +08:00
    shellcodecow
        28
    shellcodecow  
       2016-08-29 10:34:02 +08:00
    很赞,收藏
    horizon
        29
    horizon  
       2016-08-29 10:39:06 +08:00
    楼主有时间能不能分享一下要写这种的 css library 的设计思路呢。
    xcatliu
        30
    xcatliu  
    OP
       2016-08-29 10:45:35 +08:00
    @horizon 嗯,等当前版本基本稳定之后写个分享。感谢支持!
    arslion
        31
    arslion  
       2016-08-29 11:11:30 +08:00   ❤️ 1


    ಠ_ಠ 为什么要这样
    xcatliu
        32
    xcatliu  
    OP
       2016-08-29 11:15:01 +08:00 via iPhone
    @arslion 太细心了。。。我都没注意到,稍后改过来。多谢!
    acdea4effdbb420d
        33
    acdea4effdbb420d  
       2016-08-29 11:17:55 +08:00
    看起来不错,希望能长期坚持
    xcatliu
        34
    xcatliu  
    OP
       2016-08-29 11:24:13 +08:00 via iPhone
    @acdea4effdbb420d 谢谢支持,后续打算先做个 hexo 主题
    sammiriam
        35
    sammiriam  
       2016-08-29 11:35:39 +08:00
    赞一个
    andypinet
        36
    andypinet  
       2016-08-29 11:38:39 +08:00   ❤️ 1
    input 不要直接改
    xcatliu
        37
    xcatliu  
    OP
       2016-08-29 12:13:06 +08:00
    @andypinet 谢谢关注。请问可以描述具体一点吗?没有理解 input 不要直接改是什么意思
    andypinet
        38
    andypinet  
       2016-08-29 13:11:39 +08:00   ❤️ 1
    @xcatliu bootstrap2 直接对 input 添加样式导致问题 bootstrap3 统一成 form-control 类
    xcatliu
        39
    xcatliu  
    OP
       2016-08-29 13:13:48 +08:00 via iPhone
    @andypinet 懂了,回头我看看相关的资料,多谢建议!
    newbieo0O
        40
    newbieo0O  
       2016-08-29 14:22:01 +08:00
    单选按钮和文字没对齐啊,太挤了。 Mac Safari
    ChiangDi
        41
    ChiangDi  
       2016-08-29 14:33:26 +08:00
    现在一般要求兼容到安卓 4.0 以上
    avenger
        42
    avenger  
       2016-08-29 14:37:12 +08:00
    目前在用 PureCss ,看楼主的描述,所以这个是专门为 mobile 设计的了?
    除了文件更小以外,能说说其它优势吗?重新造一个轮子的意义何在?
    arens
        43
    arens  
       2016-08-29 15:04:43 +08:00   ❤️ 1
    已 Star ,支持纯 CSS 框架,希望能继续维护
    hjse7en
        44
    hjse7en  
       2016-08-29 16:09:05 +08:00
    移动端,代码块宽度占满屏幕,看着难受
    xcatliu
        45
    xcatliu  
    OP
       2016-08-29 16:28:28 +08:00
    @newbieo0O 感謝測試,稍後修正一下。
    xcatliu
        46
    xcatliu  
    OP
       2016-08-29 16:31:25 +08:00
    @arens 感謝支持
    xcatliu
        47
    xcatliu  
    OP
       2016-08-29 16:45:23 +08:00
    @hjse7en 主要是考慮到移動端屏幕太小了,看代碼不方便,能大一點區域就大一點
    xcatliu
        48
    xcatliu  
    OP
       2016-08-29 18:13:35 +08:00
    @avenger 感谢关注, Purecss 确实是一个很好的 css library ,我也参考了一些它的代码。下面回答一下你的问题。

    Mobi.css 是专门为 mobile 设计的。针对 desktop 只保留了一个 sidebar 用于放二维码等不需要展示在 mobile 的内容。

    其他优势:

    1. 2.8kb vs 4.6kb 其实并不算优势, Mobi.css 后面可能会更大一些。但是应该会保持在 4kb 以内。所以并不是强调它是最小的吧,只是借此说明它重视移动端的小体积。
    2. Mobi.css 重度依赖于 flexbox ,在很多场合它比传统的 css 更适合 grid ,也更加灵活。相信未来拥抱 flexbox 是一个趋势。
    3. 提供一些针对移动端的样式,比如 scrollable ,将来会添加一些常用的。
    4. 提供一些移动端开发的小技巧。

    老实说 Purecss 是一个很好的选择,基本上需要的功能都有。而且足够小。不过如果只需要做移动端页面的话, Mobi.css 也是一个不错的选择。

    重新造一个轮子的意义:

    1. 学习知识,分享知识。我在做的过程中把其他库源码基本上都看了一遍,也查阅了很多资料。相信这个借鉴了很多库的 Mobi.css 可以给一些人也带来帮助,即使不用它而只看它源码。
    2. 输出自己的设计观念,希望 mobile 上能够有更好的作品出现(一些站点对 mobile 上的设计非常匮乏)。
    3. 获得 star ,使自己的 GitHub Profile 更好看哈哈 https://github.com/xcatliu 欢迎 Follow
    iamjs
        49
    iamjs  
       2016-08-29 18:52:27 +08:00
    很不错~~
    xcatliu
        50
    xcatliu  
    OP
       2016-08-29 19:47:14 +08:00 via iPhone
    @maomaomao001 @guyskk @BOYPT col-half 已改为 col-1-2 其他的也改过来了,详见 append
    hjse7en
        51
    hjse7en  
       2016-08-29 19:59:27 +08:00
    @xcatliu 还是留点边距好点
    shisaq
        52
    shisaq  
       2016-08-29 20:07:12 +08:00
    赞赞赞,轮子造得棒!记得更新 readme ,也添加一些兼容性的说明
    726332269
        53
    726332269  
       2016-08-29 20:11:29 +08:00 via Android
    @xcatliu 你的那只猫在手机上看起来很大,让上面的文字都没法看了,不是做的自适应吗?
    kn007
        54
    kn007  
       2016-08-29 20:15:01 +08:00
    非常漂亮
    xcatliu
        55
    xcatliu  
    OP
       2016-08-29 21:18:37 +08:00
    @maomaomao001 @bertonzh @yoa1q7y @newbieo0O
    现在没有 Macbook 可供调试,等我找台 Macbook 再修复 radio 和 checkbox 的问题。
    xcatliu
        56
    xcatliu  
    OP
       2016-08-29 21:18:56 +08:00
    @bertonzh Autoprefixer 已加
    xcatliu
        57
    xcatliu  
    OP
       2016-08-29 21:28:36 +08:00
    @kn007 @shisaq 多谢支持!嗯,稍后更新 readme 。兼容性说明等我测试完所有设备再加。
    xcatliu
        58
    xcatliu  
    OP
       2016-08-29 21:29:12 +08:00
    @726332269 应该做的是自适应,请问你是什么设备看的?
    726332269
        59
    726332269  
       2016-08-29 21:43:53 +08:00 via Android
    @xcatliu 小米 5 , uc 浏览器
    xcatliu
        60
    xcatliu  
    OP
       2016-08-29 21:44:15 +08:00
    @hjse7en 感谢建议!不过 bootstrap v4 和 purecss 都是没有边距的, Skeleton 在手机上样式很糟糕。
    我个人也觉得不要边距比好合适。不过 Mobi.css 很容易 build 一份自己的。只需要改一下 src/_variables.scss 里面的参数即可。如果有人需要有边距的可以自己 build 一份。

    http://v4-alpha.getbootstrap.com/getting-started/introduction/
    http://purecss.io/base/
    http://getskeleton.com/
    726332269
        61
    726332269  
       2016-08-29 21:46:04 +08:00 via Android   ❤️ 1
    @xcatliu 我用 chrome 看起来就正常,大小合适。
    wolfan
        62
    wolfan  
       2016-08-29 21:50:59 +08:00
    我的印个力士字典呐。。。
    还好代码是一看就明白呀,要不然有字典也学不会,果然这是一个高端社区,但俺这个山里农民果断拉低了你们的下线呐,啊,我还是默默的继续拉低好了,嘻嘻。
    xcatliu
        63
    xcatliu  
    OP
       2016-08-29 22:17:54 +08:00
    @wolfan 哈哈,我的英语也不怎么好,很多 Chinish , 不过外国人应该看得懂就行啦。还没时间写中文文档,等稳定后会写中文文档的。
    xcatliu
        64
    xcatliu  
    OP
       2016-08-29 22:25:33 +08:00
    @726332269 感谢反馈,我已记录到 issue ,将来会修复。
    xcatliu
        65
    xcatliu  
    OP
       2016-08-29 22:30:02 +08:00
    @shisaq 已更新 README ,丰富了很多。
    Zhangcongjie
        66
    Zhangcongjie  
       2016-08-29 22:59:21 +08:00
    赞!
    scys
        67
    scys  
       2016-08-30 00:30:56 +08:00
    有个建议,尽量在一个版本内如 1.0.0 -> 1.9.9 之间的变量名不要变化: D
    ---
    一直在用 foundation ,虽然没有看到几个人说这个好不好用。
    xcatliu
        68
    xcatliu  
    OP
       2016-08-30 00:45:56 +08:00 via iPhone
    @scys 感谢建议,现在还是 0.x.x 所以 breaking change 的时候只会升级 minor 版本号。非 breaking change 升级 patch 版本号。

    等发布了 1.0.0 以后, breaking change 就会升级 major 版本号了。

    这应该是符合 semantic version 的规则的。低于 1.0.0 都是不稳定的。

    1.0.0 应该会在一个月内发布。
    xcatliu
        69
    xcatliu  
    OP
       2016-08-30 00:59:03 +08:00 via iPhone
    @scys 现在不建议用在生产环境,欢迎持续关注。如果想用在生产环境,建议等发布了 1.0.0 以后。那时就不会改 api 了。
    juleswang
        70
    juleswang  
       2016-08-30 08:51:47 +08:00
    支持下, 前面的评论很有道理,不要重复造轮子(在公司造的还不够多么)
    zangbob
        71
    zangbob  
       2016-08-30 09:23:26 +08:00
    已 Star ,吃瓜群众表示殷切等待可用于生产环境的版本。
    ajan
        72
    ajan  
       2016-08-30 13:56:38 +08:00
    挺好的
    passion336699
        73
    passion336699  
       2016-08-31 09:27:17 +08:00
    能给个 less 的吗 @_@
    xcatliu
        74
    xcatliu  
    OP
       2016-08-31 09:42:04 +08:00 via iPhone
    @passion336699 我个人认为 scss 比 less 优秀,所以会优先支持 scss ,目前版本还不稳定,不打算写一份 less 的版本。等推出 1.0.0 之后会考虑。
    xcatliu
        75
    xcatliu  
    OP
       2016-09-02 00:04:16 +08:00   ❤️ 1
    @andypinet 谢谢你的建议, v0.4.0 版本开始,去掉了对 `<table>` 和 `<input>` 的 reset ,添加了 `table`, `form`, `btn` 这三个 classes

    相关 issue : https://github.com/xcatliu/mobi.css/issues/14
    xcatliu
        76
    xcatliu  
    OP
       2016-09-02 00:07:37 +08:00
    @arslion logo 的问题应该已经改过来了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2902 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 14:23 · PVG 22:23 · LAX 06:23 · JFK 09:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.