gss fed 別亂來交給我們來 bear

?!

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