Blueprint 是一个 CSS 框架，它可以让你用很整洁的代码来将页面划分成很复杂的网格结构（grid）。Blueprint 并没有提供一个可视化的工具来让你生成网格结构的 CSS 代码。

而 Boks 的出现，正好弥补了 Blueprint 没有提供可视化工具的缺憾。

Boks - 可视化 Blueprint 框架 CSS 生成工具[AIR] 1

在主界面的格子上拖拽，就可以轻松画出你想要的布局。在下面的面板里，都可以为每一个 DIV 设置 ID，Class 和 HTML 代码等。绘制完成之后，点击 Export 就可以导出为网页文件了。

下面提供一个官方的操作演示视频：

注意，此软件需要下载 Adobe AIR，如果 Adobe 官方网站下载太慢的话，可以去华军或者天空下。

小众软件下载 下载（946KB）：uushare|官方网站|来自小众软件|skydrive|dropbox

延伸阅读：

  • 刷新一下大脑，Grid based web design… 
  • 浅谈网页设计中的黄金分割
  • CSS Grid frameworks 学习笔记(1)
  • CSS Grid frameworks 学习笔记(2)
  • CSS Grid frameworks 学习笔记(3)