合并

pages/css/base/__func.md

@@ -0,0 +1,40 @@
+#func详细概述  **func**
+
+##命名空间
+
+现在分三个命名空间.
+
+###mc-base
+
+	基础空间函数包括
+	.tab-focus()  //触屏焦点
+	.clearfix()   //清浮动
+	.rotate(@degrees)  //旋转
+	.border-arrow(@width, @height, @color, @border-width:1px, @rotate:0deg)  //箭头.
+	.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) //渐变条
+	.box-shadow(@shadow)  //盒阴影
+	.opacity(@opacity)  //透明度
+	.border-radius(@radius) //圆角
+	.transition(@transition)  //过渡
+
+###font
+
+	分为family子空间和若干函数.
+	（1）.子空间包括
+	.serif()   //字体为“serif”
+	.sans-serif()  //字体为"sans-serif"
+	.monospace()  //字体为".monospace"
+
+	（2）.函数
+	.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight)  //设置排版字体.
+
+###gradient
+
+	基础空间函数包括：
+	.horizontal(@startColor: #555, @endColor: #333)  //水平渐变.
+	.vertical(@startColor: #555, @endColor: #333)  //垂直渐变.
+	.directional(@startColor: #555, @endColor: #333, @deg: 45deg) //对角.
+	.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) //垂直三色.
+	.radial(@innerColor: #555, @outerColor: #333) //径向渐变.
+	.striped(@color: #555, @angle: 45deg)  //条纹.
+

pages/css/base/__variables.md

@@ -0,0 +1,146 @@
+#变量  **变量**
+
+分为以下几类：
+
+##淡色（Grays）
+
+	@black:                 #000;
+	@grayDarker:            #222;
+	@grayDark:              #333;
+	@gray:                  #555;
+	@grayLight:             #999;
+	@grayLighter:           #eee;
+	@white:                 #fff;
+
+##重色(Accent colors)
+
+	@blue:                  #049cdb;
+	@blueDark:              #0064cd;
+	@green:                 #46a546;
+	@red:                   #9d261d;
+	@yellow:                #ffc40d;
+	@orange:                #f89406;
+	@pink:                  #c3325f;
+	@purple:                #7a43b6;
+
+##全局文本、背景（Scaffolding）
+
+	@bodyBackground:        @white;
+	@textColor:             @grayDark;
+
+##链接（Links）
+
+	@linkColor:             #08c;
+	@linkColorHover:        darken(@linkColor, 15%);
+
+##排版（Typography）
+
+	@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+	@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+	@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+
+	@baseFontSize:          14px;
+	@baseFontFamily:        @sansFontFamily;
+	@baseLineHeight:        20px;
+	@altFontFamily:         @serifFontFamily;
+
+	@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
+	@headingsFontWeight:    bold;    // instead of browser default, bold
+	@headingsColor:         inherit; // empty to use BS default, @textColor
+
+##组件尺寸（基于14px字体大小和20px行高）
+
+	@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
+	@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
+	@fontSizeMini:          @baseFontSize * 0.75; // ~11px
+
+	@paddingLarge:          11px 19px; // 44px
+	@paddingSmall:          2px 10px;  // 26px
+	@paddingMini:           1px 6px;   // 24px
+
+	@baseBorderRadius:      4px;
+	@borderRadiusLarge:     6px;
+	@borderRadiusSmall:     3px;
+
+##Buttons
+
+	@btnBackground:                     @white;
+	@btnBackgroundHighlight:            darken(@white, 10%);
+	@btnBorder:                         #bbb;
+
+	@btnPrimaryBackground:              @linkColor;
+	@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
+
+	@btnInfoBackground:                 #5bc0de;
+	@btnInfoBackgroundHighlight:        #2f96b4;
+
+	@btnSuccessBackground:              #62c462;
+	@btnSuccessBackgroundHighlight:     #51a351;
+
+	@btnWarningBackground:              lighten(@orange, 15%);
+	@btnWarningBackgroundHighlight:     @orange;
+
+	@btnDangerBackground:               #ee5f5b;
+	@btnDangerBackgroundHighlight:      #bd362f;
+
+	@btnInverseBackground:              #444;
+	@btnInverseBackgroundHighlight:     @grayDarker;
+
+##Forms
+
+	@inputBackground:               @white;
+	@inputBorder:                   #ccc;
+	@inputBorderRadius:             @baseBorderRadius;
+	@inputDisabledBackground:       @grayLighter;
+	@formActionsBackground:         #f5f5f5;
+	@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+##Z-index（规定以下几种，避免用户自己定义）
+
+	@zindexDropdown:          1000;
+	@zindexPopover:           1010;
+	@zindexTooltip:           1030;
+	@zindexFixedNavbar:       1030;
+	@zindexModalBackdrop:     1040;
+	@zindexModal:             1050;
+
+##Sprite
+
+	@iconSpritePath:          "../img/glyphicons-halflings.png";
+	@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+
+##Input placeholder text color
+
+	@placeholderText:         @grayLight;
+
+##Hr border color
+
+	@hrBorder:                @grayLighter;
+
+##Horizontal forms & lists
+
+	@horizontalComponentOffset:       180px;
+
+##Pagination
+
+	@paginationBackground:                #fff;
+	@paginationBorder:                    #ddd;
+	@paginationActiveBackground:          #f5f5f5;
+
+##Form states and alerts
+
+	@warningText:             #c09853;
+	@warningBackground:       #fcf8e3;
+	@warningBorder:           darken(spin(@warningBackground, -10), 3%);
+
+	@errorText:               #b94a48;
+	@errorBackground:         #f2dede;
+	@errorBorder:             darken(spin(@errorBackground, -10), 3%);
+
+	@successText:             #468847;
+	@successBackground:       #dff0d8;
+	@successBorder:           darken(spin(@successBackground, -10), 5%);
+
+	@infoText:                #3a87ad;
+	@infoBackground:          #d9edf7;
+	@infoBorder:              darken(spin(@infoBackground, -10), 7%);

pages/css/category.md

@@ -1,6 +1,19 @@
 * [Mix CSS入门手册](tutorial/quick-guide.md)
 * [开发文档](#)
+	* [基础文档&开发规范](tutorial/quick-guide.md)
 	* [Less生成CSS冗余测试](tutorial/redundancy_of_css_generated_by_less.md)
 	* [bootStrap分析文档](tutorial/analysis_of_bootStrap.md)
+	* [适合移动端的组件？(与PC的差别)](tutorial/whats_mobile_component.md)
+* [组件基础依赖/规范](#)
+    * [__variables](base/__variables.md)
+    * [__func](base/__func.md)
 * [组件入门](#)
 	* [button](component/button.md)
+	* [text](component/text.md)
+	* [select](component/select.md)
+	* [checkbox](component/checkbox.md)
+	* [radio](component/radio.md)
+	* [textarea](component/textarea.md)
+	* [navs](component/navs.md)
+	* [pagination](component/pagination.md)
+	* [breadcrumbs](component/breadcrumbs.md)

pages/css/component/breadcrumbs.md

@@ -0,0 +1,10 @@
+#breadcrumbs组件 **breadcrumbs**
+
+
+##集中控制的样式属性
+
+	padding
+	margin
+	list-style
+	background-color
+	border-radius

pages/css/component/button.md

@@ -0,0 +1,14 @@
+#button组件 **button**
+
+
+##集中控制的样式属性
+
+	display
+	padding
+	font-size
+	line-height
+	text-align
+	vertical-align
+	border
+	background
+

pages/css/component/checkbox.md

@@ -0,0 +1,11 @@
+#checkbox组件 **checkbox**
+
+
+##集中控制的样式属性
+
+	width
+	height
+	border
+	border-top
+	background
+

pages/css/component/navs.md

@@ -0,0 +1,12 @@
+#navs组件 **navs**
+
+
+##集中控制的样式属性
+
+
+	margin-left
+	margin-bottom
+	list-style
+
+	//for webkit default margin.
+	padding-left

pages/css/component/pagination.md

@@ -0,0 +1,6 @@
+#pagination组件 **pagination**
+
+
+##集中控制的样式属性
+
+

pages/css/component/radio.md

@@ -0,0 +1,10 @@
+#radio组件 **radio**
+
+
+##集中控制的样式属性
+
+	width
+	height
+	background
+	background-image
+

pages/css/component/select.md

@@ -0,0 +1,12 @@
+#select组件 **select**
+
+
+##集中控制的样式属性
+
+	width
+	height
+	border
+	border-top
+	padding
+	background
+

pages/css/component/text.md

@@ -0,0 +1,14 @@
+#text组件 **text**
+
+
+##集中控制的样式属性
+
+	width
+	height
+	border
+	border-top
+	background
+	border-radius
+
+
+

pages/css/component/textarea.md

@@ -0,0 +1,9 @@
+#textarea组件 **textarea**
+
+
+##集中控制的样式属性
+
+	padding
+	border
+	background
+

pages/css/component/thumbnails.md

@@ -0,0 +1,6 @@
+#thumbnails组件 **thumbnails**
+
+
+##集中控制的样式属性
+
+

pages/css/tutorial/analysis_of_bootStrap.md

@@ -2,33 +2,17 @@
 
 ##序（持续更新）
 
-##文件组织
-less文件包含两部分：（从文件组织角度考虑）
-
-+ 函数
-+ class
-
-函数分为：
-
-+ 基本。基于组件，组件内部特有的函数。
-+ 通用。组件间提取出来，在组件之间可以使用。
-
-class分为：
-
-+ 基本。这部分class提供最基本的组件样式完整展示。
-+ 扩展。这部分class属于定制，在业务中可能有许多定制的部分，如给Button加上箭头。突破基本样式的以扩展class形式展现。
-
 ##和现有框架的比较
 
-最重要的几个衡量指标：灵活性，可扩展性，可维护性。
+几个衡量指标：灵活性，可扩展性，可维护性。
 
 
 ###h5
 
 	1.多用class标签；
 	2.级联和DOM结构关联度较高；
-	3.总的域名空间#tbh5v0；
-	4.实现方式容易理解；
+	3.总的域名空间(#tbh5v0)；
+	4.实现方式容易理解(阅读、书写)；
 	5.业务关联度高:比如说页尾，Less结构：
 	.footer{
 		a{
@@ -111,7 +95,7 @@ class分为：
 		.c-p-select{}
 	}
 
-	盘根错节的结构，扩展性，灵活性很差。
+	盘根错节的结构，扩展性，灵活性较差。
 
 
 ###TaobaoPad