gss fed 別亂來交給我們來 bear
TRANSCRIPT
?!
1
?!
1
2
3
4
5
6
6
7
7
8
8
10
10
11
5 �����12
5 �����12
13
.NETMVCtypescript
SVNgitJAVA
php
CoffeeScriptangular.js
jQuery
GruntGulp
81-$Prototype
�&)/4*"#
�03�Wireframe
6��,UI style
14
15
15
16
16
16
17
18
�,
�,7��
19
�%
+��
20
�%
+��
Tab 1st Level
21
Tab 2nd Level
�%Tab 1st Level
22
23
24
overwrite KENDO UI ��.
25
26
27
28
29
30
http://id.desbear.com/Gcss/beta/template/index.html
31
32
33
34
35
36
.wrapper .nav include ap-layout
.list include ap-layout
.detail include ap-layout
.nav, .list, .detail{ position: absolute; top:0; bottom:0; } .nav{ width:$nav-width; left:0; } .list{ left:$l-nav; width: $list-width; } .detail{ left: $nav-width + $list-width; right:0; }
.nav .list .detail
37
.ap-head … .ap-body … .ap-foot …
[class^=“ap-”]{ position: absolute; left:0; right:0; } .ap-head{ top:0; height: $ap-head-height; } .ap-foot{ bottom:0; height:$ap-foot-height; } .ap-body{ top: $ap-head-height; bottom: $ap-foot-height; overflow: auto; }
.list.ap-head
.ap-body
.ap-foot
38
39
40
41
42
fixed-width fluid-width fixed-width
43
How?
.col-left .col-center .col-right
44
.group .col-left .col-right
.col-center
.col-left{ float:left; width:$left-width; } .col-right{ float:right; width:$right-width; } .col-center{ margin-right:$right-width; margin-left:$left-width; }
.col-left .col-center .col-right
Float?
45
.group .col-left .col-right
.col-center
Float?
.col-left .col-center .col-right
46
.table .col-left .col-center
.col-right
.table{ display:table; width:100%; >[class^=“col-”]{ display:table-cell; } }
.col-left{width:$left-width;}
.col-right{width:$right-width;}
.col-left .col-center .col-right
Table-cell?
47
Table-cell?
.col-left .col-center .col-right
.table .col-left .col-center
.col-right
48
.col-left ���
49
.table .col-left .col-left-inner .col-center
.col-right .col-right-inner
.table{ display:table; width:100%; > [class^=“col-”]{ display:table-cell; } }
.col-left-inner{width:$left-width;}
.col-right-inner{width:$right-width;}
.col-left .col-center .col-right
Table-cell’s better way
.col-left-inner .col-right-inner
50
.inline-cloum .col-left .col-center .col-center-inner
.col-right
.inline-cloum > [class^=“col-”]{ display:inline-block; } .col-left{width: $left-width;} .col-right{width: $right-width;}
.col-center{ width: 100%; margin-left: -$left-width; margin-right: -$right-width; } .col-center-inner{ margin-left: $left-width; margin-right: $right-width; }
inline-block?
.col-left .col-center .col-right.col-center-inner
51
.inline-cloum .col-left .col-center .col-center-inner
.col-right
.col-left .col-center .col-right.col-center-inner
inline-block?
52
53
Neil ����
Evan ����
Woody ����
Cjie ����
�' ��!��2����(����
54
55