使用http://builder.yaml.de
可以帮我们生成大部分代码,包括:页面的html, basemod.css,patch
做页面前使用builder生成基本布局可以省不少事,

central.css内容
@import url(../yaml/core/base.css);
@import url(screen/basemod.css);
@import url(screen/content.css);
开发时还可以加上
@import url(../yaml/debug/debug.css);
浏览器大多有个连接数的限制,如果在一个页面引入过多的外部内容,页面的下载效率会很低,
所以 在正式发布版本,可以将import的内容整合到该central.css文件中,来减少3个连接,不过相应可能需要修改一点点图片路径.
------------------------------
basemod.css
基本布局,
如
#col1 { float: right; width: 25%}
#col2 { display:none}
#col3 { width: auto; margin: 0 25% 0 0}
#col1_content { padding: 0 20px 0 10px }
#col3_content { padding: 0 10px 0 20px }
如有需要覆盖yaml/core/base.css中的初定义,则可在此重新定义.

content.css
全局性的字体,链接样式等,

针对每个页面 如首页:
新建index.css
@import url(central.css);
然后对该页做另行的布局及样式设定.
在index的模板页中
<link href="css/index.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->

其他页面与此类似

public
│ index.php
│ 
├─css
│ │ index.css
│ │ default_layout.css
│ │ base.css
│ │ central.css   
│ │ 
│ ├─screen
│ │ │ basemod.css
│ │ │ content.css
│ │              
│ ├─patches
│ │      patch_layout.css   主要放一些针对IE的hacks,
│ │      
│ └─image
│          
├─img
├─js
│      minmax.js
│      jquery.js
│      
└─yaml   放yaml的目录,独立目录方便框架更新的时候整体覆盖.