论坛首页 → Web前端技术论坛 →

分享一个去年鼓捣的前端开发框架，望能抛砖引玉

浏览 5436 次
锁定老帖子 主题：分享一个去年鼓捣的前端开发框架，望能抛砖引玉
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • smoke
  • 等级: 初级会员
  • 性别:
  • 文章: 16
  • 积分: 30
  • 来自: 厦门
   发表时间：2012-02-13   最后修改：2012-02-15

更新：ITEYE没法运行code，更多可以到www.sfidea.com查看，添加了布局编辑器。

 

当初弄这个是发现即使再好的命名规范，因为思想和水平不同，页面结构五花八门，样式命名虽然按规范，但冲突再所难免，结果还是相当混乱。当初就想要是有个 大的框架可套用再配合样式定义规范，让前端人员套下框架，然后就只要关注自己负责的模块结构和样式，这样就能消除大部分问题。不废话了，直接看内容：

页面分为两层：一层布局层、一层部件层。

先看布局层：

布局层由行（.row）和列（.col）两个基本元素组成，一个页面可以有多个行，一个行可以包含多个列。.col-wrap是可选的，放便习惯使用负边距布局的同学。
下面先来看布局示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>四方CSS框架</title>
<style type="text/css">
.row:after, .col:after{content:'\20'; display:block; height:0; clear:both;}
.row, .col{*zoom:1;}
.col-wrap{ float:left; width:100%;}

.row{ border:2px dashed #aaa; min-height:60px; margin-top:20px;}
.col-wrap .col{background:#f9eba8;}
.col{ min-height:60px; background:#ececec;}

/* 2列 */
.C2LH .col{ float:left; width:50%;}
.C2LH .c2{ width:49%; margin-left:1%;}

.C2LNMH .c1{ margin-right:50%;}
.C2LNMH .c2{ float:left; margin-left:-49%; width:49%;}

/* 3列 */
.C3LNMH .c1{ margin-right:46%;}
.C3LNMH .c2{ float:left; margin-left:-45%; width:22%;}
.C3LNMH .c3{ float:left; margin-left:-22%; width:22%;}


/* 2排-第2列两行 */
.C3LNM1-2_1_1 .c1{margin-right:20%;}
.C3LNM1-2_1_1 .c2{ float:right; width:19%; margin-left:-19%;}
.C3LNM1-2_1_1 .c3{ clear:right; float:right; width:19%; margin-left:-19%; margin-top:10px;}

/* 4列 */
.C4LNMH .c1{ margin-right:60%;}
.C4LNMH .c2{ float:left; margin-left:-59%; width:19%;}
.C4LNMH .c3{ float:left; margin-left:-39%; width:19%;}
.C4LNMH .c4{ float:left; margin-left:-19%; width:19%;}

/* 2排-第2排第2行2列 */
.C4LNM1-3_1_2 .c1{margin:80px 20% 0 20%;}
.C4LNM1-3_1_2 .c2{ float:left; margin-left:-19%; width:19%; margin-top:80px;}
.C4LNM1-3_1_2 .c3{float:left; margin-left:-100%; width:19%;}
.C4LNM1-3_1_2 .c4{float:left; margin-left:-80%; width:80%;}
</style>
</head>

<body>

<div class="row C2LH">
    <div class="col c1"></div>
    <div class="col c2"></div>
</div>

<div class="row C2LNMH">
    <div class="col-wrap">
        <div class="col c1"></div>
    </div>
    <div class="col c2"></div>
</div>

<div class="row C3LNMH">
    <div class="col-wrap">
    	<div class="col c1"></div>
    </div>
    <div class="col c2"></div>
    <div class="col c3"></div>
</div>

<div class="row C3LNM1-2_1_1">
    <div class="col-wrap">
    	<div class="col c1"></div>
    </div>
    <div class="col c2"></div>
    <div class="col c3"></div>
</div>

<div class="row C4LNMH">
    <div class="col-wrap">
    	<div class="col c1"></div>
    </div>
    <div class="col c2"></div>
    <div class="col c3"></div>
    <div class="col c4"></div>
</div>

<div class="row C4LNM1-3_1_2">
    <div class="col-wrap">
    <div class="col c1"></div>
    </div>
    <div class="col c2"></div>
    <div class="col c3"></div>
    <div class="col c4"></div>
</div>



</body>
</html>

 

示例中C2LH,C3LH等是用来描述该行的布局样式，L前面的C2表示总列数是2列，L后面的H表示横向排列，默认就是2列并排。C3LH就是总列数3列，横向3列并排。列中的c1、c2、c3等表示该列的编号，用来区分索引各列，方便为各列单独定义样式。


C4LNM1-3_1_2这个类名有些抽象。L前面的C4不变还是表示总列数4列。L后面的NM表示负边距布局，1-3表示显示成2排，第1排1列，第2排3列。_1_2表示第2排分2层，第一层1列，第二层2列。有点绕，类名中的“-”表示并排，“_”表示分层，数字是指列数，命名方式就是：
C*L*-（并排）*_（分层）*_（分层）*。（*表示列数）

 

接下来看部件层

1.部件层命名规范
所有跟布局无关的内容我们都归为部件层，部件层类名的命名都是以.wgt-开头，后面可接有代表意义的缩写或单词，如.wgt-img，.wgt-text等。
   
2.部件层样式定义规范
部件层的所有样式定义都是从自身层级的类名开始，例如：
图片1.png

同一个部件差异化样式可以以自身的ID或所在列、行的ID来定义，不能使用布局层的类名来进行差异化定义。这样做的好处是显而易见的，每个部件都是一个独立的整体，层级也一样，部件内部的类名即使一样，也不会互相影响。

不知道有没有表述清楚，希望有人能看懂
返回顶楼
         
  • xulei
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 60
  • 来自: 广州
   发表时间：2012-02-16  
应该说是样式编码规范，不能说是框架；思路很清晰
返回顶楼
          回帖地址
0 请登录后投票
  • wing5jface
  • 等级: 初级会员
  • 性别:
  • 文章: 97
  • 积分: 6
  • 来自: 珠海
   发表时间：2012-02-16  
div在线查运行效果看这个：
http://www.hy2999.com/show/test/div.jsp
返回顶楼
          回帖地址
0 请登录后投票
  • smoke
  • 等级: 初级会员
  • 性别:
  • 文章: 16
  • 积分: 30
  • 来自: 厦门
   发表时间：2012-02-17   最后修改：2012-02-17
xulei 写道
应该说是样式编码规范，不能说是框架；思路很清晰

是框架哈，具体你可以到蓝色理想论坛上看下：http://bbs.blueidea.com/thread-3048619-1-1.html
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

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