最近做了一个 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-4
section
, paragraph
, clear-margin-top
to mt-30
, mt-15
, mt-0
font-size
of pre
from 1.4rem
to 1.5rem
alert
s colorsdisabled
buttons发布了新版本
Mobi.css v0.3.1 | GitHub | Homepage
新的域名已经可以访问了: http://getmobicss.com ,老域名会 301 跳转
label
radio
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
Martox 2016-08-29 01:42:55 +08:00 via Android 1
先赞后看
|
2
haiyang416 2016-08-29 02:05:47 +08:00 via Android 1
大致看了下,还不错,支持。
|
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 这样的 |
4
teriyaki888 2016-08-29 04:55:34 +08:00 1
支持
真心不喜欢那些大坨 js 框架 |
5
hanxiV2EX 2016-08-29 08:05:18 +08:00 via iPhone 1
支持,已 star
|
6
xcatliu OP @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 里面了,今天有时间的时候再改 |
7
Troevil 2016-08-29 08:39:23 +08:00
问题来了 大量使用 Flexbox , 兼容性怎么保证呢
|
9
xcatliu OP |
10
xcatliu OP |
14
hansnow 2016-08-29 09:19:42 +08:00
已 star 支持
|
15
panlilu 2016-08-29 09:23:42 +08:00 via iPhone
兹瓷
|
16
0915240 2016-08-29 09:36:35 +08:00
支持支持
|
17
0915240 2016-08-29 09:36:51 +08:00
已 star
|
18
BOYPT 2016-08-29 09:41:11 +08:00 1
嗯…… flexbox 的 grid ……感觉像轻量的 boostrap 4 ……不过觉得固定比例分配还是得要有……
|
21
BOYPT 2016-08-29 09:49:16 +08:00
@xcatliu 噢 我看漏了,说的就是 col-half, col-third and col-quarter ,已经有了。应该比较足够用了, nice job
|
22
bertonzh 2016-08-29 09:55:28 +08:00 1
4.3 下 flex 是老语法,需要用 autoprefixer 做后处理,看了下你的 dist 文件,没有 `-webkit-flex`,没有 `-webkit-box`,在低端版本下肯定惨不忍睹了。
而且即使是使用了 autoprefixer , flex 在 4.3 下和标准的浏览器有些地方还是有区别,需要特殊处理。 |
23
bertonzh 2016-08-29 09:58:11 +08:00
checkbox 和 radio 最好处理下,不同系统的差异还是比较大的。而且自定义起来也没啥兼容性问题。
|
24
xcatliu OP |
25
yoa1q7y 2016-08-29 10:14:01 +08:00 1
这里感觉还可以调整一下 |
27
tkpc 2016-08-29 10:21:50 +08:00
赞
|
28
shellcodecow 2016-08-29 10:34:02 +08:00
很赞,收藏
|
29
horizon 2016-08-29 10:39:06 +08:00
楼主有时间能不能分享一下要写这种的 css library 的设计思路呢。
|
31
arslion 2016-08-29 11:11:30 +08:00 1
ಠ_ಠ 为什么要这样 |
33
acdea4effdbb420d 2016-08-29 11:17:55 +08:00
看起来不错,希望能长期坚持
|
34
xcatliu OP @acdea4effdbb420d 谢谢支持,后续打算先做个 hexo 主题
|
35
sammiriam 2016-08-29 11:35:39 +08:00
赞一个
|
36
andypinet 2016-08-29 11:38:39 +08:00 1
input 不要直接改
|
38
andypinet 2016-08-29 13:11:39 +08:00 1
@xcatliu bootstrap2 直接对 input 添加样式导致问题 bootstrap3 统一成 form-control 类
|
40
newbieo0O 2016-08-29 14:22:01 +08:00
单选按钮和文字没对齐啊,太挤了。 Mac Safari
|
41
ChiangDi 2016-08-29 14:33:26 +08:00
现在一般要求兼容到安卓 4.0 以上
|
42
avenger 2016-08-29 14:37:12 +08:00
目前在用 PureCss ,看楼主的描述,所以这个是专门为 mobile 设计的了?
除了文件更小以外,能说说其它优势吗?重新造一个轮子的意义何在? |
43
arens 2016-08-29 15:04:43 +08:00 1
已 Star ,支持纯 CSS 框架,希望能继续维护
|
44
hjse7en 2016-08-29 16:09:05 +08:00
移动端,代码块宽度占满屏幕,看着难受
|
48
xcatliu OP @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 |
49
iamjs 2016-08-29 18:52:27 +08:00
很不错~~
|
50
xcatliu OP |
52
shisaq 2016-08-29 20:07:12 +08:00
赞赞赞,轮子造得棒!记得更新 readme ,也添加一些兼容性的说明
|
54
kn007 2016-08-29 20:15:01 +08:00
非常漂亮
|
55
xcatliu OP @maomaomao001 @bertonzh @yoa1q7y @newbieo0O
现在没有 Macbook 可供调试,等我找台 Macbook 再修复 radio 和 checkbox 的问题。 |
60
xcatliu OP @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/ |
62
wolfan 2016-08-29 21:50:59 +08:00
我的印个力士字典呐。。。
还好代码是一看就明白呀,要不然有字典也学不会,果然这是一个高端社区,但俺这个山里农民果断拉低了你们的下线呐,啊,我还是默默的继续拉低好了,嘻嘻。 |
63
xcatliu OP @wolfan 哈哈,我的英语也不怎么好,很多 Chinish , 不过外国人应该看得懂就行啦。还没时间写中文文档,等稳定后会写中文文档的。
|
66
Zhangcongjie 2016-08-29 22:59:21 +08:00
赞!
|
67
scys 2016-08-30 00:30:56 +08:00
有个建议,尽量在一个版本内如 1.0.0 -> 1.9.9 之间的变量名不要变化: D
--- 一直在用 foundation ,虽然没有看到几个人说这个好不好用。 |
68
xcatliu OP @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
xcatliu OP @scys 现在不建议用在生产环境,欢迎持续关注。如果想用在生产环境,建议等发布了 1.0.0 以后。那时就不会改 api 了。
|
70
juleswang 2016-08-30 08:51:47 +08:00
支持下, 前面的评论很有道理,不要重复造轮子(在公司造的还不够多么)
|
71
zangbob 2016-08-30 09:23:26 +08:00
已 Star ,吃瓜群众表示殷切等待可用于生产环境的版本。
|
72
ajan 2016-08-30 13:56:38 +08:00
挺好的
|
73
passion336699 2016-08-31 09:27:17 +08:00
能给个 less 的吗 @_@
|
74
xcatliu OP @passion336699 我个人认为 scss 比 less 优秀,所以会优先支持 scss ,目前版本还不稳定,不打算写一份 less 的版本。等推出 1.0.0 之后会考虑。
|
75
xcatliu OP @andypinet 谢谢你的建议, v0.4.0 版本开始,去掉了对 `<table>` 和 `<input>` 的 reset ,添加了 `table`, `form`, `btn` 这三个 classes
相关 issue : https://github.com/xcatliu/mobi.css/issues/14 |
77
xcatliu OP @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 |