Embed Size (px)
DESCRIPTION
Citation preview
2
3
4
5
6
7
— Легко поддерживать
8
— Легко поддерживать
— Легко добавлять темы
9
— Легко поддерживать
— Легко добавлять темы
— Дешево добавлять темы
10
Независимые блоки
11
/css
/blocks
/messages
...
12
/css
/blocks
/messages
...
/pages
main.css
13
Тема:
14
Тема:
— фоны
15
Тема:
— фоны
— цвета
16
Тема:
— фоны
— цвета
— шрифты
17
Тема:
— фоны
— цвета
— шрифты
— отступы, границы
18
Геометрия отдельно от оформления
19
/css
/blocks
/messages
/themes
/theme
20
/default
/messages
21
/default
/messages
default.scss
22
/default
/messages
default.scss
default.vars.scss
23
/default
/messages
default.scss
default.vars.scss
/theme
theme.scss
24
/default
/messages
default.scss
default.vars.scss
/theme
theme.scss
theme.vars.scss
25
SASS
26
/css/blocks/messages/messages.scss
.messages{
padding:20px;
}
27
/css/blocks/messages/messages.scss
.messages{
padding:20px;
}
/css/pages/mail.scss
@import url(../messages/messages.scss);
28
/css/themes/default/messages/messages.scss
.messages{
background:$messages-background;
}
29
/css/themes/default/messages/messages.scss
.messages{background:$messages-background;}
/css/blocks/default/default.scss
@import url(messages/messages.scss);
30
/css/themes/default/messages/messages.scss
.messages{background:$messages-background;}
/css/blocks/default/default.scss
@import url(messages/messages.scss);
31
/css/themes/theme/theme.vars.scss
$messages-background: #FFF;
32
/css/themes/theme/theme.vars.scss
$messages-background: #FFF;
/css/themes/theme/theme.scss
@import url(theme.vars.scss);
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);
34
/css/pages/mail.css
/css/themes/theme/theme.css
35
mixin
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
38
39
none repeat scroll 0 0 white
40
background: url(...), url(..), color url(datauri)
41
background: color url(datauri);
background: url(...), url(..), color url(datauri)
42
background: color url(datauri);
background: url(...), url(..), color url(datauri)
*background: color url(link)
43
.block {
background: $block--bg1, $block--bg2;
}
44
.block {
background: $block--background;
}
45
Список
color url() no-repeat left top
46
Двухуровневый список
url() no-repeat left top,
url() no-repeat left top,
color url() no-repeat left top
47
Ключ
48
фон как есть
49
фон как есть
+ фолбэк на старые браузеры
50
фон как есть
+ фолбэк на старые браузеры
+ фолбэк на старых ИЕ
51
url(), color, <key>
52
нет ключа
53
нет ключа
--multiback
54
нет ключа
--multiback
--multiback-ie
55
@mixin multibackground($bgs){
}
56
@mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
}
57
@mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
}
58
@mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {}
}
59
@mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {}
@else {}
}
60
@mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {…}
@else if $flag == "--multiback-ie" {}
@else {}
}
61
background: nth($bgs,length($bgs) - 1);
@include _multiback($bgs, 1);
62
@mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {…}
@else {}
}
63
background: nth($bgs, length($bgs) - 2);
@include _multiback($bgs, 2);
*background: nth($bgs, length($bgs) - 1);
64
@mixin multibackground($bgs){
$flag: nth($bgs, length($bgs));
@if $flag == "--multiback" {}
@else if $flag == "--multiback-ie" {}
@else {…}
}
65
background: $bgs;
66
16
67
Переключение тем
68
deferred
69
$.when(
AJAX.post(...),
switchThemeCss(themeId)
);
70
Проверка загрузки
71
jquery.getCSS
72
id темы
73
content font-family
74
IE:
content: undefined
font-family: 'some_data'
css data: 'some_data'
75
content + font-family
76
OPERA
content: "some_data"
font-family: "Times New Roman"
css data: "some_data"
77
content + font-family
78
function switchThemeCss (themeId){
var url = getThemeCssUrl(themeId);
}
79
function switchThemeCss (themeId){
var url = getThemeCssUrl(themeId);
$.getCSS(url, function(link){ … });
}
80
function switchThemeCss (themeId){
var deferred = $.Deferred();
var url = getThemeCssUrl(themeId);
$.getCSS(url, function(link){ … });
return deferred;
}
81
function switchThemeCss (themeId){
var deferred = $.Deferred();
var url = getThemeCssUrl(themeId);
$.getCSS(url, function(link){ … });
return deferred.promise();
}
82
if (getApplyedThemeId() !== oldThemeId){
$Theme.remove(); $Theme = $(link);
deferred.resolve();
} else {
$(link).remove();
deferred.reject();
}
83
Config
84
t1026 : {
title : 'Роботы',
text : 'Поздравляем!'
}
85
t1036 : {
title : 'Легенда',
link : {
href: 'http://link.mail.ru/',
title: 'Играть!',
target: '_blank'
}
}
86
Динамика
87
setTimeout
88
function chooseTheme(themeId){
var themeVariant = 'all',
switch (themeId) {…}
return themeVariant
}
89
function chooseTheme(themeId){
var themeVariant = 'all',
switch (themeId) {…}
return themeVariant
}
90
case 't1032':
if (time >= 7 && time < 19){
themeVariant = "day";
} else {
themeVariant = "night";
}
91
var themeChoosed = chooseTheme('t1032');
document.write(
'<linkhref="t1032.' + themeChoosed + '.css"/>'
);
92
