论坛首页 Web前端技术论坛

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

浏览 6692 次
精华帖 (2) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-02-25   最后修改:2012-02-25
当我们接到设计稿时,一般脑海里都会分什么头部、底部、内容区域之类的。很不错!已经有了块的概念。(如果你是初学者,没有块的概念,也不用担心,学完四方框架后,你跟大牛没什么两样。)

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

我自己之前也是准备采用什么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这类版式类名时,就可以直接知道这个版式需要的结构和大概的版式了。

有天我丢个类名过去,你一看便知!此刻我想说的是:彪悍的框架不需要解释!
   发表时间:2012-02-29  
这就是有自己想法的强淫,不需要解释!
0 请登录后投票
   发表时间:2012-02-29  
什么鸟东西啊  浪费生产力
0 请登录后投票
   发表时间:2012-02-29   最后修改:2012-02-29
更新了布局生成器演示,前端分层开发,前端开发新模式!
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>
0 请登录后投票
   发表时间:2012-02-29  
增加了可视化框架布局和结构生成器点此查看
0 请登录后投票
   发表时间:2012-03-01  

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

0 请登录后投票
   发表时间:2012-03-03  
你说的那两个框架也是用格子来布局的,期待后续
0 请登录后投票
   发表时间:2012-03-03  
at1943 写道
你说的那两个框架也是用格子来布局的,期待后续

更新了项目设计器,你可以再看看。个人感觉我的布局系统比他们更灵活更健壮还可以可视化编辑,自动生成布局层代码,以后前端开发几乎只要专心关注部件层就可以了。
0 请登录后投票
   发表时间:2012-03-06  
那就不用前端了?

搞个布局有什么用,写同样的结构花的时间也并不会多。
0 请登录后投票
   发表时间:2012-03-06   最后修改:2012-03-06
mu0001 写道
那就不用前端了?

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

不是不用前端,是让前端有更多的时间去做更有意义的事情,而不是整天重复性工作。这个不单单是搞布局,是这篇讲布局层,到时会整合Bootstrap。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics