最近每天沉醉在那堆垃圾代码中改着无穷无尽的Defect,也算是为了对岸几百万移动用户的福祉做出应有的贡献了。
非常有名的CSS Framework – Blueprint在更换了项目leader之后,最近发布了一个新的版本,Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来,作者对于1.0的正式release有着很高的期待。
简单介绍一下Blueprint这个CSS Framework,翻译自Blueprint的Quick Start Tutorial,如果需要原文在官方网站上都有。我只是节选了一些:
源文件:
- blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css,为页面元素重置默认值。
- blueprint/src/grid.css: 之前我也介绍960gs这个Framework,grid原型设计现在是很流行的原型设计方法了,Blueprint也提供了很多方便的class来帮助你快速建立grid布局。
- blueprint/src/typography.css: 关于排版的css,包含了一些非常精妙的文字排版样式。
- blueprint/src/forms.css: 包含了一些表单样式。
- blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式,很多无用的图片,广告都是用户所不希望打印,所以需要重新设置打印样式。
- blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。
再来简单看看到底该如何使用grid.css,之前写[960是个神奇的数字 - 960 Grid System介绍],就有人问到底该如何使用960gs这样的框架,还有人说其实我也讲不出该如何使用。我看下来,可能是很多人对原型辅助css的期望过高了,他并不会帮我们做什么事情,只是帮助我们更好的去做一些事情,来看下例子:
<div class="container showgrid"> <div class="span-24"> 头部页眉 </div> <div class="span-4"> 左边侧栏 </div> <div class="span-16"> <div class="span-8"> 居中行1-1 </div> <div class="span-4"> 居中行1-2 </div> <div class="span-4 last"> 居中行1-3 </div> <div class="span-16 last"> 正文内容 </div> </div> <div class="span-4 last"> 右边侧栏 </div> <div class="span-24"> 页脚 </div> </div>
通过这些预置的class,能够很快的排版,我想通过这个例子大家应该能理解类似于blueprint 960gs这样的framework该如何使用。
如果感兴趣的话,去下载使用吧 http://blueprintcss.org/
您可能也喜欢: | |||
CSS Framework,让你事半功倍 |
50个超级有用的CSS开发工具 |
最常用的CSS小把戏(Most used CSS tricks) |
CSS代码生成器(CSS Frame Generator) |
无觅 |