分享 厌倦 Bootstrap 了没?来试试新玩具

nightire · 2013年09月20日 · 最后由 lgn21st 回复于 2017年04月21日 · 25665 次阅读
本帖已被管理员设置为精华贴

Bootstrap 很好,简直是 web developer 的小情人儿有没有!!!

不过 Bootstrap 也挺难伺候的,默认样式覆盖和自定义都需要你有扎实的 CSS / Less / even Sass 的基础,对后端出身的你不够温柔娴淑有没有!!!

妈的好容易看到一个喜欢的 theme,竟然还要掏钱!竟然还是美刀!!情人是腰包的克星的感觉有没有!!!

第一次写咆哮体,不熟练请见谅。

言归正传,给大家介绍一个新的前端组件包:UIkit

很新很新的项目,v1 不过才是两个月前发布的,不过该有的都有,大概看下来就算没 Bootstrap 那么全也不会比 Bootstrap 差,应对大多数的开发需求足够了,而且个人感觉几乎每一个组件都比 Bootstrap 略有增强(可能向下兼容性也更差,还没大范围测试),更加用心。

作为同样是以“响应式布局”优先,"Mobile First" 的前端组件包,UIkit 在 Grid 上的处理要比 Bootstrap 更周到一些,更简单(且语义化更强)的 class 命名,多栏高度自动适配,无需 offset 的 center row 等等,很有诚意啊。

就默认 theme 而言,其实和 Bootstrap 的差别不算太大。但可爱的是官方提供了一个 Customizer App,你可以在线对所有的组件进行可视化的自定义,然后帮你生成组件包。这个就比 Bootstrap 提供的替换变量的 Customizer 友好太多了,强大太多了~关键这是官方的,而不是第三方的,也就意味着随着版本的更新 Customizer 也会无缝衔接上。

靠说的没用,亲自体验一下 Customizer 吧,没有靠谱美工的开发团队的福音啊有没有!!!

还得特别赞一下几个 Javascript 插件,我觉得都比 Bootstrap 做得好,尽管没 Bootstrap 那么多。

Anyway,作为一个新项目,肯定也会存在多种多样的不足,不过挺看好 UIkit 的潜力的。如果你擅长前端,且对 Grunt 不陌生的话,可以到 Github 上下载源代码做贡献或者编译自己的版本;即使你只是个最终用户,也欢迎就你在使用中发现的问题或建议提交 Issues

最后放几个对比图,看看在功能相差无几的前提下,几个流行前端组件包的体积(功能)差异:

最小化的 CSS

minified_css

添加了图标字体文件后(注意内置图标的数量!)

with_iconfont

最小化的 JS

minified_js

综合

summary

这是一个前端世界百花斗艳的年代,别让 Bootstrap 成为你唯一的选择。

quirks mode 爱好者路过 ...

B 大专业歪楼……

感觉真是非常的不错!

#3 楼 @larryzhao 是的,这个也很喜欢!等待 release 再测试,api 变化比较多。

UIKit,我还以为在 XCode 里那个。。。

前端框架太多了,玩玩熟悉一下特性还可以,真的干活用,还是成熟稳重比较好。

诶 Foundation 这么大……看来都是错觉……

感觉 uk 就是 bootstrap 翻版,根本没改变丑陋的选择器命名... semantic ui 类交集的方案简直完美,用 .ui 限制命名空间也不会污染出去

#3 楼 @larryzhao 这个看上去很 cool 耶。

#12 楼 @luikore 的确…上次在开源中国看到 uikit 尝试过,然后果断删了接着用 bootstrap

大爱 panel,bootstrap 每次还得自己弄个 box。

#13 楼 @ichord 超 cool,class 命名巨赞

匿名 #17 2013年09月21日

@nightire 确实是个新选择

怎么没在官网上看到关于兼容性的介绍,能找到在 issue 上关于介绍兼容 UIKit supports all modern browsers and IE>=9 不兼容 IE 8 有点苦恼~~

楼主,http://purecss.io/ 4.4KB 你怎么不提?

#19 楼 @qichunren 我不提你可以提啊,冲什么冲?

看到最后jQuery is required然后默默地关掉了……比大小不能不包括依赖的东西啊……

#21 楼 @aptx4869 那上面那些参赛者有哪个是 jQuery is NOT required?

刚刚换上 bootstrap 你们又流行别的了,我觉得自己号苦逼啊~

添加了图标字体文件后

明显坑爹啊,Bootstrap 并不是非得带上 Glyphicons 的,也是可以用 Font-Awsome 的

其实 bootstrap 最好的地方在于,有很多基于 bootstrap 的主题,就几刀,买来就用,相当的方便了

theme 挺好,我愿意花钱买

css 库大爆炸啊,自从 bootstrap 开源出来,满网络的 bootstrap,现在原则的已经非常多了。

flat-ui 也比较有意思

恩,试一下,有点腻了。bootstrap。感谢楼主分享。哈哈~

感谢,立刻用上了,用在新后台,不考虑兼容性。

还没有发现 rails-uikit 大家要抓紧了,哈哈

@nightire @larryzhao 这两个看上去都不错,回去玩一下~ 多谢二位!

#36 楼 @a167651202 是不是‘uikit-rails'这个名字好一点呢? 如:jquery-rails, bootstrap-sass, font-awesome-rails, d3_rails... 都是把 rails 放在后面

晚上閒逛時發現這個 UI library

http://designmodo.github.io/Flat-UI/

3q,mark 一下

semantic ui +1

点开来看发现还是满满的 Bootstrap 气息啊。。。

霸气 +1

问题是浏览器兼容

modal 不知道是不是用法有问题,好像有内存泄漏。

Foundation 爱好者飘过~~~ 😓

Semantic UI 怎么样?

我也觉得这个是 bootstrap 的翻版,特地从头到尾把所有控件都看了一遍,感觉没 bootstrap 界面友好,不过还是谢谢 share....

推荐 Purecss:purecss.io

#36 楼 @a167651202 我用的是 Rails4.0,可以用吧?

foundation 在体积上完败啊。。。

如果使用定制版本,就没法使用 bower 了吧?

#28 楼 @sanivbyfish 你买过主题么? @ty4z2008 为何推荐 purecss?不是 uikit 更强大么? @a167651202 是对 uikit 的封装? #31 楼 @dddd1919 你试过几种 css 库?

#3 楼 @larryzhao 这个怎么也收费?

大神,我现在的问题是,有个 HTML 的模板,里面包含 bootstrap less css,我现在想拆了它,放到我自己的网站,但是总是不尽人意。尤其是直接复制粘贴放入 assets 里,跟原版的网站差距太大。。请问大神,有些思想套路可用么?虚心请教。占用你宝贵的时间了。

@Vdan 我劝你还是认认真真花上一个月好好补一下 CSS 的基础吧,copy & paste 只能用来忽悠人,你总不能连自己都去忽悠吧?

我可以明确的告诉你,不懂里面的原理,什么套路都救不了你。

nightire 回复

好吧,大神,能推荐几本书么?我去恶补一下。我现在刚买了《CSS 权威指南(第 3 版)》这本书,请问还需要别的基础知识的书籍么?多谢。

Vdan 回复

不用贪多,一本一本看,不用求速,确保你看懂了。

nightire 回复

好的,我知道了。谢谢。😆

最近喜欢上了 http://materializecss.com,不过这个早已不是什么新框架了,现在做网站用 Bootstrap 总感觉像是回到了 2010 年。

66 楼 已删除
VincentJiang 关于 UIkit tooltip 的使用 提及了此话题。 04月03日 10:57
需要 登录 后方可回复, 如果你还没有账号请 注册新账号