Blueprint简介

Blueprint是一个CSS框架,使用Blueprint可以大大缩短CSS的开发时间以及质量,它的设计思想来自作者Jeff Croft的《Frameworks for Designers》一文(中文版; 理解Web框架,和如何构建一个CSS框架),简单来说,Blueprint将网页分成了许多长度为40的长条(column),每个长条的宽度(span)为30(蓝色部分),空白(margin)为10(白色部分),你可以通过名为span-n的class来指定div的宽度,比如,下面的代码就是一个典型的3栏设计:

<div class=”container”>
  <div class=”span-24″>
    Header
  </div>
  <div class=”span-4″>
    Left sidebar
  </div>
  <div class=”span-16″>
    Main content
  </div>
  <div class=”span-4 last”>
    Right sidebar
  </div>
</div>

container默认width为950,也就是24栏(24*40 - 10 = 950),你可以通过在container后增加showgrid class来显示背景格子,Blueprint还提供了几个很有用的Ruby脚本用于压缩CSS文件以及进行W3C CSS检查,这里是详细指南(英文),这篇中文介绍很不错。

blueprint.png

This entry was posted in CSS. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

无觅相关文章插件,快速提升流量