Quantcast
Channel: IT民工的坐井观天 » webdesign
Viewing all articles
Browse latest Browse all 3

Blueprint(Css Framework) version0.8

0
0

最近每天沉醉在那堆垃圾代码中改着无穷无尽的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>

效果图:
blueprint_grid_sample

通过这些预置的class,能够很快的排版,我想通过这个例子大家应该能理解类似于blueprint 960gs这样的framework该如何使用。

如果感兴趣的话,去下载使用吧 http://blueprintcss.org/


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images