最近做了一个 css library ，颇废了一番功夫。
这里先把它分享给大家，欢迎 star ，欢迎试用！
PS ：将来 Homepage 会转到 http://getmobicss.com/ ，目前这个域名我已经买了，但是说需要 60 天才能转移。
Mobi.css 是一个轻量，灵活的移动端 css library 。特点如下：
更多介绍请看 Homepage
最后奉上 Mobi.css 的 Logo
感谢大家的支持，第一次获得 GitHub Trending CSS 分类的 Top 1
根据反馈做了一些更新：
Mobi.css v0.2.0 | GitHub | Homepage
col-half, col-third, col-quarter to col-1-2, col-1-3, col-1-4section, paragraph, clear-margin-top to mt-30, mt-15, mt-0font-size of pre from 1.4rem to 1.5remalerts colorsdisabled buttons发布了新版本
Mobi.css v0.3.1 | GitHub | Homepage
新的域名已经可以访问了： http://getmobicss.com ，老域名会 301 跳转
labelradio and checkbox发布了新版本
Mobi.css v0.4.1 | GitHub | Homepage
col-custom, now we can use col and max-width to achieve custom column (#11)_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)btn, new we can make an <a> to a button by adding class="btn"_custom.scss so that people can easily generate their own Mobi.css<mark>, <sup>, etcpre { margin-left: "-15px", margin-right: "-15px" } when screen width larger than container, so that pre will not look oddopacity to achieve [disabled]<h4>, <h5>, <h6> font-sizecontainer bug, container's width is not the same when container-side shows |
1
先赞后看
|
 |
2
大致看了下，还不错，支持。
|
 |
3
建议
1: 做好 select 和 checkbox 的样式 2: 布局里的 1/2 啊，四分之之类的请用数字代替(50,25) 或者 1-2,1-4 这样的 |
 |
4
支持
真心不喜欢那些大坨 js 框架 |
 |
5
支持，已 star
|
 |
6
@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 里面了，今天有时间的时候再改 |
 |
TroevilAug 29, 2016
7
问题来了 大量使用 Flexbox , 兼容性怎么保证呢
|
|
9
|
 |
hansnowAug 29, 2016
14
已 star 支持
|
 |
panliluAug 29, 2016 via iPhone
15
兹瓷
|
 |
0915240Aug 29, 2016
16
支持支持
|
|
0915240Aug 29, 2016
17
已 star
|
 |
18
嗯…… flexbox 的 grid ……感觉像轻量的 boostrap 4 ……不过觉得固定比例分配还是得要有……
|
|
BOYPTAug 29, 2016
21
@xcatliu 噢 我看漏了，说的就是 col-half, col-third and col-quarter ，已经有了。应该比较足够用了， nice job
|
 |
22
4.3 下 flex 是老语法，需要用 autoprefixer 做后处理，看了下你的 dist 文件，没有 `-webkit-flex`，没有 `-webkit-box`，在低端版本下肯定惨不忍睹了。
而且即使是使用了 autoprefixer ， flex 在 4.3 下和标准的浏览器有些地方还是有区别，需要特殊处理。 |
|
bertonzhAug 29, 2016
23
checkbox 和 radio 最好处理下，不同系统的差异还是比较大的。而且自定义起来也没啥兼容性问题。
|
|
24
|
 |
25
 这里感觉还可以调整一下 |
 |
tkpcAug 29, 2016
27
赞
|
 |
shellcodecowAug 29, 2016
28
很赞，收藏
|
 |
horizonAug 29, 2016
29
楼主有时间能不能分享一下要写这种的 css library 的设计思路呢。
|
 |
31
 ಠ_ಠ 为什么要这样 |
 |
acdea4effdbb420dAug 29, 2016
33
看起来不错，希望能长期坚持
|
|
34
@acdea4effdbb420d 谢谢支持，后续打算先做个 hexo 主题
|
 |
sammiriamAug 29, 2016
35
赞一个
|
 |
36
input 不要直接改
|
 |
newbieo0OAug 29, 2016
40
单选按钮和文字没对齐啊，太挤了。 Mac Safari
|
 |
ChiangDiAug 29, 2016
41
现在一般要求兼容到安卓 4.0 以上
|
 |
avengerAug 29, 2016
42
目前在用 PureCss ，看楼主的描述，所以这个是专门为 mobile 设计的了？
除了文件更小以外，能说说其它优势吗？重新造一个轮子的意义何在？ |
 |
43
已 Star ，支持纯 CSS 框架，希望能继续维护
|
 |
hjse7enAug 29, 2016
44
移动端，代码块宽度占满屏幕，看着难受
|
|
48
@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 |
 |
iamjsAug 29, 2016
49
很不错~~
|
|
50
|
 |
shisaqAug 29, 2016
52
赞赞赞，轮子造得棒！记得更新 readme ，也添加一些兼容性的说明
|
 |
kn007Aug 29, 2016
54
非常漂亮
|
|
55
@maomaomao001 @bertonzh @yoa1q7y @newbieo0O
现在没有 Macbook 可供调试，等我找台 Macbook 再修复 radio 和 checkbox 的问题。 |
|
60
@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/ |
 |
wolfanAug 29, 2016
62
我的印个力士字典呐。。。
还好代码是一看就明白呀，要不然有字典也学不会，果然这是一个高端社区，但俺这个山里农民果断拉低了你们的下线呐，啊，我还是默默的继续拉低好了，嘻嘻。 |
 |
ZhangcongjieAug 29, 2016
66
赞！
|
 |
scysAug 30, 2016
67
有个建议，尽量在一个版本内如 1.0.0 -> 1.9.9 之间的变量名不要变化： D
--- 一直在用 foundation ，虽然没有看到几个人说这个好不好用。 |
|
68
@scys 感谢建议，现在还是 0.x.x 所以 breaking change 的时候只会升级 minor 版本号。非 breaking change 升级 patch 版本号。
等发布了 1.0.0 以后， breaking change 就会升级 major 版本号了。 这应该是符合 semantic version 的规则的。低于 1.0.0 都是不稳定的。 1.0.0 应该会在一个月内发布。 |
|
69
@scys 现在不建议用在生产环境，欢迎持续关注。如果想用在生产环境，建议等发布了 1.0.0 以后。那时就不会改 api 了。
|
 |
juleswangAug 30, 2016
70
支持下， 前面的评论很有道理，不要重复造轮子（在公司造的还不够多么）
|
 |
zangbobAug 30, 2016
71
已 Star ，吃瓜群众表示殷切等待可用于生产环境的版本。
|
 |
ajanAug 30, 2016
72
挺好的
|
 |
passion336699Aug 31, 2016
73
能给个 less 的吗 @_@
|
|
74
@passion336699 我个人认为 scss 比 less 优秀，所以会优先支持 scss ，目前版本还不稳定，不打算写一份 less 的版本。等推出 1.0.0 之后会考虑。
|
|
75
@andypinet 谢谢你的建议， v0.4.0 版本开始，去掉了对 `<table>` 和 `<input>` 的 reset ，添加了 `table`, `form`, `btn` 这三个 classes
相关 issue ： https://github.com/xcatliu/mobi.css/issues/14 |
|
77
@0915240 @726332269 @BOYPT @ChiangDi @Martox @RoshanWu @Zhangcongjie @acdea4effdbb420d @ajan @andypinet @arens @arslion @avenger @bertonzh @guyskk @haiyang416 @hansnow @hanxiV2EX @hjse7en @horizon @iamjs @juleswang @kn007 @maomaomao001 @newbieo0O @panlilu @passion336699 @sammiriam @scys @shellcodecow @shisaq @teriyaki888 @tkpc @wolfan @yoa1q7y @zangbob
抱歉群发打扰大家了。不过 Mobi.css v1.0.0-alpha.1 发布啦，欢迎试用！ https://www.v2ex.com/t/303683 |
1
Select Language