@mixin tuding($layout:'h',$wrapping:auto,$n1:200px,$n2:200px,$space:10px,$incInner:false,$v1:200px,$v2:200px){
	@if($layout=='h'){
		@include tudingComment($layout,$wrapping,$n1,$n2,$incInner,$v1,$v2);
		@include tudingPrepare($wrapping);
		@include tudingH($wrapping,$n1,$n2,$space);
		//@include tudingInnerH($incInner,$v1,$v2);
		@include tudingWidth('.wrapping');
		@include tudingX();
	}@else if($layout=='fl'){
		@include tudingComment($layout,$wrapping,$n1,$n2,$incInner,$v1,$v2);
		@include tudingPrepare($wrapping);
		@include tudingFl($wrapping,$n1,$n2,$space);
		//@include tudingInnerFl($incInner,$v1,$v2);
		@include tudingWidth('.wrapping');
		@include tudingX();
	}@else if($layout=='ft7'){
		@include tudingComment($layout,$wrapping,$n1,$n2,$incInner,$v1,$v2);
		@include tudingPrepare($wrapping);
		@include tudingFt7($wrapping,$n1,$n2,$space);
		//@include tudingInnerFt7($incInner,$v1,$v2);
		@include tudingWidth('.wrapping');
		@include tudingX();
	}@else{
		/* Warning!!! Parameter error!!! */
	}
}



@mixin tudingComment($layout,$wrapping,$n1,$n2,$incInner,$v1,$v2){
	$innerInfo:'';
	$layoutName:'';
	@if($incInner==true){
		$innerInfo:'incInner=#{$incInner}; v1=#{$v1}; v2=#{$v2}; ';
	}
	@if($layout=='h'){
		$layoutName:'Hybrid Mode';
	}@else if($layout=='fl'){
		$layoutName:'Fixed L Mode';
	}@else if($layout=='ft7'){
		$layoutName:'Fixed T&7 Mode';
	}@else{
		$layoutName:'Undefined layout!!!';
	}
	/* [#{$layoutName}] - Tuding Layout System v2.0 - copyright(c)bubujie.net */
	/* wrapping=#{$wrapping}; n1=#{$n1}; n2=#{$n2}; #{$innerInfo}*/
}



@mixin tudingPrepare($wrapping:auto){
//[Tuding Prepare]
/* Body */
body { height:100%; margin:0; padding:0; }
/* bHead & bBody & bFoot & Wrapping & Filling & Wrap & Fill */
#bhead, #bbody, #bfoot, .wrapping, .filling, .wrap, .fill { position:relative; clear:both; *zoom:1; }
#bhead:after, #bbody:after, #bfoot:after, .wrapping:after, .filling:after, .wrap:after, .fill:after { content:""; display:block; clear:both; }
/* Wrapping width */
.wrapping { width:$wrapping; margin-left:auto; margin-right:auto; }
/* Wrapping align */
.lefting .wrapping { margin-left:0; }
.righting .wrapping { margin-right:0; }
/* Ming & Ning & Wing & Ving & Ding */
.ming, .n1, .n2, .wing, .v1, .v2, .ding { position:relative; *zoom:1; }
.ming:after, .n1:after, .n2:after, .wing:after, .v1:after, .v2:after, .ding:after { content:""; display:block; clear:both; }
/* bHead li & bFoot li */
#bhead ul, #bfoot ul { position:relative; }
#bhead li, #bfoot li { position:relative; float:left; list-style:none; }
}



@mixin tudingH($wrapping:auto,$n1:200px,$n2:200px,$space:10px){
//[Hybrid Mode]
/* Hybrid MN */
.mn { padding-right:$n1 +$space; }
.mn .ming { float:left; width:100%; }
.mn .n1, .mn .n2 { float:right; width:$n1; margin-left:-$n1; left:$n1 +$space; }
/* Hybrid NM */
.nm { padding-left:$n1 +$space; }
.nm .ming { float:right; width:100%; }
.nm .n1, .nm .n2 { float:left; width:$n1; margin-right:-$n1; left:-$n1 -$space; }
/* Hybrid MNN */
.mnn { padding-right:$n1 +$n2 +$space*2; }
.mnn .ming { float:left; width:100%; }
.mnn .n1 { float:right; width:$n1; margin-left:-$n1; left:$n1 +$space; }
.mnn .n2 { float:right; width:$n2; margin-left:-$n2; left:$n1 +$n2 +$space*2; }
/* Hybrid NMN */
.nmn { padding-left:$n1 +$space; padding-right:$n2 +$space; }
.nmn .ming { float:left; width:100%; margin-right:-100%; }//Important::margin-right:-100%;
.nmn .n1 { float:left; width:$n1; margin-right:-$n1; left:-$n1 -$space; }
.nmn .n2 { float:right; width:$n2; margin-left:-$n2; left:$n2 +$space; }
/* Hybrid NNM */
.nnm { padding-left:$n1 +$n2 +$space*2; }
.nnm .ming { float:right; width:100%; }
.nnm .n1 { float:left; width:$n1; margin-right:-$n1; left:-$n1 -$n2 -$space*2; }
.nnm .n2 { float:left; width:$n2; margin-right:-$n2; left:-$n2 -$space; }
}
@mixin tudingH2cols($wrapping:auto,$n1:200px,$n2:200px,$space:10px,$cols:2){
/* [Hybrid Mode] [2 Columns] */
.wrapping { width:$wrapping; }
@if($cols==-1){
/* Hybrid 2cols MN */
.mn { padding-right:0; }
.mn .ming { float:none; width:auto; }
.mn .n1, .mn .n2 { float:none; width:auto; margin-left:0; left:0; }
/* Hybrid 2cols NM */
.nm { padding-left:0; }
.nm .ming { float:none; width:auto; }
.nm .n1, .nm .n2 { float:none; width:auto; margin-right:0; left:0; }	
}
/* Hybrid 2cols MNN */
.mnn { padding-right:$n1 +$space; }
.mnn .ming{}
.mnn .n1 { width:$n1; margin-left:-$n1; left:$n1 +$space; }
.mnn .n2 { float:left; width:100%; margin-left:0; left:0; }
/* Hybrid 2cols NMN */
.nmn { padding-left:$n1 +$space; padding-right:0; }
.nmn .ming { float:right; margin-right:0; }//Extend::<-margin-right:-100%;
.nmn .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }
.nmn .n2 { width:100%; margin-left:0; left:0; }
/* Hybrid 2cols NNM */
.nnm { padding-left:$n1 +$space; }
.nnm .ming{}
.nnm .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }//Extend::left:-$n1 -$n2 -$space*2;
.nnm .n2 { float:right; width:100%; margin-right:0; left:0; }
}
@mixin tudingHSet($selector:'',$wrapping:auto,$n1:200px,$n2:200px,$space:10px){
/* [Hybrid Mode] [Reset] */
#{$selector} .wrapping { width:$wrapping; }
/* Hybrid Reset MN */
#{$selector} .mn { padding-right:$n1 +$space; }
#{$selector} .mn .n1, #{$selector} .mn .n2 { width:$n1; margin-left:-$n1; left:$n1 +$space; }
/* Hybrid Reset NM */
#{$selector} .nm { padding-left:$n1 +$space; }
#{$selector} .nm .n1, #{$selector} .nm .n2 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }
/* Hybrid Reset MNN */
#{$selector} .mnn { padding-right:$n1 +$n2 +$space*2; }
#{$selector} .mnn .n1 { width:$n1; margin-left:-$n1; left:$n1 +$space; }
#{$selector} .mnn .n2 { width:$n2; margin-left:-$n2; left:$n1 +$n2 +$space*2; }
/* Hybrid Reset NMN */
#{$selector} .nmn { padding-left:$n1 +$space; padding-right:$n2 +$space; }
#{$selector} .nmn .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }
#{$selector} .nmn .n2 { width:$n2; margin-left:-$n2; left:$n2 +$space; }
/* Hybrid Reset NNM */
#{$selector} .nnm { padding-left:$n1 +$n2 +$space*2; }
#{$selector} .nnm .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$n2 -$space*2; }
#{$selector} .nnm .n2 { width:$n2; margin-right:-$n2; left:-$n2 -$space; }
}



@mixin tudingFl($wrapping:960px,$n1:200px,$n2:200px,$space:10px){
//[Fixed L Mode]
/* Fixed MN */
.mn .ming { width:$wrapping -$n1 -$space; float:left; }
.mn .n1, .mn .n2 { width:$n1; float:right; }
/* Fixed NM */
.nm .ming { width:$wrapping -$n1 -$space; float:right; }
.nm .n1, .nm .n2 { width:$n1; float:left; }
/* Fixed L MNN */
.mnn .ming { width:$wrapping -$n1 -$n2 -$space*2; float:left; }
.mnn .n1 { width:$n1; float:left; margin-left:$space }
.mnn .n2 { width:$n2; float:right; }
/* Fixed L NMN */
.nmn .ming { width:$wrapping -$n1 -$n2 -$space*2; float:left; margin-right:-100%; left:$n1 +$space; }
.nmn .n1 { width:$n1; float:left; }
.nmn .n2 { width:$n2; float:right; }
/* Fixed NNM */
.nnm .ming { width:$wrapping -$n1 -$n2 -$space*2; float:right; }
.nnm .n1 { width:$n1; float:left; margin-right:$space; }
.nnm .n2 { width:$n2; float:left; }
}
@mixin tudingFl2cols($wrapping:960px,$n1:200px,$n2:200px,$space:10px,$cols:2){
/* [Fixed L Mode] [2 Columns] */
.wrapping { width:$wrapping; }
@if($cols==-1){
/* Fixed 2cols MN */
.mn .ming { width:auto; float:none; }
.mn .n1, .mn .n2 { width:auto; float:none; }
/* Fixed 2cols NM */
.nm .ming { width:auto; float:none; }
.nm .n1, .nm .n2 { width:auto; float:none; }	
}
/* Fixed L 2cols MNN */
.mnn .ming { width:$wrapping -$n1 -$space; }
.mnn .n1 { width:$n1; float:right; margin-left:$space; }
.mnn .n2 { width:$wrapping -$n1 -$space; float:left; }
/* Fixed L 2cols NMN */
.nmn .ming { width:$wrapping -$n1 -$space; float:right; margin-right:0; left:0; }//Extend::margin-right:-100%; left:$n1 +$space;
.nmn .n1 { width:$n1; }
.nmn .n2 { width:$wrapping -$n1 -$space; }
/* Fixed 2cols NNM */
.nnm .ming { width:$wrapping -$n1 -$space; }
.nnm .n1 { width:$n1; margin-right:$space; }
.nnm .n2 { width:$wrapping -$n1 -$space; float:right; }
}
@mixin tudingFlSet($selector:'',$wrapping:960px,$n1:200px,$n2:200px,$space:10px){
/* [Fixed L Mode] [Reset] */
#{$selector} .wrapping { width:$wrapping; }
/* Fixed Reset MN */
#{$selector} .mn .ming { width:$wrapping -$n1 -$space; }
#{$selector} .mn .n1, #{$selector} .mn .n2 { width:$n1; }
/* Fixed Reset NM */
#{$selector} .nm .ming { width:$wrapping -$n1 -$space; }
#{$selector} .nm .n1, #{$selector} .nm .n2 { width:$n1; }
/* Fixed L Reset MNN */
#{$selector} .mnn .ming { width:$wrapping -$n1 -$n2 -$space*2; }
#{$selector} .mnn .n1 { width:$n1; margin-left:$space; }
#{$selector} .mnn .n2 { width:$n2; }
/* Fixed L Reset NMN */
#{$selector} .nmn .ming { width:$wrapping -$n1 -$n2 -$space*2; left:$n1 +$space; }
#{$selector} .nmn .n1 { width:$n1; }
#{$selector} .nmn .n2 { width:$n2; }
/* Fixed Reset NNM */
#{$selector} .nnm .ming { width:$wrapping -$n1 -$n2 -$space*2; }
#{$selector} .nnm .n1 { width:$n1; margin-right:$space; }
#{$selector} .nnm .n2 { width:$n2; }
}



@mixin tudingFt7($wrapping:960px,$n1:200px,$n2:200px,$space:10px){
//[Fixed T&7 Mode]
/* Fixed MN */
.mn .n1, .mn .n2 { width:$n1; float:right; }
.mn .ming { width:$wrapping -$n1 -$space; float:left; }
/* Fixed NM */
.nm .n1, .nm .n2 { width:$n1; float:left; }
.nm .ming { width:$wrapping -$n1 -$space; float:right; }
/* Fixed T&7 MNN */
.mnn .n1 { width:$n1; float:left; margin-right:-100%; left:$wrapping -$n1 -$n2 -$space; }//!!!$space*1
.mnn .ming { width:$wrapping -$n1 -$n2 -$space*2; float:left; }
.mnn .n2 { width:$n2; float:right; }
/* Fixed T&7 NMN */
.nmn .n1 { width:$n1; float:left; margin-right:$space; }
.nmn .ming { width:$wrapping -$n1 -$n2 -$space*2; float:left; }
.nmn .n2 { width:$n2; float:right; }
/* Fixed NNM */
.nnm .n1 { width:$n1; float:left; margin-right:$space; }
.nnm .ming { width:$wrapping -$n1 -$n2 -$space*2; float:right; }
.nnm .n2 { width:$n2; float:left; }
}
@mixin tudingFt72cols($wrapping:960px,$n1:200px,$n2:200px,$space:10px,$cols:2){
/* [Fixed T&7 Mode] [2 Columns] */
.wrapping { width:$wrapping; }
@if($cols==-1){
/* Fixed 2cols MN */
.mn .n1, .mn .n2 { width:auto; float:none; }
.mn .ming { width:auto; float:none; }
/* Fixed 2cols NM */
.nm .n1, .nm .n2 { width:auto; float:none; }
.nm .ming { width:auto; float:none; }	
}
/* Fixed T&7 2cols MNN */
.mnn .n1 { width:$n1; float:right; margin-right:0; left:0; }//Extend::margin-right:-100%; left:$wrapping -$n1 -$n2 -$space;
.mnn .ming { width:$wrapping -$n1 -$space; }
.mnn .n2 { width:$wrapping -$n1 -$space; float:left; }
/* Fixed T&7 2cols NMN */
.nmn .n1 { width:$n1; margin-right:$space; }
.nmn .ming { width:$wrapping -$n1 -$space; float:right; }
.nmn .n2 { width:$wrapping -$n1 -$space; }
/* Fixed 2cols NNM */
.nnm .n1 { width:$n1; margin-right:$space; }
.nnm .ming { width:$wrapping -$n1 -$space; }
.nnm .n2 { width:$wrapping -$n1 -$space; float:right; }
}
@mixin tudingFt7Set($selector:'',$wrapping:960px,$n1:200px,$n2:200px,$space:10px){
/* [Fixed T&7 Mode] [Reset] */
#{$selector} .wrapping { width:$wrapping; }
/* Fixed Reset MN */
#{$selector} .mn .n1, #{$selector} .mn .n2 { width:$n1; }
#{$selector} .mn .ming { width:$wrapping -$n1 -$space; }
/* Fixed Reset NM */
#{$selector} .nm .n1, #{$selector} .nm .n2 { width:$n1; }
#{$selector} .nm .ming { width:$wrapping -$n1 -$space; }
/* Fixed Reset T&7 MNN */
#{$selector} .mnn .n1 { width:$n1; left:$wrapping -$n1 -$n2 -$space; }//!!!$space*1
#{$selector} .mnn .ming { width:$wrapping -$n1 -$n2 -$space*2; }
#{$selector} .mnn .n2 { width:$n2; }
/* Fixed Reset T&7 NMN */
#{$selector} .nmn .n1 { width:$n1; margin-right:$space; }
#{$selector} .nmn .ming { width:$wrapping -$n1 -$n2 -$space*2; }
#{$selector} .nmn .n2 { width:$n2; }
/* Fixed Reset NNM */
#{$selector} .nnm .n1 { width:$n1; margin-right:$space; }
#{$selector} .nnm .ming { width:$wrapping -$n1 -$n2 -$space*2; }
#{$selector} .nnm .n2 { width:$n2; }
}



@mixin tudingWidth($selector:''){
//[Tuding Width]
/* Width */
#{$selector} .w-1     { width:100%; }
#{$selector} .w-1-2   { width:50%; }
#{$selector} .w-1-3   { width:33.33333%; }
#{$selector} .w-2-3   { width:66.66666%; }
#{$selector} .w-1-4   { width:25%; }
#{$selector} .w-3-4   { width:75%; }
#{$selector} .w-1-5   { width:20%; }
#{$selector} .w-2-5   { width:40%; }
#{$selector} .w-3-5   { width:60%; }
#{$selector} .w-4-5   { width:80%; }
#{$selector} .w-1-6   { width:16.656%; }
#{$selector} .w-5-6   { width:83.33%; }
#{$selector} .w-1-8   { width:12.5%; }
#{$selector} .w-3-8   { width:37.5%; }
#{$selector} .w-5-8   { width:62.5%; }
#{$selector} .w-7-8   { width:87.5%; }
#{$selector} .w-1-12  { width:8.3333%; }
#{$selector} .w-5-12  { width:41.6666%; }
#{$selector} .w-7-12  { width:58.3333%; }
#{$selector} .w-11-12 { width:91.6666%; }
#{$selector} .w-1-24  { width:4.1666%; }
#{$selector} .w-5-24  { width:20.8333%; }
#{$selector} .w-7-24  { width:29.1666%; }
#{$selector} .w-11-24 { width:45.8333%; }
#{$selector} .w-13-24 { width:54.1666%; }
#{$selector} .w-17-24 { width:70.8333%; }
#{$selector} .w-19-24 { width:79.1666%; }
#{$selector} .w-23-24 { width:95.8333%; }
}



@mixin tudingX(){
//[Tuding X (Horizontal)]
/* X (Horizontal) */
.xcn { clear:none; }
.xcl { clear:left; }
.xcr { clear:right; }
.xcb { clear:both; }
.xfn { float:none; }
.xfl { float:left; }
.xfr { float:right; }
.xfc { margin-left:auto; margin-right:auto; }
}



@mixin clearfix(){
.clearfix{ *zoom:1; }
.clearfix:after { content:""; display:block; clear:both; }
}
@mixin ding(){
.ding{ position:relative; *zoom:1; }
.ding:after { content:""; display:block; clear:both; }
}
@mixin btnArea(){
.btnarea{ margin:1em 0; text-align:center; *zoom:1;}
.btnarea:after{ content:""; display:block; clear:both;}
}



@mixin tuding1col(){
//[Tuding Outer 1 Column]
.wrapping{ width:auto !important; }
.mn, .nm, .mnn, .nmn, .nnm { padding-left:0; padding-right:0; }
.mn  .ming, .mn  .n1, .mn  .n2,
.nm  .ming, .nm  .n1, .nm  .n2,
.mnn .ming, .mnn .n1, .mnn .n2,
.nmn .ming, .nmn .n1, .nmn .n2,
.nnm .ming, .nnm .n1, .nnm .n2 {
	width:auto; float:none; margin-left:0; margin-right:0; left:auto; right:auto; clear:both;
}
}



@mixin tudingWidth1col($selector:''){
//[Tuding W-a/b 1 Column]
#{$selector} .w-1,    #{$selector} .w-1-2,  #{$selector} .w-1-3,  #{$selector} .w-2-3,   #{$selector} .w-1-4,   #{$selector} .w-3-4,
#{$selector} .w-1-5,  #{$selector} .w-2-5,  #{$selector} .w-3-5,  #{$selector} .w-4-5,
#{$selector} .w-1-6,  #{$selector} .w-5-6,  #{$selector} .w-1-8,  #{$selector} .w-3-8,   #{$selector} .w-5-8,   #{$selector} .w-7-8,
#{$selector} .w-1-12, #{$selector} .w-5-12, #{$selector} .w-7-12, #{$selector} .w-11-12,
#{$selector} .w-1-24, #{$selector} .w-5-24, #{$selector} .w-7-24, #{$selector} .w-11-24, #{$selector} .w-13-24, #{$selector} .w-17-24, #{$selector} .w-19-24, #{$selector} .w-23-24 {
	width:auto; float:none;
}
}

Last edited Aug 23, 2013 at 10:13 AM by bubujie, version 1

Comments

No comments yet.