2. 2

3. 3

4. 4

5. 5

6. 6

7. — Легко поддерживать
7

8. — Легко поддерживать
— Легко добавлять темы
8

9. — Легко поддерживать
— Легко добавлять темы
— Дешево добавлять темы
9

10. Независимые блоки
10

11. /css
/blocks
/messages
...
11

12. /css
/blocks
/messages
...
/pages
main.css
12

13. Тема:
13

14. Тема:
— фоны
14

15. Тема:
— фоны
— цвета
15

16. Тема:
— фоны
— цвета
— шрифты
16

17. Тема:
— фоны
— цвета
— шрифты
— отступы, границы
17

18. Геометрия отдельно
от оформления
18

19. /css
/blocks
/messages
/themes
/theme
19

20. /default
/messages
20

21. /default
/messages
default.scss
21

22. /default
/messages
default.scss
default.vars.scss
22

23. /default
/messages
default.scss
default.vars.scss
/theme
theme.scss
23

24. /default
/messages
default.scss
default.vars.scss
/theme
theme.scss
24
theme.vars.scss

25. SASS
25

26. /css/blocks/messages/messages.scss
.messages{
padding:20px;
}
26

27. /css/blocks/messages/messages.scss
.messages{
padding:20px;
}
/css/pages/mail.scss
@import url(../messages/messages.scss);
27

28. /css/themes/default/messages/messages.scss
.messages{
background:$messages-background;
}
28

29. /css/themes/default/messages/messages.scss
.messages{background:$messages-background;}
/css/blocks/default/default.scss
@import url(messages/messages.scss);
29

30. /css/themes/default/messages/messages.scss
.messages{background:$messages-background;}
/css/blocks/default/default.scss
@import url(messages/messages.scss);
30

31. /css/themes/theme/theme.vars.scss
$messages-background: #FFF;
31

32. /css/themes/theme/theme.vars.scss
$messages-background: #FFF;
/css/themes/theme/theme.scss
@import url(theme.vars.scss);
32

33. /css/themes/theme/theme.vars.scss
$messages-background: #FFF;
/css/themes/theme/theme.scss
@import url(theme.vars.scss);
@import url(../default/default.scss);
33

34. /css/pages/mail.css
/css/themes/theme/theme.css
34

35. mixin
35

36. 36

37. url("data:image/…") repeat-x scroll 0 top,
url("data:image/…") repeat-x scroll 0 bottom,
url("data:image/…") repeat-y scroll right top,
url("data:image/…") repeat-y scroll 0 top,
none repeat scroll 0 0 white
37

38. 38

39. none repeat scroll 0 0 white
39

40. background: url(...), url(..), color url(datauri)
40

41. background: color url(datauri);
background: url(...), url(..), color url(datauri)
41

42. background: color url(datauri);
background: url(...), url(..), color url(datauri)
*background: color url(link)
42

43. .block {
background: $block--bg1, $block--bg2;
}
43

44. .block {
background: $block--background;
}
44

45. Список
color url() no-repeat left top
45

46. Двухуровневый список
url() no-repeat left top,
url() no-repeat left top,
color url() no-repeat left top
46

47. Ключ
47

48. фон как есть
48

49. фон как есть
+ фолбэк на старые браузеры
49

50. фон как есть
+ фолбэк на старые браузеры
+ фолбэк на старых ИЕ
50

51. url(), color, <key>
51

52. нет ключа
52

53. нет ключа
--multiback
53

54. нет ключа
--multiback
--multiback-ie
54

55. @mixin multibackground($bgs){
}
55

56. @mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
}
56

57. @mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
}
57

58. @mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {}
}
58

59. @mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {}
@else {}
}
59

60. @mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {…}
@else if $flag == "--multiback-ie" {}
@else {}
}
60

61. background: nth($bgs,length($bgs) - 1);
@include _multiback($bgs, 1);
61

62. @mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {…}
@else {}
}
62

63. background: nth($bgs, length($bgs) - 2);
@include _multiback($bgs, 2);
*background: nth($bgs, length($bgs) - 1);
63

64. @mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {}
@else {…}
}
64

65. background: $bgs;
65

66. 16
66

67. Переключение тем
67

68. deferred
68

69. $.when(
AJAX.post(...),
switchThemeCss(themeId)
);
69

70. Проверка загрузки
70

71. jquery.getCSS
71

72. id темы
72

73. content font-family
73

74. IE:
content: undefined
font-family: 'some_data'
css data: 'some_data'
74

75. content + font-family
75

76. OPERA
content: "some_data"
font-family: "Times New Roman"
css data: "some_data"
76

77. content + font-family
77

78. function switchThemeCss (themeId){
var url = getThemeCssUrl(themeId);
}
78

79. function switchThemeCss (themeId){
var url = getThemeCssUrl(themeId);
$.getCSS(url, function(link){ … });
}
79

80. function switchThemeCss (themeId){
var deferred = $.Deferred();
var url = getThemeCssUrl(themeId);
$.getCSS(url, function(link){ … });
return deferred;
}
80

81. function switchThemeCss (themeId){
var deferred = $.Deferred();
var url = getThemeCssUrl(themeId);
$.getCSS(url, function(link){ … });
return deferred.promise();
}
81

82. if (getApplyedThemeId() !== oldThemeId){
$Theme.remove(); $Theme = $(link);
deferred.resolve();
} else {
$(link).remove();
deferred.reject();
}
82

83. Config
83

84. t1026 : {
title : 'Роботы',
text : 'Поздравляем!'
}
84

85. t1036 : {
title : 'Легенда',
link : {
href: 'http://link.mail.ru/',
title: 'Играть!',
target: '_blank'
}
}
85

86. Динамика
86

87. setTimeout
87

88. function chooseTheme(themeId){
var themeVariant = 'all',
switch (themeId) {…}
return themeVariant
}
88

89. function chooseTheme(themeId){
var themeVariant = 'all',
switch (themeId) {…}
return themeVariant
}
89

90. case 't1032':
if (time >= 7 && time < 19){
themeVariant = "day";
} else {
themeVariant = "night";
}
90

91. var themeChoosed = chooseTheme('t1032');
document.write(
'<link href="t1032.' + themeChoosed + '.css"/>'
);
91

92. 92

93. СПАСИБО!
Андрей Сумин
Руководитель разработки клиентской части
sumin@corp.mail.ru