四方前端开发框架布局系统指南

当我们接到设计稿时，一般脑海里都会分什么头部、底部、内容区域之类的。很不错！已经有了块的概念。（如果你是初学者，没有块的概念，也不用担心，学完四方框架后，你跟大牛没什么两样。）

我们看完设计稿之后，一般直接就头部、底部、内容区等直接分块开始制作，这样做很明显的一个问题就是结构、样式不清晰、没法复用、不易分工协作（即使有再好的样式命名规范也没用），而且每次做页面几乎都要重头开始。我估计这时有人会说我是采用模块化开发。很好，非常不错，已经有模块化开发的概念，现在怎么说也算高手了。但是即使你的模块封装的再好，你每次还是要重新做页面布局吧，并且因为层级关系，还是有结构、样式不清晰、不易分工协作的问题。这时牛人发话了，我一层布局，一层模块开发。牛人就是不一样，一针见血，两层架构，确实解决了单纯模块化开发遗留的两个问题。

我自己之前也是准备采用什么960、blueprint等等那些所谓的网格布局系统，来进行两层架构开发。后面一看，太复杂了，看了半天，还是晕晕的。我是个单纯的人，简单才是我的菜。没找到想要的，就开始设计自己的布局系统。一阵子一直在考虑布局系统的元素构成，突然有天灵光一闪，想起了素描，再复杂的东西，也是由一横一竖构成的。所以只要两个元素，应该就可以搞定一切了。这就是四方布局系统两大元素的由来，行(.row)和列(.col)。我们看下框架里布局层的定义：“布局层由行（.row）和列（.col）两个基本元素组成，一个页面可以有多个行，一个行可以包含多个列。”。我发布这套系统时，很多人说看不明白，不会用。那么我们现在就来看看怎么用。

制作时我们先分析下设计稿的行和列，看下图，总的有5行，打开你的神器直接写结构，5行就是：div.row*5(zen coding)。第3行2列，第5行3列。简单，在第3个row里输入div.col.c$*2(zen coding)，在第5个row里输入div.col.c$*3(zen coding)。这个就是我们页面的布局结构了，够简单吧，我说过我是个单纯的人，简单才是我的菜！排版的实现方式，具体可以查看网站示例。

http://static.blueidea.com/attachment/forum/201202/25/114928remedfyvyff7mzd1.png.thumb.jpg

接着我们来看布局层的版式命名公式：C*L[NM][H/V]*-（并排）*_（分层）*_（分层）*。（*表示列数）。这个公式就是四方布局系统的核心，别看着别扭，其实很象形很有意思，我们先看C*就是指这个版式需要的列数；L是分隔符；NM可选表示布局是否采用负边距布局；H/V也是可选，H表示横排,V就是竖排。当我们看到.C2LH,.C3LNMH这类版式类名时，就可以直接知道这个版式需要的结构和大概的版式了。

有天我丢个类名过去，你一看便知！此刻我想说的是：彪悍的框架不需要解释！