YUI Grid CSS的优雅设计

阅读更多

最近加入了一个GAE的项目cpedialog,该项目的前端布局采用YUI Grid CSS,我就顺便看了一下，YUI Grid CSS设计的非常优雅，思路非常清晰，打算使用CSS+DIV做网站布局的兄弟非常值得一看。下面我把我记录的一些要点列出来，便于我以后查阅，同时算是抛砖引玉吧。项目详情请参见 YUI Grid CSS

• 引入CSS 文件，这里yahoo提供了共用的css host文件，如果很多网站都使用yahoo host的js ,css,那么这些css,js将仅加载一次，有利于提高浏览速度

 

 

• YUI Grid CSS建议把网站整体划分为3打部分，header, body, footer,并且这三部分放在一个大的div里,这三大部分使用id selector来做定义。
  

 

•  YUI Grid CSS为最外侧的div预先设置了4个宽度，分别是750px, 950px, 100%, 974px，可以通过改变最外侧div的id来改变它的宽度，同时用户还可以根据自己的需要自己定义最外侧div的宽度

•  绝大多数网站可以把body分成两个部分，main-block and second-block,YUI Grid CSS已经预先定义好了这两个块，并且可以通过改变css class的内容来调节main-block和second-block的左右位置，以及second-block的宽度，main-block将会占用second-block宽度剩余的宽度

 

•  yui-b中的b 表示block, 在最外层的class="yui-t4"表示second-block占用180px，排列在main-block的右侧，除了yui-t4,之外，还有yui-t1 到yui-t6，每一个都表示不同的含义。
• 在main-block中还支持内嵌的grid,css class用yui-g来表示，在内嵌的grid中，包含不同的uint,css使用yui-u来表示

 

•  内嵌的grid还可以内嵌grid,这样就可以设计出非常复杂的page layout来，同时还可以指定那个unit在前，哪个unit在后，使用css class="first"

 

•  对于内嵌的grid,如果使用css class="yui-g"，里面的两个unit是均分width的，如果有特殊需要，还可以指定，css class为yui-gb到yui-gf，这些css分别定义了两个unit如何分配grid的width