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

nightire · 发布于 2013年09月20日 · 最后由 lgn21st 回复于 2017年04月21日 · 20769 次阅读
1573
本帖已被设为精华帖!

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 成为你唯一的选择。

共收到 65 条回复
96

quirks mode爱好者路过 ...

7183

B大专业歪楼……

3930

感觉真是非常的不错!

2653

#3楼 @larryzhao 这个非常赞!

1573

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

4584

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

142

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

2474

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

2880

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

818

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

9162

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

990

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

2408

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

7270

@nightire 确实是个新选择

1189

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

F46600

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

1573

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

96

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

1573

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

4514

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

4027

+1

De6df3

添加了图标字体文件后

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

781

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

177

theme挺好,我愿意花钱买

96

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

4277

flat-ui也比较有意思

2455

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

547643

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

547643

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

96

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

250

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

2031

晚上閒逛時發現這個 UI library

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

3211

3q,mark 一下

96

semantic ui +1

96

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

96

霸气 +1

8326

问题是浏览器兼容

4375

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

973

Foundation爱好者飘过~~~ 😓

90

Semantic UI 怎么样?

96

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

7385

推荐Purecss:purecss.io

8904

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

9800

foundation在体积上完败啊。。。

15924

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

15924

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

15924

#39楼 @Pitt flat好贵啊

15924

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

A6ae59

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

1573

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

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

A6ae59
1573nightire 回复

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

1573
A6ae59Vdan 回复

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

A6ae59
1573nightire 回复

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

3

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

66楼 已删除
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册