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

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

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

我自己之前也是准备采用什么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)。这个就是我们页面的布局结构了，够简单吧，我说过我是个单纯的人，简单才是我的菜！排版的实现方式，具体可以查看网站示例。



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

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

这就是有自己想法的强淫，不需要解释!

什么鸟东西啊  浪费生产力

更新了布局生成器演示，前端分层开发，前端开发新模式！
include外面那些是框架生成器自动生成的，包括样式。详细了解：http://www.sfidea.com

<div class="r1 w960 m_0_a">
    <div class="c1 pr h60">
        <div class="wgt-logo pa"><?php include('wgt/wgt-logo.html') ?></div>
        <div class="wgt-text pa t30"><?php include('wgt/wgt-text.html') ?></div>            
    </div>
</div>

<div class="r2 w960 m_0_a">
    <div class="c1 w680 fl">
        <div class="wgt-sftest1 fl w280"><?php include('wgt/wgt-sftest1.html') ?></div>
        <div class="wgt-sftest2 fr w380"><?php include('wgt/wgt-sftest2.html') ?></div>            
    </div>
    <div class="c1 w280 fr">
        <div class="wgt-sftest3 pa"><?php include('wgt/wgt-sftest3.html') ?></div>            
    </div>
</div>

<div class="r2 w960 m_0_a">
    <div class="col-wrap">
        <div class="c1 mr315">
        	<div class="c1 w50p h60 fl"><?php include('wgt/wgt-sftest4.html') ?></div>
            <div class="c2 w50p h60 fl"><?php include('wgt/wgt-sftest5.html') ?></div>
        </div>
    </div>
    <div class="c2 w315 ml-315 fl">
    	<div class="c1 w200 ml10 mr5 h60 fl"><?php include('wgt/wgt-sftest6.html') ?></div>
        <div class="c2 w100 h60 fl"><?php include('wgt/wgt-sftest7.html') ?></div>
    </div>
</div>

增加了可视化框架布局和结构生成器点此查看

放个布局设计器，自动生成的项目目录上来，可能就比较清楚了

你说的那两个框架也是用格子来布局的，期待后续

更新了项目设计器，你可以再看看。个人感觉我的布局系统比他们更灵活更健壮还可以可视化编辑，自动生成布局层代码，以后前端开发几乎只要专心关注部件层就可以了。

那就不用前端了?

搞个布局有什么用，写同样的结构花的时间也并不会多。

不是不用前端，是让前端有更多的时间去做更有意义的事情，而不是整天重复性工作。这个不单单是搞布局，是这篇讲布局层，到时会整合Bootstrap。